'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 { Card, CardContent } from '@/components/ui/card';
import { api } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
  PaginationBar,
  PaginationMeta,
  formatDate,
} from '@/components/admin/admin-ui';

interface DeletionRequest {
  id: string;
  email: string | null;
  phone: string | null;
  firstName: string;
  lastName: string;
  role: string;
  status: string;
  deletionRequestedAt: string | null;
  deletionScheduledFor: string | null;
  deletionReason: string | null;
  createdAt: string;
}

function formatWhen(iso: string | null) {
  if (!iso) return '—';
  return new Date(iso).toLocaleString('en-PH', {
    dateStyle: 'medium',
    timeStyle: 'short',
  });
}

export default function AdminDeletionsPage() {
  const [items, setItems] = useState<DeletionRequest[]>([]);
  const [graceHours, setGraceHours] = useState(48);
  const [meta, setMeta] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [busyId, setBusyId] = useState<string | null>(null);

  const load = useCallback(async (page = 1) => {
    setLoading(true);
    setError('');
    try {
      const params = new URLSearchParams({ page: String(page), limit: '20' });
      const res = await api<{
        data: { items: DeletionRequest[]; graceHours?: number };
        meta: PaginationMeta;
      }>(`/users/admin/deletion-requests?${params}`);
      setItems(res.data.items || []);
      setGraceHours(res.data.graceHours ?? 48);
      setMeta(res.meta!);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load deletion requests');
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function cancelRequest(id: string) {
    if (!confirm('Cancel this account removal request? The user keeps their account.')) return;
    setBusyId(id);
    try {
      await api(`/users/admin/deletion-requests/${id}/cancel`, { method: 'PATCH' });
      await load(meta.page);
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Cancel failed');
    } finally {
      setBusyId(null);
    }
  }

  async function processNow(id: string) {
    if (
      !confirm(
        'Remove this account now? Personal details will be anonymized immediately. This cannot be undone.'
      )
    ) {
      return;
    }
    setBusyId(id);
    try {
      await api(`/users/admin/deletion-requests/${id}/process`, { method: 'PATCH' });
      await load(meta.page);
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Process failed');
    } finally {
      setBusyId(null);
    }
  }

  const dueSoon = items.filter((item) => {
    if (!item.deletionScheduledFor) return false;
    return new Date(item.deletionScheduledFor).getTime() - Date.now() < 6 * 60 * 60 * 1000;
  }).length;

  return (
    <DashboardLayout role="admin" title="Account removals">
      <p className="mb-5 text-sm text-muted">
        Users can request account removal from their portal. Accounts stay active for{' '}
        <span className="font-semibold text-slate-800">{graceHours} hours</span> so they can cancel.
        After that, the system anonymizes personal data automatically. You can cancel a request or
        process it early.
      </p>

      <div className="mb-5 grid grid-cols-2 gap-3 lg:grid-cols-3">
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-slate-900">{meta.total}</p>
            <p className="text-xs text-muted">Pending requests</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-amber-600">{dueSoon}</p>
            <p className="text-xs text-muted">Due within 6 hours</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <p className="text-2xl font-bold text-slate-900">{graceHours}h</p>
            <p className="text-xs text-muted">Grace period</p>
          </CardContent>
        </Card>
      </div>

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && items.length === 0 && (
        <AdminEmpty message="No pending account removal requests." />
      )}
      {!loading && !error && items.length > 0 && (
        <>
          <AdminTable>
            <thead>
              <tr>
                <AdminTh>User</AdminTh>
                <AdminTh>Role</AdminTh>
                <AdminTh>Requested</AdminTh>
                <AdminTh>Scheduled</AdminTh>
                <AdminTh>Reason</AdminTh>
                <AdminTh>Actions</AdminTh>
              </tr>
            </thead>
            <tbody>
              {items.map((row) => {
                const overdue =
                  row.deletionScheduledFor &&
                  new Date(row.deletionScheduledFor).getTime() <= Date.now();
                return (
                  <tr key={row.id} className="hover:bg-slate-50/50">
                    <AdminTd>
                      <p className="font-medium text-slate-900">
                        {row.firstName} {row.lastName}
                      </p>
                      <p className="text-xs text-muted">{row.email || row.phone || '—'}</p>
                      <Link
                        href={
                          row.role === 'WORKER'
                            ? `/admin/workers`
                            : `/admin/customers`
                        }
                        className="mt-1 inline-block text-xs font-semibold text-primary hover:underline"
                      >
                        Open {row.role === 'WORKER' ? 'workers' : 'customers'}
                      </Link>
                    </AdminTd>
                    <AdminTd>
                      <span className="text-sm font-medium">{row.role}</span>
                    </AdminTd>
                    <AdminTd>
                      <p className="text-sm">{formatWhen(row.deletionRequestedAt)}</p>
                      <p className="text-[10px] text-muted">{formatDate(row.createdAt)}</p>
                    </AdminTd>
                    <AdminTd>
                      <p
                        className={
                          overdue ? 'text-sm font-semibold text-rose-700' : 'text-sm'
                        }
                      >
                        {formatWhen(row.deletionScheduledFor)}
                      </p>
                      {overdue ? (
                        <p className="text-[10px] font-semibold uppercase text-rose-600">
                          Overdue — next processor run
                        </p>
                      ) : null}
                    </AdminTd>
                    <AdminTd>
                      <p className="max-w-[220px] truncate text-sm text-slate-600">
                        {row.deletionReason || '—'}
                      </p>
                    </AdminTd>
                    <AdminTd>
                      <div className="flex flex-col gap-1.5">
                        <Button
                          size="sm"
                          variant="outline"
                          disabled={busyId === row.id}
                          onClick={() => cancelRequest(row.id)}
                        >
                          Cancel request
                        </Button>
                        <Button
                          size="sm"
                          variant="destructive"
                          disabled={busyId === row.id}
                          onClick={() => processNow(row.id)}
                        >
                          Remove now
                        </Button>
                      </div>
                    </AdminTd>
                  </tr>
                );
              })}
            </tbody>
          </AdminTable>
          <PaginationBar meta={meta} onPageChange={load} />
        </>
      )}
    </DashboardLayout>
  );
}