"use client";

import { useMemo } from "react";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { ArrowUpRight, Users } from "lucide-react";
import { PageHeader } from "@/components/shared/page-header";
import { DebouncedSearch } from "@/components/shared/debounced-search";
import { Pagination } from "@/components/shared/pagination";
import { EmptyState, ErrorState, TableSkeleton } from "@/components/shared/states";
import { EmploymentBadge, DriverStatusBadge, OwnershipBadge } from "@/components/shared/status-badges";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { getDrivers, type DriverListFilters } from "@/services/drivers";
import { queryKeys } from "@/lib/query-keys";
import { useUrlState } from "@/lib/use-url-state";
import { useI18n, useT } from "@/i18n";
import { formatDateTime } from "@/lib/format";
import { friendlyErrorMessage } from "@/lib/errors";
import { cn } from "@/lib/cn";

const DRIVER_STATUSES = ["pending", "documents_required", "approved", "rejected", "suspended"] as const;
const EMPLOYMENT_TYPES = ["employee", "freelance"] as const;
const OWNERSHIP_TYPES = ["company_owned", "personal"] as const;

export default function CaptainsPage() {
  const t = useT();
  const { locale } = useI18n();

  const [page, setPage] = useUrlState("page", 1, (value) => {
    const n = Number(value);
    return Number.isFinite(n) && n >= 1 ? n : null;
  });
  const [search, setSearch] = useUrlState("search", "", (value) => value);
  const [status, setStatus] = useUrlState("status", "", (value) =>
    (DRIVER_STATUSES as readonly string[]).includes(value) ? value : null,
  );
  const [employment, setEmployment] = useUrlState("employment", "", (value) =>
    (EMPLOYMENT_TYPES as readonly string[]).includes(value) ? value : null,
  );
  const [ownership, setOwnership] = useUrlState("ownership", "", (value) =>
    (OWNERSHIP_TYPES as readonly string[]).includes(value) ? value : null,
  );

  const filters = useMemo<DriverListFilters>(
    () => ({
      page,
      rows: 10,
      search: search || undefined,
      status: (status || undefined) as DriverListFilters["status"],
      employment_type: (employment || undefined) as DriverListFilters["employment_type"],
      ownership_type: (ownership || undefined) as DriverListFilters["ownership_type"],
    }),
    [page, search, status, employment, ownership],
  );

  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: queryKeys.drivers.list(filters),
    queryFn: () => getDrivers(filters),
  });

  const drivers = data?.Model ?? [];

  const hasFilters = Boolean(search || status || employment || ownership);

  function resetPage() {
    setPage(1);
  }

  return (
    <div>
      <PageHeader title={t("drivers.title")} subtitle={t("drivers.subtitle")} />

      <Card>
        <div className="flex flex-col gap-3 border-b p-4 lg:flex-row lg:flex-wrap lg:items-center">
          <DebouncedSearch
            value={search}
            onChange={(value) => {
              resetPage();
              setSearch(value);
            }}
            placeholder={t("drivers.searchPlaceholder")}
            className="w-full lg:max-w-xs lg:flex-1"
          />
          <div className="flex flex-wrap items-center gap-2">
            <Select
              value={status || "all"}
              onValueChange={(value) => {
                resetPage();
                setStatus(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-[10.5rem]" aria-label={t("drivers.filterStatus")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("drivers.filterStatus")}: {t("common.all")}</SelectItem>
                {DRIVER_STATUSES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`drivers.status.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={employment || "all"}
              onValueChange={(value) => {
                resetPage();
                setEmployment(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-auto" aria-label={t("drivers.filterEmployment")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("drivers.filterEmployment")}: {t("common.all")}</SelectItem>
                {EMPLOYMENT_TYPES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`drivers.employment.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={ownership || "all"}
              onValueChange={(value) => {
                resetPage();
                setOwnership(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-auto" aria-label={t("drivers.filterVehicle")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("drivers.filterVehicle")}: {t("common.all")}</SelectItem>
                {OWNERSHIP_TYPES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`drivers.vehicle.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {hasFilters ? (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  setPage(1);
                  setSearch("");
                  setStatus("");
                  setEmployment("");
                  setOwnership("");
                }}
              >
                {t("common.clearFilters")}
              </Button>
            ) : null}
          </div>
        </div>

        {isLoading ? (
          <TableSkeleton rows={8} cols={6} />
        ) : isError ? (
          <ErrorState message={friendlyErrorMessage(error, t)} onRetry={() => refetch()} />
        ) : drivers.length === 0 ? (
          <EmptyState title={t("drivers.empty")} description={t("drivers.emptyHint")} icon={Users} />
        ) : (
          <>
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>{t("drivers.fieldName")}</TableHead>
                    <TableHead>{t("drivers.fieldPhone")}</TableHead>
                    <TableHead>{t("drivers.filterEmployment")}</TableHead>
                    <TableHead>{t("drivers.filterVehicle")}</TableHead>
                    <TableHead>{t("common.status")}</TableHead>
                    <TableHead>{t("common.createdAt")}</TableHead>
                    <TableHead aria-label={t("common.actions")} />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {drivers.map((driver) => (
                    <TableRow key={driver.uuid}>
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <span
                            className={cn(
                              "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
                              driver.is_active
                                ? "bg-primary-soft text-primary"
                                : "bg-muted text-muted-foreground",
                            )}
                          >
                            {driver.name.slice(0, 1).toUpperCase()}
                          </span>
                          <div className="min-w-0">
                            <p className="truncate font-medium text-foreground">{driver.name}</p>
                            <p className="truncate text-xs text-muted-foreground">
                              {driver.national_id ?? t("common.notAvailable")}
                            </p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell dir="ltr" className="numeric text-muted-foreground">
                        {driver.phone}
                      </TableCell>
                      <TableCell>
                        <EmploymentBadge type={driver.employment_type} label={driver.employment_type_label} />
                      </TableCell>
                      <TableCell>
                        {driver.vehicle?.ownership_type ? (
                          <OwnershipBadge type={driver.vehicle.ownership_type} label={driver.vehicle.ownership_type_label} />
                        ) : (
                          <span className="text-xs text-muted-foreground">—</span>
                        )}
                      </TableCell>
                      <TableCell>
                        <DriverStatusBadge status={driver.status} label={driver.status_label} />
                      </TableCell>
                      <TableCell className="text-xs text-muted-foreground">
                        {formatDateTime(driver.created_at, locale)}
                      </TableCell>
                      <TableCell>
                        <Link href={`/captains/${driver.uuid}`} className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline">
                          {t("common.view")}
                          <ArrowUpRight className="h-3 w-3" aria-hidden />
                        </Link>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
            <Pagination
              page={data!.Page}
              totalPages={data!.Total}
              records={data!.Records}
              onPageChange={(next) => setPage(next)}
            />
          </>
        )}
      </Card>
    </div>
  );
}