'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 {
  PortalShell,
  PortalSection,
} from '@/components/portal/Portal';
import { api, getUploadUrl, uploadForm } from '@/lib/api';
import { useAuth } from '@/contexts/AuthContext';
import { useLanguage } from '@/contexts/LanguageContext';
import { StatusBadge } from '@/components/admin/admin-ui';
import { PhoneVerificationCard } from '@/components/verification/PhoneVerificationCard';
import { VERIFICATION_DOC_TYPES } from '@/lib/verificationDocs';

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

export default function CustomerVerificationPage() {
  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?.customerProfile 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(t('Please upload an image file (JPG, PNG, etc.)', 'Mag-upload ng image file (JPG, PNG, atbp.)'));
      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 : t('Upload failed', 'Hindi na-upload'));
    } finally {
      setUploading(null);
    }
  }

  return (
    <DashboardLayout
      role="customer"
      title={t('Identity Verification', 'Identity Verification')}
    >
      <PortalShell>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-start gap-3">
              {isVerified ? (
                <BadgeCheck className="h-10 w-10 shrink-0 text-primary" />
              ) : (
                <ShieldCheck className="h-10 w-10 shrink-0 text-amber-500" />
              )}
              <div>
                <h2 className="text-lg font-bold text-slate-900">
                  {isVerified
                    ? t('You are verified', 'Verified ka na')
                    : t('Verify to hire workers', 'I-verify para makapag-hire')}
                </h2>
                <p className="mt-1 text-sm text-muted">
                  {isVerified
                    ? t(
                        'Your identity is approved. You can send hire invitations to workers.',
                        'Approved na ang identity mo. Puwede ka nang magpadala ng hire invitation.'
                      )
                    : t(
                        'Verify your phone, then upload your ID and selfie so we can protect workers from fake or unsafe hirers. Hiring is unlocked after admin approval.',
                        'I-verify ang cellphone mo, tapos mag-upload ng ID at selfie para protektahan ang workers. Magiging available ang Hire pagkatapos ma-approve.'
                      )}
                </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} />

        <PortalSection
          icon={ShieldCheck}
          title={t('Required documents', 'Mga kailangang dokumento')}
          description={t(
            'Phone verification, Government ID, and selfie with ID are required.',
            'Kailangan ang phone verification, Government ID, at selfie na hawak ang ID.'
          )}
        >
          {loading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="h-8 w-8 animate-spin text-muted" />
            </div>
          ) : (
            <div className="space-y-3">
              {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="space-y-3 p-5">
                      <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="mt-0.5 text-sm text-muted">{item.description}</p>
                        </div>
                        {existing && <StatusBadge status={existing.status} />}
                      </div>

                      {existing && (
                        <div className="flex items-start gap-4">
                          <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="h-20 w-24 rounded-lg border border-border object-cover"
                            />
                          </a>
                          <div className="space-y-1 text-xs text-muted">
                            <p>
                              {t('Submitted', 'Naipasa')}{' '}
                              {new Date(existing.createdAt).toLocaleDateString()}
                            </p>
                            {existing.adminNote && (
                              <p className="rounded bg-amber-50 px-2 py-1 text-amber-700">
                                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 rounded-none"
                            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
                              ? t('Upload new document', 'Mag-upload ng bagong dokumento')
                              : t('Upload document', 'Mag-upload ng dokumento')}
                          </Button>
                        </>
                      )}

                      {existing?.status === 'PENDING' && (
                        <Badge variant="warning" className="normal-case">
                          {t('Waiting for admin review', 'Naghihintay ng admin review')}
                        </Badge>
                      )}
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </PortalSection>
      </PortalShell>
    </DashboardLayout>
  );
}