'use client';

import { Suspense, useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { Briefcase, ShieldCheck, Users } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { api, getUploadUrl } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
  PaginationBar,
  PaginationMeta,
  StatusBadge,
  formatDate,
} from '@/components/admin/admin-ui';
import { cn } from '@/lib/utils';

const DOC_TYPES = ['GOVERNMENT_ID', 'SELFIE', 'PROOF_OF_ADDRESS', 'OTHER'];
const DOC_STATUSES = ['PENDING', 'APPROVED', 'REJECTED', 'ADDITIONAL_DOCS_REQUIRED'];

type OwnerRole = 'worker' | 'customer' | '';

interface OwnerUser {
  id: string;
  firstName: string;
  lastName: string;
  email: string | null;
  phone: string | null;
  phoneVerified: boolean;
  emailVerified: boolean;
}

interface VerificationDoc {
  id: string;
  type: string;
  url: string;
  status: string;
  createdAt: string;
  reviewedAt: string | null;
  adminNote: string | null;
  worker: {
    id: string;
    displayName: string | null;
    isVerified: boolean;
    verificationStatus: string;
    user: OwnerUser;
  } | null;
  customer: {
    id: string;
    isVerified: boolean;
    verificationStatus: string;
    user: OwnerUser;
  } | null;
}

interface Summary {
  pendingWorkerDocs: number;
  pendingCustomerDocs: number;
  pendingDocsTotal: number;
  verifiedWorkers: number;
  verifiedCustomers: number;
}

function ownerOf(doc: VerificationDoc) {
  if (doc.customer?.user) {
    return {
      role: 'Customer' as const,
      roleKey: 'customer' as const,
      user: doc.customer.user,
      displayName: `${doc.customer.user.firstName} ${doc.customer.user.lastName}`,
      profileVerified: doc.customer.isVerified,
      verificationStatus: doc.customer.verificationStatus,
      profileId: doc.customer.id,
    };
  }
  if (doc.worker?.user) {
    return {
      role: 'Worker' as const,
      roleKey: 'worker' as const,
      user: doc.worker.user,
      displayName:
        doc.worker.displayName?.trim() ||
        `${doc.worker.user.firstName} ${doc.worker.user.lastName}`,
      profileVerified: doc.worker.isVerified,
      verificationStatus: doc.worker.verificationStatus,
      profileId: doc.worker.id,
    };
  }
  return {
    role: 'Unknown' as const,
    roleKey: null,
    user: null,
    displayName: 'Unknown',
    profileVerified: false,
    verificationStatus: 'PENDING',
    profileId: null,
  };
}

function parseOwner(value: string | null): OwnerRole {
  if (value === 'worker' || value === 'customer') return value;
  return '';
}

export default function AdminVerificationsPage() {
  return (
    <Suspense
      fallback={
        <DashboardLayout role="admin" title="Verifications">
          <AdminLoading />
        </DashboardLayout>
      }
    >
      <AdminVerificationsContent />
    </Suspense>
  );
}

