"use client";

import { useMemo } from "react";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { ArrowUpRight, Plus, Car } 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 {
  DocumentStatusBadge,
  OwnershipBadge,
  VehicleTypeBadge,
} 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 { getVehicles, type VehicleListFilters } from "@/services/vehicles";
import { queryKeys } from "@/lib/query-keys";
import { useUrlState } from "@/lib/use-url-state";
import { useCan } from "@/features/auth/use-can";
import { useT } from "@/i18n";
import { friendlyErrorMessage } from "@/lib/errors";
import type { VehicleDocumentState, VehicleOwnershipValue, VehicleTypeValue } from "@/types/dashboard";

const OWNERSHIP_TYPES: VehicleOwnershipValue[] = ["company_owned", "personal"];
const VEHICLE_TYPES: VehicleTypeValue[] = ["motorcycle", "car", "van", "pickup_truck", "truck"];
const DOCUMENT_STATUSES: VehicleDocumentState[] = ["missing", "expired", "expiring_soon", "valid"];

export default function VehiclesPage() {
  const t = useT();
  const { can } = useCan();

  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 [ownership, setOwnership] = useUrlState("ownership", "", (value) =>
    (OWNERSHIP_TYPES as readonly string[]).includes(value) ? value : null,
  );
  const [vehicleType, setVehicleType] = useUrlState("type", "", (value) =>
    (VEHICLE_TYPES as readonly string[]).includes(value) ? value : null,
  );
  const [documents, setDocuments] = useUrlState("documents", "", (value) =>
    (DOCUMENT_STATUSES as readonly string[]).includes(value) ? value : null,
  );
  const [awaiting, setAwaiting] = useUrlState("awaiting", "", (value) =>
    value === "1" ? value : value === "" ? "" : null,
  );

  const filters = useMemo<VehicleListFilters>(
    () => ({
      page,
      rows: 10,
      search: search || undefined,
      ownership_type: (ownership || undefined) as VehicleListFilters["ownership_type"],
      vehicle_type: (vehicleType || undefined) as VehicleListFilters["vehicle_type"],
      document_status: (documents || undefined) as VehicleListFilters["document_status"],
      awaiting_assignment: awaiting === "1" ? true : undefined,
    }),
    [page, search, ownership, vehicleType, documents, awaiting],
  );

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

  const vehicles = data?.Model ?? [];
  const hasFilters = Boolean(search || ownership || vehicleType || documents || awaiting);

  function resetPage() {
    setPage(1);
  }

  return (
    <div>
      <PageHeader
        title={t("vehicles.title")}
        subtitle={t("vehicles.subtitle")}
        actions={
          can("vehicles.create") ? (
            <Link href="/vehicles/new">
              <Button>
                <Plus className="h-4 w-4" aria-hidden />
                {t("vehicles.add")}
              </Button>
            </Link>
          ) : null
        }
      />

      <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("vehicles.searchPlaceholder")}
            className="w-full lg:max-w-xs lg:flex-1"
          />
          <div className="flex flex-wrap items-center gap-2">
            <Select
              value={ownership || "all"}
              onValueChange={(value) => {
                resetPage();
                setOwnership(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-auto" aria-label={t("vehicles.filterOwnership")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("vehicles.filterOwnership")}: {t("common.all")}</SelectItem>
                {OWNERSHIP_TYPES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`vehicles.ownership.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={vehicleType || "all"}
              onValueChange={(value) => {
                resetPage();
                setVehicleType(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-auto" aria-label={t("vehicles.filterType")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("vehicles.filterType")}: {t("common.all")}</SelectItem>
                {VEHICLE_TYPES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`vehicles.types.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={documents || "all"}
              onValueChange={(value) => {
                resetPage();
                setDocuments(value === "all" ? "" : value);
              }}
            >
              <SelectTrigger className="w-auto" aria-label={t("vehicles.filterDocuments")}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("vehicles.filterDocuments")}: {t("common.all")}</SelectItem>
                {DOCUMENT_STATUSES.map((option) => (
                  <SelectItem key={option} value={option}>
                    {t(`vehicles.documents.${option}`)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button
              variant={awaiting === "1" ? "default" : "outline"}
              size="sm"
              onClick={() => {
                resetPage();
                setAwaiting(awaiting === "1" ? "" : "1");
              }}
              aria-pressed={awaiting === "1"}
            >
              {t("vehicles.filterAwaiting")}
            </Button>
            {hasFilters ? (
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  setPage(1);
                  setSearch("");
                  setOwnership("");
                  setVehicleType("");
                  setDocuments("");
                  setAwaiting("");
                }}
              >
                {t("common.clearFilters")}
              </Button>
            ) : null}
          </div>
        </div>

        {isLoading ? (
          <TableSkeleton rows={8} cols={6} />
        ) : isError ? (
          <ErrorState message={friendlyErrorMessage(error, t)} onRetry={() => refetch()} />
        ) : vehicles.length === 0 ? (
          <EmptyState title={t("vehicles.empty")} description={t("vehicles.emptyHint")} icon={Car} />
        ) : (
          <>
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>{t("vehicles.fieldPlateNumber")}</TableHead>
                    <TableHead>{t("vehicles.fieldVehicle")}</TableHead>
                    <TableHead>{t("vehicles.fieldCaptain")}</TableHead>
                    <TableHead>{t("vehicles.fieldOwnership")}</TableHead>
                    <TableHead>{t("vehicles.fieldDocuments")}</TableHead>
                    <TableHead>{t("common.status")}</TableHead>
                    <TableHead aria-label={t("common.actions")} />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {vehicles.map((vehicle) => (
                    <TableRow key={vehicle.uuid}>
                      <TableCell dir="ltr" className="numeric font-medium text-foreground">
                        {vehicle.plate_number ?? "—"}
                      </TableCell>
                      <TableCell>
                        <div className="min-w-0">
                          <p className="truncate font-medium text-foreground">
                            {vehicle.brand && vehicle.model ? `${vehicle.brand} ${vehicle.model}` : (vehicle.brand ?? "—")}
                          </p>
                          {vehicle.vehicle_type ? (
                            <div className="mt-0.5">
                              <VehicleTypeBadge type={vehicle.vehicle_type} label={vehicle.vehicle_type_label ?? vehicle.vehicle_type} />
                            </div>
                          ) : null}
                        </div>
                      </TableCell>
                      <TableCell>
                        {vehicle.driver ? (
                          <div className="min-w-0">
                            <Link href={`/captains/${vehicle.driver.uuid}`} className="truncate font-medium text-foreground hover:text-primary hover:underline">
                              {vehicle.driver.name}
                            </Link>
                            <p dir="ltr" className="numeric text-xs text-muted-foreground">{vehicle.driver.phone}</p>
                          </div>
                        ) : (
                          <span className="text-xs text-muted-foreground">—</span>
                        )}
                      </TableCell>
                      <TableCell>
                        <OwnershipBadge type={vehicle.ownership_type} label={vehicle.ownership_type_label} />
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col gap-1">
                          <DocumentStatusBadge status={vehicle.registration_status} label={vehicle.registration_status_label} />
                          <DocumentStatusBadge status={vehicle.insurance_status} label={vehicle.insurance_status_label} />
                        </div>
                      </TableCell>
                      <TableCell>
                        <span className="text-xs font-medium text-muted-foreground">
                          {vehicle.is_active ? t("common.active") : t("common.inactive")}
                        </span>
                      </TableCell>
                      <TableCell>
                        <Link href={`/vehicles/${vehicle.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>
  );
}