'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { api } from '@/lib/api';
import { AdminError, AdminLoading, StatusBadge } from '@/components/admin/admin-ui';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';

export default function AdminDashboard() {
  const [data, setData] = useState<Record<string, unknown> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    api<{ data: Record<string, unknown> }>('/analytics/dashboard')
      .then((res) => setData(res.data))
      .catch((e) => setError(e instanceof Error ? e.message : 'Failed to load dashboard'))
      .finally(() => setLoading(false));
  }, []);

  const stats = (data?.stats as Record<string, number>) || {};
  const recentJobs = (data?.recentJobs as Record<string, unknown>[]) || [];

  const peopleCards = [
    { label: 'Total users', value: stats.totalUsers, href: '/admin/users' },
    { label: 'Workers', value: stats.totalWorkers, href: '/admin/workers' },
    { label: 'Customers', value: stats.totalCustomers, href: '/admin/customers' },
  ];

  const verificationCards = [
    {
      label: 'Pending worker docs',
      value: stats.pendingWorkerVerifications,
      href: '/admin/verifications?owner=worker&status=PENDING',
    },
    {
      label: 'Pending customer docs',
      value: stats.pendingCustomerVerifications,
      href: '/admin/verifications?owner=customer&status=PENDING',
    },
    {
      label: 'All pending docs',
      value: stats.pendingVerifications,
      href: '/admin/verifications?status=PENDING',
    },
  ];

  return (
    <DashboardLayout role="admin" title="Admin Dashboard">
      {loading && <AdminLoading />}
      {!loading && error && (
        <AdminError message={`${error}. Make sure you are logged in as an admin.`} />
      )}
      {!loading && !error && (
        <>
          <section className="mb-8">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="text-sm font-semibold uppercase tracking-wide text-muted">People</h2>
            </div>
            <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
              {peopleCards.map((s) => (
                <Link key={s.label} href={s.href}>
                  <Card className="h-full transition-colors hover:border-primary/30">
                    <CardContent className="p-4">
                      <p className="text-2xl font-bold text-slate-900">{s.value || 0}</p>
                      <p className="text-xs text-muted">{s.label}</p>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </section>

          <section className="mb-8">
            <div className="mb-3 flex items-center justify-between">
              <h2 className="text-sm font-semibold uppercase tracking-wide text-muted">
                Identity verification
              </h2>
              <Link href="/admin/verifications">
                <Button size="sm" variant="outline">
                  Review queue
                </Button>
              </Link>
            </div>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              {verificationCards.map((s) => (
                <Link key={s.label} href={s.href}>
                  <Card className="h-full transition-colors hover:border-amber-300">
                    <CardContent className="p-4">
                      <p className="text-2xl font-bold text-amber-600">{s.value || 0}</p>
                      <p className="text-xs text-muted">{s.label}</p>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </section>

          {JOBS_FEATURE_ENABLED ? (
            <>
              <div className="mb-4 flex items-center justify-between">
                <h2 className="text-lg font-bold">Recent Jobs</h2>
                <Link href="/admin/jobs">
                  <Button size="sm" variant="outline">
                    View all
                  </Button>
                </Link>
              </div>
              <div className="space-y-2">
                {recentJobs.map((job) => (
                  <Card key={job.id as string}>
                    <CardContent className="flex flex-col justify-between gap-2 p-4 sm:flex-row sm:items-center">
                      <div>
                        <p className="font-semibold text-slate-900">{job.title as string}</p>
                        <p className="text-sm text-muted">
                          {(job.category as { name: string })?.name} ·{' '}
                          {(job.customer as { firstName: string; lastName: string })?.firstName}{' '}
                          {(job.customer as { firstName: string; lastName: string })?.lastName}
                        </p>
                      </div>
                      <StatusBadge status={job.status as string} />
                    </CardContent>
                  </Card>
                ))}
                {recentJobs.length === 0 && (
                  <Card>
                    <CardContent className="p-8 text-center text-muted">No jobs yet.</CardContent>
                  </Card>
                )}
              </div>
            </>
          ) : null}
        </>
      )}
    </DashboardLayout>
  );
}