function AdminVerificationsContent() {
  const searchParams = useSearchParams();
  const [docs, setDocs] = useState<VerificationDoc[]>([]);
  const [meta, setMeta] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
  const [summary, setSummary] = useState<Summary | null>(null);
  const [statusFilter, setStatusFilter] = useState(
    () => searchParams.get('status') || 'PENDING'
  );
  const [typeFilter, setTypeFilter] = useState('');
  const [ownerFilter, setOwnerFilter] = useState<OwnerRole>(() =>
    parseOwner(searchParams.get('owner'))
  );
  const [search, setSearch] = useState(() => searchParams.get('search') || '');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [reviewing, setReviewing] = useState<string | null>(null);
  const [preview, setPreview] = useState<VerificationDoc | null>(null);

  useEffect(() => {
    const owner = parseOwner(searchParams.get('owner'));
    const status = searchParams.get('status');
    const q = searchParams.get('search');
    if (owner !== ownerFilter) setOwnerFilter(owner);
    if (status != null && status !== statusFilter) setStatusFilter(status);
    if (q != null && q !== search) setSearch(q);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams]);

  const loadSummary = useCallback(async () => {
    try {
      const res = await api<{ data: Summary }>('/verifications/admin/summary');
      setSummary(res.data);
    } catch {
      // non-blocking
    }
  }, []);

  const load = useCallback(
    async (page = 1) => {
      setLoading(true);
      setError('');
      try {
        const params = new URLSearchParams({ page: String(page), limit: '20' });
        if (statusFilter) params.set('status', statusFilter);
        if (typeFilter) params.set('type', typeFilter);
        if (ownerFilter) params.set('owner', ownerFilter);
        if (search) params.set('search', search);
        const res = await api<{ data: VerificationDoc[]; meta: PaginationMeta }>(
          `/verifications/admin/documents?${params}`
        );
        setDocs(res.data);
        setMeta(res.meta!);
      } catch (e) {
        setError(e instanceof Error ? e.message : 'Failed to load documents');
      } finally {
        setLoading(false);
      }
    },
    [statusFilter, typeFilter, ownerFilter, search]
  );

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

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

  async function review(id: string, status: string) {
    const adminNote =
      status === 'REJECTED' || status === 'ADDITIONAL_DOCS_REQUIRED'
        ? prompt('Note for user (optional):') || undefined
        : undefined;
    setReviewing(id);
    try {
      const res = await api<{ data: { doc: VerificationDoc } }>(`/verifications/${id}/review`, {
        method: 'PATCH',
        body: JSON.stringify({ status, adminNote }),
      });
      setDocs((prev) => prev.map((d) => (d.id === id ? { ...d, ...res.data.doc } : d)));
      if (preview?.id === id) setPreview({ ...preview, ...res.data.doc });
      await loadSummary();
      // Refresh current page so profile flags update after sync
      await load(meta.page);
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Review failed');
    } finally {
      setReviewing(null);
    }
  }

  const roleTabs: { key: OwnerRole; label: string; count?: number; icon: typeof Users }[] = [
    { key: '', label: 'All', count: summary?.pendingDocsTotal, icon: ShieldCheck },
    {
      key: 'worker',
      label: 'Workers',
      count: summary?.pendingWorkerDocs,
      icon: Briefcase,
    },
    {
      key: 'customer',
      label: 'Customers',
      count: summary?.pendingCustomerDocs,
      icon: Users,
    },
  ];

  return (
    <DashboardLayout role="admin" title="Verifications">
      <p className="mb-5 text-sm text-muted">
        Review identity documents for workers and customers. Full verification also requires a
        verified phone number in their portal. Approved government ID + selfie unlocks worker
        public profiles and customer hiring.
      </p>

      <div className="mb-5 grid grid-cols-2 gap-3 lg:grid-cols-4">
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-amber-600">{summary?.pendingWorkerDocs ?? '—'}</p>
            <p className="text-xs text-muted">Pending worker docs</p>
            <button
              type="button"
              className="mt-2 text-xs font-semibold text-primary hover:underline"
              onClick={() => {
                setOwnerFilter('worker');
                setStatusFilter('PENDING');
              }}
            >
              Open worker queue
            </button>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-amber-600">{summary?.pendingCustomerDocs ?? '—'}</p>
            <p className="text-xs text-muted">Pending customer docs</p>
            <button
              type="button"
              className="mt-2 text-xs font-semibold text-primary hover:underline"
              onClick={() => {
                setOwnerFilter('customer');
                setStatusFilter('PENDING');
              }}
            >
              Open customer queue
            </button>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-slate-900">{summary?.verifiedWorkers ?? '—'}</p>
            <p className="text-xs text-muted">Verified workers</p>
            <Link href="/admin/workers" className="mt-2 inline-block text-xs font-semibold text-primary hover:underline">
              Manage workers
            </Link>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-slate-900">{summary?.verifiedCustomers ?? '—'}</p>
            <p className="text-xs text-muted">Verified customers</p>
            <Link href="/admin/customers" className="mt-2 inline-block text-xs font-semibold text-primary hover:underline">
              Manage customers
            </Link>
          </CardContent>
        </Card>
      </div>

      <div className="mb-4 flex flex-wrap gap-2 border-b border-border pb-3">
        {roleTabs.map((tab) => {
          const active = ownerFilter === tab.key;
          const Icon = tab.icon;
          return (
            <button
              key={tab.key || 'all'}
              type="button"
              onClick={() => setOwnerFilter(tab.key)}
              className={cn(
                'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition-colors',
                active
                  ? 'bg-primary text-white'
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              )}
            >
              <Icon className="h-4 w-4" />
              {tab.label}
              {typeof tab.count === 'number' && statusFilter === 'PENDING' ? (
                <span
                  className={cn(
                    'rounded-full px-1.5 py-0.5 text-[10px] font-bold',
                    active ? 'bg-white/20 text-white' : 'bg-amber-100 text-amber-800'
                  )}
                >
                  {tab.count}
                </span>
              ) : null}
            </button>
          );
        })}
      </div>

      <div className="mb-6 flex flex-col gap-3 lg:flex-row">
        <Input
          placeholder="Search name, email, or phone…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1"
        />
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="search-input h-11 rounded-md border border-border px-3"
        >
          <option value="">All statuses</option>
          {DOC_STATUSES.map((s) => (
            <option key={s} value={s}>
              {s.replace(/_/g, ' ')}
            </option>
          ))}
        </select>
        <select
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
          className="search-input h-11 rounded-md border border-border px-3"
        >
          <option value="">All document types</option>
          {DOC_TYPES.map((t) => (
            <option key={t} value={t}>
              {t.replace(/_/g, ' ')}
            </option>
          ))}
        </select>
        <Button onClick={() => load(1)}>Search</Button>
      </div>

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && docs.length === 0 && (
        <AdminEmpty
          message={
            ownerFilter === 'worker'
              ? 'No worker verification documents in this filter.'
              : ownerFilter === 'customer'
                ? 'No customer verification documents in this filter.'
                : 'No verification documents found.'
          }
        />
      )}
      {!loading && !error && docs.length > 0 && (
        <>
          <AdminTable>
            <thead>
              <tr>
                <AdminTh>Preview</AdminTh>
                <AdminTh>Role</AdminTh>
                <AdminTh>Person</AdminTh>
                <AdminTh>Account checks</AdminTh>
                <AdminTh>Document</AdminTh>
                <AdminTh>Status</AdminTh>
                <AdminTh>Submitted</AdminTh>
                <AdminTh>Actions</AdminTh>
              </tr>
            </thead>
            <tbody>
              {docs.map((doc) => {
                const owner = ownerOf(doc);
                return (
                  <tr key={doc.id} className="hover:bg-slate-50/50">
                    <AdminTd>
                      <button
                        type="button"
                        onClick={() => setPreview(doc)}
                        className="block overflow-hidden rounded border border-border hover:ring-2 hover:ring-primary/30"
                      >
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={getUploadUrl(doc.url)}
                          alt={doc.type}
                          className="h-12 w-16 object-cover"
                        />
                      </button>
                    </AdminTd>
                    <AdminTd>
                      <Badge
                        variant="secondary"
                        className={cn(
                          'normal-case',
                          owner.roleKey === 'worker' && 'bg-sky-50 text-sky-800',
                          owner.roleKey === 'customer' && 'bg-violet-50 text-violet-800'
                        )}
                      >
                        {owner.role}
                      </Badge>
                    </AdminTd>
                    <AdminTd>
                      {owner.user ? (
                        <>
                          <p className="font-medium text-slate-900">{owner.displayName}</p>
                          <p className="text-xs text-muted">{owner.user.email}</p>
                          {owner.user.phone ? (
                            <p className="text-xs text-muted">{owner.user.phone}</p>
                          ) : (
                            <p className="text-xs text-amber-700">No phone yet</p>
                          )}
                        </>
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </AdminTd>
                    <AdminTd>
                      <div className="space-y-1 text-xs">
                        <p className={owner.user?.phoneVerified ? 'text-emerald-700' : 'text-amber-700'}>
                          Phone: {owner.user?.phoneVerified ? 'Verified' : 'Not verified'}
                        </p>
                        <p className={owner.profileVerified ? 'text-emerald-700' : 'text-slate-600'}>
                          Profile:{' '}
                          {owner.profileVerified
                            ? 'Verified'
                            : (owner.verificationStatus || 'PENDING').replace(/_/g, ' ')}
                        </p>
                      </div>
                    </AdminTd>
                    <AdminTd>
                      <Badge variant="secondary" className="normal-case">
                        {doc.type.replace(/_/g, ' ')}
                      </Badge>
                    </AdminTd>
                    <AdminTd>
                      <StatusBadge status={doc.status} />
                      {doc.adminNote && (
                        <p className="mt-1 line-clamp-2 text-xs text-muted" title={doc.adminNote}>
                          {doc.adminNote}
                        </p>
                      )}
                    </AdminTd>
                    <AdminTd>{formatDate(doc.createdAt)}</AdminTd>
                    <AdminTd>
                      {doc.status === 'PENDING' ? (
                        <div className="flex flex-col gap-1">
                          <Button
                            size="sm"
                            variant="accent"
                            disabled={reviewing === doc.id}
                            onClick={() => review(doc.id, 'APPROVED')}
                          >
                            Approve
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            disabled={reviewing === doc.id}
                            onClick={() => review(doc.id, 'REJECTED')}
                          >
                            Reject
                          </Button>
                        </div>
                      ) : (
                        <Button size="sm" variant="ghost" onClick={() => setPreview(doc)}>
                          View
                        </Button>
                      )}
                    </AdminTd>
                  </tr>
                );
              })}
            </tbody>
          </AdminTable>
          <PaginationBar meta={meta} onPageChange={load} />
        </>
      )}

      {preview && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
          onClick={() => setPreview(null)}
        >
          <div
            className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-xl bg-white shadow-xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b p-4">
              <div>
                {(() => {
                  const owner = ownerOf(preview);
                  return (
                    <>
                      <p className="font-semibold text-slate-900">{owner.displayName}</p>
                      <p className="text-sm text-muted">
                        {owner.role} · {preview.type.replace(/_/g, ' ')}
                      </p>
                      {owner.user && (
                        <div className="mt-2 flex flex-wrap gap-1.5">
                          <Badge
                            variant="secondary"
                            className={cn(
                              'normal-case text-[10px]',
                              owner.user.phoneVerified
                                ? 'bg-emerald-50 text-emerald-800'
                                : 'bg-amber-50 text-amber-800'
                            )}
                          >
                            Phone {owner.user.phoneVerified ? 'verified' : 'pending'}
                          </Badge>
                          <Badge
                            variant="secondary"
                            className={cn(
                              'normal-case text-[10px]',
                              owner.profileVerified
                                ? 'bg-emerald-50 text-emerald-800'
                                : 'bg-slate-100 text-slate-700'
                            )}
                          >
                            Profile{' '}
                            {owner.profileVerified
                              ? 'verified'
                              : owner.verificationStatus.replace(/_/g, ' ').toLowerCase()}
                          </Badge>
                        </div>
                      )}
                    </>
                  );
                })()}
              </div>
              <button
                type="button"
                onClick={() => setPreview(null)}
                className="px-2 text-xl leading-none text-muted hover:text-slate-900"
              >
                ×
              </button>
            </div>
            <div className="space-y-4 p-4">
              <a href={getUploadUrl(preview.url)} target="_blank" rel="noopener noreferrer">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={getUploadUrl(preview.url)}
                  alt={preview.type}
                  className="w-full rounded-lg border border-border"
                />
              </a>
              <dl className="grid grid-cols-2 gap-2 text-sm">
                <dt className="text-muted">Status</dt>
                <dd>
                  <StatusBadge status={preview.status} />
                </dd>
                <dt className="text-muted">Submitted</dt>
                <dd>{formatDate(preview.createdAt)}</dd>
                <dt className="text-muted">Reviewed</dt>
                <dd>{formatDate(preview.reviewedAt)}</dd>
                {preview.adminNote && (
                  <>
                    <dt className="text-muted">Admin note</dt>
                    <dd>{preview.adminNote}</dd>
                  </>
                )}
              </dl>
              {preview.status === 'PENDING' && (
                <div className="flex flex-wrap gap-2 pt-2">
                  <Button
                    size="sm"
                    variant="accent"
                    disabled={reviewing === preview.id}
                    onClick={() => review(preview.id, 'APPROVED')}
                  >
                    Approve
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={reviewing === preview.id}
                    onClick={() => review(preview.id, 'ADDITIONAL_DOCS_REQUIRED')}
                  >
                    Request more docs
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={reviewing === preview.id}
                    onClick={() => review(preview.id, 'REJECTED')}
                  >
                    Reject
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </DashboardLayout>
  );
}