"use client";

import Link from "next/link";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ClipboardList, ExternalLink } from "lucide-react";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { EmploymentBadge, DriverStatusBadge } from "@/components/shared/status-badges";
import { EmptyState, ErrorState, TableSkeleton } from "@/components/shared/states";
import { useT, useI18n } from "@/i18n";
import { getDrivers } from "@/services/drivers";
import { queryKeys } from "@/lib/query-keys";
import { formatDateTime } from "@/lib/format";
import { ReviewActions } from "@/features/applications/review-dialogs";
import type { Driver } from "@/types/driver";

function ApplicationCard({ driver, onReviewed }: { driver: Driver; onReviewed: () => void }) {
  const t = useT();
  const { locale } = useI18n();
  return (
    <div className="flex flex-col gap-4 rounded-xl border bg-surface p-4 sm:flex-row sm:items-center">
      <div className="flex min-w-0 flex-1 items-center gap-3">
        <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary-soft text-sm font-semibold text-primary">
          {driver.name.slice(0, 1).toUpperCase()}
        </span>
        <div className="min-w-0">
          <Link
            href={`/captains/${driver.uuid}`}
            className="flex items-center gap-1 font-semibold text-foreground hover:text-primary"
          >
            <span className="truncate">{driver.name}</span>
            <ExternalLink className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
          </Link>
          <p className="truncate text-xs text-muted-foreground">
            <span dir="ltr">{driver.phone}</span>
            {driver.national_id ? <span className="ms-2 numeric">{driver.national_id}</span> : null}
          </p>
          <div className="mt-1 flex flex-wrap items-center gap-1.5">
            <DriverStatusBadge status={driver.status} label={driver.status_label} />
            <EmploymentBadge type={driver.employment_type} label={driver.employment_type_label} />
            <span className="text-[11px] text-muted-foreground">
              {t("common.createdAt")}: {formatDateTime(driver.created_at, locale)}
            </span>
          </div>
        </div>
      </div>
      <div className="shrink-0">
        <ReviewActions driver={driver} onDone={onReviewed} compact />
      </div>
    </div>
  );
}

export default function ApplicationsPage() {
  const t = useT();
  const queryClient = useQueryClient();

  const pendingQuery = useQuery({
    queryKey: queryKeys.drivers.list({ page: 1, rows: 25, status: "pending" }),
    queryFn: () => getDrivers({ page: 1, rows: 25, status: "pending" }),
  });

  const documentsQuery = useQuery({
    queryKey: queryKeys.drivers.list({ page: 1, rows: 25, status: "documents_required" }),
    queryFn: () => getDrivers({ page: 1, rows: 25, status: "documents_required" }),
  });

  function onReviewed() {
    queryClient.invalidateQueries({ queryKey: ["drivers"] });
    pendingQuery.refetch();
    documentsQuery.refetch();
  }

  const loading = pendingQuery.isLoading || documentsQuery.isLoading;
  const error = pendingQuery.error ?? documentsQuery.error;

  const pending = pendingQuery.data?.Model ?? [];
  const docs = documentsQuery.data?.Model ?? [];

  if (loading) {
    return (
      <div className="space-y-4">
        <PageHeader title={t("applications.title")} subtitle={t("applications.subtitle")} />
        <Card className="p-4">
          <TableSkeleton rows={5} cols={1} />
        </Card>
      </div>
    );
  }

  if (error) {
    return (
      <div>
        <PageHeader title={t("applications.title")} subtitle={t("applications.subtitle")} />
        <ErrorState message={String(error)} />
      </div>
    );
  }

  const totalQueued = pending.length + docs.length;

  return (
    <div>
      <PageHeader
        title={t("applications.title")}
        subtitle={`${t("applications.subtitle")} — ${totalQueued} ${t("applications.pending")}`}
      />
      <Tabs defaultValue="pending">
        <TabsList>
          <TabsTrigger value="pending">
            {t("applications.statusPending")} ({pending.length})
          </TabsTrigger>
          <TabsTrigger value="documents">
            {t("applications.statusDocumentsRequired")} ({docs.length})
          </TabsTrigger>
        </TabsList>
        <TabsContent value="pending">
          {pending.length === 0 ? (
            <Card>
              <CardContent>
                <EmptyState title={t("applications.queueEmpty")} description={t("applications.queueEmptyHint")} icon={ClipboardList} />
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-3">
              {pending.map((driver) => (
                <ApplicationCard key={driver.uuid} driver={driver} onReviewed={onReviewed} />
              ))}
            </div>
          )}
        </TabsContent>
        <TabsContent value="documents">
          {docs.length === 0 ? (
            <Card>
              <CardContent>
                <EmptyState title={t("applications.queueEmpty")} description={t("applications.queueEmptyHint")} icon={ClipboardList} />
              </CardContent>
            </Card>
          ) : (
            <div className="space-y-3">
              {docs.map((driver) => (
                <ApplicationCard key={driver.uuid} driver={driver} onReviewed={onReviewed} />
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}