'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { BadgeCheck, Loader2, ShieldCheck, Upload } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { api, getUploadUrl, uploadForm } from '@/lib/api';
import { useAuth } from '@/contexts/AuthContext';
import { StatusBadge } from '@/components/admin/admin-ui';

import { WorkerPortalShell } from '@/components/worker/WorkerPortal';
import { PhoneVerificationCard } from '@/components/verification/PhoneVerificationCard';
import { VERIFICATION_DOC_TYPES } from '@/lib/verificationDocs';
import { useLanguage } from '@/contexts/LanguageContext';

interface VerificationDoc {
  id: string;
  type: string;
  url: string;
  status: string;
  adminNote: string | null;
  createdAt: string;
}

export default function WorkerVerificationPage() {
  const { user, refreshUser } = useAuth();
  const { t } = useLanguage();
  const [docs, setDocs] = useState<VerificationDoc[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState<string | null>(null);
  const [error, setError] = useState('');
  const fileRefs = useRef<Record<string, HTMLInputElement | null>>({});

  const profile = user?.workerProfile as
    | { isVerified?: boolean; verificationStatus?: string }
    | undefined;
  const isVerified = profile?.isVerified === true;
  const verificationStatus = profile?.verificationStatus || 'PENDING';

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await api<{ data: VerificationDoc[] }>('/verifications/my');
      setDocs(res.data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load documents');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  function latestDoc(type: string) {
    return docs.find((d) => d.type === type);
  }

  async function handleUpload(type: string, file: File) {
    if (!file.type.startsWith('image/')) {
      setError('Please upload an image file (JPG, PNG, etc.)');
      return;
    }
    setError('');
    setUploading(type);
    try {
      const formData = new FormData();
      formData.append('document', file);
      formData.append('type', type);
      await uploadForm('/verifications', formData);
      await load();
      await refreshUser();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Upload failed');
    } finally {
      setUploading(null);
    }
  }

  return (
    <DashboardLayout role="worker" title={t('Identity Verification', 'Identity Verification')}>
      <WorkerPortalShell>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-start gap-3">
              {isVerified ? (
                <BadgeCheck className="h-10 w-10 text-primary shrink-0" />
              ) : (
                <ShieldCheck className="h-10 w-10 text-amber-500 shrink-0" />
              )}
              <div>
                <h2 className="text-lg font-bold text-slate-900">
                  {isVerified
                    ? t('You are verified', 'Verified ka na')
                    : t('Get verified', 'Magpa-verify')}
                </h2>
                <p className="text-sm text-muted mt-1">
                  {isVerified
                    ? t(
                        'Your identity has been approved. Customers can see your verified badge, and your profile is visible in search and on the map.',
                        'Approved na ang identity mo. Makikita ng customers ang verified badge mo, at visible ang profile mo sa search at mapa.'
                      )
                    : t(
                        'Your public profile stays hidden until phone, ID, and selfie verification are approved. Complete phone verification and upload your documents so our team can review you — then you will appear in the directory.',
                        'Nakatago ang public profile mo hanggang ma-approve ang phone, ID, at selfie verification. Kumpletuhin ang phone verification at mag-upload ng dokumento — pagkatapos ay lalabas ka sa directory.'
                      )}
                </p>
                {!isVerified && (
                  <div className="mt-2">
                    <StatusBadge status={verificationStatus} />
                  </div>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {error && (
          <Card>
            <CardContent className="p-4 text-sm text-red-600">{error}</CardContent>
          </Card>
        )}

        <PhoneVerificationCard t={t} />

        {loading ? (
          <Card>
            <CardContent className="p-8 flex justify-center">
              <Loader2 className="h-8 w-8 animate-spin text-muted" />
            </CardContent>
          </Card>
        ) : (
          VERIFICATION_DOC_TYPES.map((item) => {
            const existing = latestDoc(item.type);
            const canUpload =
              !isVerified &&
              (!existing || ['REJECTED', 'ADDITIONAL_DOCS_REQUIRED'].includes(existing.status));

            return (
              <Card key={item.type}>
                <CardContent className="p-5 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <div>
                      <h3 className="font-semibold text-slate-900">
                        {item.label}
                        {item.required && <span className="text-red-500"> *</span>}
                      </h3>
                      <p className="text-sm text-muted mt-0.5">{item.description}</p>
                    </div>
                    {existing && <StatusBadge status={existing.status} />}
                  </div>

                  {existing && (
                    <div className="flex gap-4 items-start">
                      <a
                        href={getUploadUrl(existing.url)}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="shrink-0"
                      >
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={getUploadUrl(existing.url)}
                          alt={item.label}
                          className="w-24 h-20 object-cover rounded-lg border border-border"
                        />
                      </a>
                      <div className="text-xs text-muted space-y-1">
                        <p>Submitted {new Date(existing.createdAt).toLocaleDateString()}</p>
                        {existing.adminNote && (
                          <p className="text-amber-700 bg-amber-50 rounded px-2 py-1">
                            Admin: {existing.adminNote}
                          </p>
                        )}
                      </div>
                    </div>
                  )}

                  {canUpload && (
                    <>
                      <input
                        ref={(el) => {
                          fileRefs.current[item.type] = el;
                        }}
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => {
                          const file = e.target.files?.[0];
                          e.target.value = '';
                          if (file) handleUpload(item.type, file);
                        }}
                      />
                      <Button
                        type="button"
                        variant="outline"
                        className="gap-2"
                        disabled={uploading === item.type}
                        onClick={() => fileRefs.current[item.type]?.click()}
                      >
                        {uploading === item.type ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Upload className="h-4 w-4" />
                        )}
                        {existing ? 'Upload new document' : 'Upload document'}
                      </Button>
                    </>
                  )}

                  {existing?.status === 'PENDING' && (
                    <Badge variant="warning" className="normal-case">
                      Waiting for admin review
                    </Badge>
                  )}
                </CardContent>
              </Card>
            );
          })
        )}
      </WorkerPortalShell>
    </DashboardLayout>
  );
}