'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
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 } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
  PaginationBar,
  PaginationMeta,
  StatusBadge,
  formatDate,
} from '@/components/admin/admin-ui';
import { cn } from '@/lib/utils';

interface CustomerRow {
  id: string;
  email: string | null;
  phone: string | null;
  firstName: string;
  lastName: string;
  status: string;
  phoneVerified: boolean;
  emailVerified: boolean;
  createdAt: string;
  lastLoginAt: string | null;
  customerProfile: {
    id: string;
    isVerified: boolean;
    verificationStatus: string;
    _count: { verificationDocs: number };
  } | null;
}

interface ListSummary {
  verified: number;
  unverified: number;
  phonePending: number;
  total: number;
}

type VerifyFilter = '' | 'true' | 'false';
type PhoneFilter = '' | 'true' | 'false';

export default function AdminCustomersPage() {
  const [customers, setCustomers] = useState<CustomerRow[]>([]);
  const [summary, setSummary] = useState<ListSummary | null>(null);
  const [meta, setMeta] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
  const [search, setSearch] = useState('');
  const [verified, setVerified] = useState<VerifyFilter>('');
  const [phoneFilter, setPhoneFilter] = useState<PhoneFilter>('');
  const [accountStatus, setAccountStatus] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [updating, setUpdating] = useState<string | null>(null);

  const load = useCallback(
    async (page = 1) => {
      setLoading(true);
      setError('');
      try {
        const params = new URLSearchParams({ page: String(page), limit: '20' });
        if (search) params.set('search', search);
        if (verified) params.set('verified', verified);
        if (phoneFilter) params.set('phoneVerified', phoneFilter);
        if (accountStatus) params.set('status', accountStatus);
        const res = await api<{
          data: { items: CustomerRow[]; summary: ListSummary };
          meta: PaginationMeta;
        }>(`/users/admin/customers?${params}`);
        setCustomers(res.data.items);
        setSummary(res.data.summary);
        setMeta(res.meta!);
      } catch (e) {
        setError(e instanceof Error ? e.message : 'Failed to load customers');
      } finally {
        setLoading(false);
      }
    },
    [search, verified, phoneFilter, accountStatus]
  );

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

  async function toggleStatus(user: CustomerRow) {
    const next = user.status === 'ACTIVE' ? 'SUSPENDED' : 'ACTIVE';
    setUpdating(user.id);
    try {
      await api(`/users/${user.id}/status`, {
        method: 'PATCH',
        body: JSON.stringify({ status: next }),
      });
      setCustomers((prev) => prev.map((c) => (c.id === user.id ? { ...c, status: next } : c)));
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Update failed');
    } finally {
      setUpdating(null);
    }
  }

  async function patchCustomer(profileId: string, body: Record<string, unknown>) {
    setUpdating(profileId);
    try {
      await api(`/users/admin/customers/${profileId}`, {
        method: 'PATCH',
        body: JSON.stringify(body),
      });
      await load(meta.page);
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Update failed');
    } finally {
      setUpdating(null);
    }
  }

  const verifyTabs: { key: VerifyFilter; label: string; count?: number }[] = [
    { key: '', label: 'All', count: summary?.total },
    { key: 'false', label: 'Unverified', count: summary?.unverified },
    { key: 'true', label: 'Verified', count: summary?.verified },
  ];

  return (
    <DashboardLayout role="admin" title="Customers">
      <p className="mb-5 text-sm text-muted">
        Customers need a verified phone plus approved ID and selfie before they can hire workers.
      </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-slate-900">{summary?.total ?? '—'}</p>
            <p className="text-xs text-muted">Total customers</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-amber-600">{summary?.unverified ?? '—'}</p>
            <p className="text-xs text-muted">Unverified profiles</p>
            <button
              type="button"
              className="mt-2 text-xs font-semibold text-primary hover:underline"
              onClick={() => setVerified('false')}
            >
              Show unverified
            </button>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-amber-600">{summary?.phonePending ?? '—'}</p>
            <p className="text-xs text-muted">Phone not verified</p>
            <button
              type="button"
              className="mt-2 text-xs font-semibold text-primary hover:underline"
              onClick={() => setPhoneFilter('false')}
            >
              Show phone pending
            </button>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-emerald-700">{summary?.verified ?? '—'}</p>
            <p className="text-xs text-muted">Verified customers</p>
            <Link
              href="/admin/verifications?owner=customer&status=PENDING"
              className="mt-2 inline-block text-xs font-semibold text-primary hover:underline"
            >
              Pending docs queue
            </Link>
          </CardContent>
        </Card>
      </div>

      <div className="mb-4 flex flex-wrap gap-2 border-b border-border pb-3">
        {verifyTabs.map((tab) => {
          const active = verified === tab.key;
          return (
            <button
              key={tab.key || 'all'}
              type="button"
              onClick={() => setVerified(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'
              )}
            >
              {tab.label}
              {typeof tab.count === 'number' ? (
                <span
                  className={cn(
                    'rounded-full px-1.5 py-0.5 text-[10px] font-bold',
                    active ? 'bg-white/20 text-white' : 'bg-white text-slate-600'
                  )}
                >
                  {tab.count}
                </span>
              ) : null}
            </button>
          );
        })}
      </div>

      <div className="mb-6 flex flex-col gap-3 lg:flex-row">
        <Input
          placeholder="Search name, email, phone…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1"
        />
        <select
          value={phoneFilter}
          onChange={(e) => setPhoneFilter(e.target.value as PhoneFilter)}
          className="search-input h-11 rounded-md border border-border px-3"
        >
          <option value="">All phone status</option>
          <option value="true">Phone verified</option>
          <option value="false">Phone pending</option>
        </select>
        <select
          value={accountStatus}
          onChange={(e) => setAccountStatus(e.target.value)}
          className="search-input h-11 rounded-md border border-border px-3"
        >
          <option value="">All accounts</option>
          <option value="ACTIVE">Active</option>
          <option value="SUSPENDED">Suspended</option>
        </select>
        <Button onClick={() => load(1)}>Search</Button>
        <Link href="/admin/verifications?owner=customer&status=PENDING">
          <Button variant="outline">Pending docs</Button>
        </Link>
      </div>

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && customers.length === 0 && (
        <AdminEmpty message="No customers found." />
      )}
      {!loading && !error && customers.length > 0 && (
        <>
          <AdminTable>
            <thead>
              <tr>
                <AdminTh>Customer</AdminTh>
                <AdminTh>Contact</AdminTh>
                <AdminTh>Account checks</AdminTh>
                <AdminTh>Verification</AdminTh>
                <AdminTh>Account</AdminTh>
                <AdminTh>Joined</AdminTh>
                <AdminTh>Actions</AdminTh>
              </tr>
            </thead>
            <tbody>
              {customers.map((c) => (
                <tr key={c.id} className="hover:bg-slate-50/50">
                  <AdminTd>
                    <p className="font-medium text-slate-900">
                      {c.firstName} {c.lastName}
                    </p>
                    <p className="text-xs text-muted">Last login: {formatDate(c.lastLoginAt)}</p>
                  </AdminTd>
                  <AdminTd>
                    <p className="text-sm">{c.email || '—'}</p>
                    <p className="text-xs text-muted">{c.phone || 'No phone'}</p>
                  </AdminTd>
                  <AdminTd>
                    <div className="space-y-1 text-xs">
                      <p className={c.phoneVerified ? 'text-emerald-700' : 'text-amber-700'}>
                        Phone: {c.phoneVerified ? 'Verified' : 'Pending'}
                      </p>
                      <p className={c.emailVerified ? 'text-emerald-700' : 'text-slate-600'}>
                        Email: {c.emailVerified ? 'Verified' : 'Unverified'}
                      </p>
                      <p className="text-muted">
                        Docs: {c.customerProfile?._count.verificationDocs ?? 0}
                      </p>
                    </div>
                  </AdminTd>
                  <AdminTd>
                    <div className="flex flex-col items-start gap-1">
                      {c.customerProfile?.isVerified ? (
                        <Badge variant="verified">Verified</Badge>
                      ) : (
                        <Badge variant="warning">Unverified</Badge>
                      )}
                      <span className="text-[10px] uppercase text-muted">
                        {(c.customerProfile?.verificationStatus || 'PENDING').replace(/_/g, ' ')}
                      </span>
                    </div>
                  </AdminTd>
                  <AdminTd>
                    <StatusBadge status={c.status} />
                  </AdminTd>
                  <AdminTd>{formatDate(c.createdAt)}</AdminTd>
                  <AdminTd>
                    <div className="flex flex-col gap-1.5">
                      <Link
                        href={`/admin/verifications?owner=customer&search=${encodeURIComponent(
                          c.email || c.firstName
                        )}`}
                      >
                        <Button size="sm" variant="outline" className="w-full">
                          Docs
                        </Button>
                      </Link>
                      {c.customerProfile ? (
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={updating === c.customerProfile.id || updating === c.id}
                          onClick={() =>
                            patchCustomer(c.customerProfile!.id, {
                              isVerified: !c.customerProfile!.isVerified,
                            })
                          }
                        >
                          {c.customerProfile.isVerified ? 'Unverify' : 'Verify'}
                        </Button>
                      ) : null}
                      <Button
                        size="sm"
                        variant="ghost"
                        disabled={updating === c.id || updating === c.customerProfile?.id}
                        onClick={() => toggleStatus(c)}
                      >
                        {c.status === 'ACTIVE' ? 'Suspend' : 'Activate'}
                      </Button>
                    </div>
                  </AdminTd>
                </tr>
              ))}
            </tbody>
          </AdminTable>
          <PaginationBar meta={meta} onPageChange={load} />
        </>
      )}
    </DashboardLayout>
  );
}