"use client";

import { useCallback, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  Car,
  Eye,
  EyeOff,
  AlertTriangle,
  MoreHorizontal,
  Loader2,
  Wrench,
} from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useServerPagination } from "@/presentation/hooks/use-server-pagination";
import { useT, useLocale } from "@/shared/i18n/client";
import { formatDate } from "@/shared/lib/format-date";
import ServerDataTable, {
  type Column,
} from "@/presentation/components/shared/server-data-table";
import StatsCard from "@/presentation/components/shared/stats-card";
import ConfirmationDialog from "@/presentation/components/shared/confirmation-dialog";
import { Button } from "@/presentation/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/presentation/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import { AntaiBadge } from "@/presentation/components/antai/antai-badges";
import { AntaiFilters } from "@/presentation/components/antai/antai-filters";
import { ExceptionDialog } from "@/presentation/components/antai/exception-dialog";
import { ANTAI_DISABLE_REASON_VALUES } from "@/shared/constants/antai";
import type {
  AntaiVehicle,
  AntaiDisableReason,
  UpdateAntaiExceptionPayload,
} from "@/domain/entities/antai-vehicle";

/** Normalize the visibility value (handles both word and S/N/E forms). */
function normVisibility(value?: string | null): "visible" | "hidden" | "exception" | "unknown" {
  const s = (value ?? "").toLowerCase();
  if (s === "visible" || s === "s") return "visible";
  if (s === "hidden" || s === "n") return "hidden";
  if (s === "exception" || s === "e") return "exception";
  return "unknown";
}

type ActionTarget = { vehicle?: AntaiVehicle; bulk?: boolean } | null;

export function AntaiVehiclesList() {
  const t = useT();
  const locale = useLocale();
  const router = useRouter();
  const repo = useRepositories().antaiVehicleRepository;
  const pagination = useServerPagination({
    orderBy: "last_antai_updated_date",
    order: "DESC",
  });

  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [enableTarget, setEnableTarget] = useState<ActionTarget>(null);
  const [disableTarget, setDisableTarget] = useState<ActionTarget>(null);
  const [disableReason, setDisableReason] = useState<AntaiDisableReason>("manual");
  const [exceptionTarget, setExceptionTarget] = useState<AntaiVehicle | null>(null);

  const { data: stats, refetch: refetchStats } = useApiQuery(
    () => repo.getStats(),
    { deps: [] }
  );
  const { data: options } = useApiQuery(() => repo.getOptions(), { deps: [] });
  const { data: response, loading, refetch } = useApiQuery(
    () => repo.findAll(pagination.params),
    { deps: [pagination.params] }
  );

  const rows = useMemo(() => response?.items ?? [], [response]);

  const refreshAll = useCallback(() => {
    refetch();
    refetchStats();
  }, [refetch, refetchStats]);

  const clearSelection = useCallback(() => setSelected(new Set()), []);

  // ---- Mutations ----
  const enableMutation = useApiMutation((id: number) => repo.enable(id), {
    successMessage: t.antai.toasts.enabled,
    onSuccess: () => {
      setEnableTarget(null);
      refreshAll();
    },
    onError: () => {
      setEnableTarget(null);
      refreshAll();
    },
  });

  const disableMutation = useApiMutation(
    ({ id, reason }: { id: number; reason: AntaiDisableReason }) =>
      repo.disable(id, reason),
    {
      successMessage: t.antai.toasts.disabled,
      onSuccess: () => {
        setDisableTarget(null);
        refreshAll();
      },
      onError: () => {
        setDisableTarget(null);
        refreshAll();
      },
    }
  );

  const exceptionMutation = useApiMutation(
    ({ id, payload }: { id: number; payload: UpdateAntaiExceptionPayload }) =>
      repo.updateException(id, payload),
    {
      successMessage: t.antai.exception.updated,
      onSuccess: () => {
        setExceptionTarget(null);
        refreshAll();
      },
    }
  );

  const bulkEnableMutation = useApiMutation(
    (ids: number[]) => repo.bulkEnable(ids),
    {
      onSuccess: (res) => {
        toast.success(t.antai.bulk.queued(res?.queued ?? selected.size));
        setEnableTarget(null);
        clearSelection();
        refreshAll();
      },
    }
  );

  const bulkDisableMutation = useApiMutation(
    ({ ids, reason }: { ids: number[]; reason: AntaiDisableReason }) =>
      repo.bulkDisable(ids, reason),
    {
      onSuccess: (res) => {
        toast.success(t.antai.bulk.queued(res?.queued ?? selected.size));
        setDisableTarget(null);
        clearSelection();
        refreshAll();
      },
    }
  );

  const enableBusy = enableMutation.loading || bulkEnableMutation.loading;
  const disableBusy = disableMutation.loading || bulkDisableMutation.loading;

  // ---- Selection ----
  const toggleRow = useCallback((row: AntaiVehicle) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(row.id)) next.delete(row.id);
      else next.add(row.id);
      return next;
    });
  }, []);

  const toggleAllOnPage = useCallback(
    (checked: boolean) => {
      setSelected((prev) => {
        const next = new Set(prev);
        for (const r of rows) {
          if (checked) next.add(r.id);
          else next.delete(r.id);
        }
        return next;
      });
    },
    [rows]
  );

  // ---- Confirm handlers ----
  const confirmEnable = () => {
    if (enableTarget?.vehicle) enableMutation.mutate(enableTarget.vehicle.id);
    else if (enableTarget?.bulk) bulkEnableMutation.mutate([...selected]);
  };

  const confirmDisable = () => {
    if (disableTarget?.vehicle)
      disableMutation.mutate({ id: disableTarget.vehicle.id, reason: disableReason });
    else if (disableTarget?.bulk)
      bulkDisableMutation.mutate({ ids: [...selected], reason: disableReason });
  };

  const openDisable = (target: ActionTarget) => {
    setDisableReason("manual");
    setDisableTarget(target);
  };

  const handleReset = () => {
    for (const key of Object.keys(pagination.filters)) pagination.setFilter(key, undefined);
    pagination.setSearch("");
  };

  // ---- Columns ----
  const columns: Column<AntaiVehicle>[] = [
    {
      key: "numberplate",
      label: t.antai.columns.vehicle,
      sortable: true,
      render: (row) => (
        <div className="min-w-0">
          <p className="text-sm font-medium truncate">{row.vehicle_name || "—"}</p>
          <p className="text-xs text-muted-foreground font-mono">
            {row.numberplate ?? "—"}
          </p>
        </div>
      ),
    },
    {
      key: "vin",
      label: t.antai.columns.vin,
      render: (row) => (
        <span className="font-mono text-xs text-muted-foreground">
          {row.vin ?? "—"}
        </span>
      ),
    },
    {
      key: "company",
      label: t.antai.columns.company,
      render: (row) => (
        <div className="min-w-0 space-y-1">
          <p className="text-sm truncate">{row.company?.name ?? "—"}</p>
          <AntaiBadge
            label={row.company_account_status?.label}
            color={row.company_account_status?.color}
          />
        </div>
      ),
    },
    {
      key: "vehicle_status",
      label: t.antai.columns.vehicleStatus,
      render: (row) => (
        <AntaiBadge label={row.vehicle_status?.label} color={row.vehicle_status?.color} />
      ),
    },
    {
      key: "antai_status",
      label: t.antai.columns.visibility,
      sortable: true,
      render: (row) => (
        <AntaiBadge label={row.antai_visibility?.label} color={row.antai_visibility?.color} />
      ),
    },
    {
      key: "binding_status",
      label: t.antai.columns.binding,
      render: (row) => (
        <div className="space-y-0.5">
          <AntaiBadge label={row.binding_status?.label} color={row.binding_status?.color} />
          {row.unbinding_reason && (
            <p className="text-[11px] text-muted-foreground">{row.unbinding_reason.label}</p>
          )}
        </div>
      ),
    },
    {
      key: "archive_status",
      label: t.antai.columns.archive,
      render: (row) =>
        row.archive_status?.archived ? (
          <AntaiBadge label={row.archive_status.label} color={row.archive_status.color} />
        ) : (
          <span className="text-muted-foreground text-xs">—</span>
        ),
    },
    {
      key: "antai_exception_status",
      label: t.antai.columns.exception,
      sortable: true,
      render: (row) =>
        row.exception ? (
          <div className="space-y-0.5">
            <AntaiBadge
              label={row.exception.status_label}
              color={row.exception.status_color}
              icon={AlertTriangle}
            />
            {row.exception.type_label && (
              <p className="text-[11px] text-muted-foreground">{row.exception.type_label}</p>
            )}
          </div>
        ) : (
          <span className="text-muted-foreground text-xs">—</span>
        ),
    },
    {
      key: "last_antai_updated_date",
      label: t.antai.columns.lastUpdate,
      sortable: true,
      render: (row) => (
        <span className="text-xs whitespace-nowrap">
          {row.last_antai_updated_date
            ? formatDate(row.last_antai_updated_date, locale)
            : "—"}
        </span>
      ),
    },
    {
      key: "actions",
      label: "",
      className: "w-10",
      render: (row) => {
        const state = normVisibility(row.antai_visibility?.value);
        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon-sm"
                onClick={(e) => e.stopPropagation()}
              >
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
              <DropdownMenuItem onClick={() => router.push(`/antai/${row.id}`)}>
                <Eye className="w-4 h-4 mr-2" />
                {t.antai.actions.view}
              </DropdownMenuItem>
              {state !== "visible" && (
                <DropdownMenuItem
                  className="text-emerald-600"
                  onClick={() => setEnableTarget({ vehicle: row })}
                >
                  <Eye className="w-4 h-4 mr-2" />
                  {t.antai.actions.enable}
                </DropdownMenuItem>
              )}
              {state !== "hidden" && (
                <DropdownMenuItem
                  className="text-amber-600"
                  onClick={() => openDisable({ vehicle: row })}
                >
                  <EyeOff className="w-4 h-4 mr-2" />
                  {t.antai.actions.disable}
                </DropdownMenuItem>
              )}
              {row.exception && (
                <>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => setExceptionTarget(row)}>
                    <Wrench className="w-4 h-4 mr-2" />
                    {t.antai.actions.manageException}
                  </DropdownMenuItem>
                </>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        );
      },
    },
  ];

  const sortValue = `${pagination.orderBy}:${pagination.order}`;
  const enableName = enableTarget?.vehicle?.vehicle_name ?? "";
  const disableName = disableTarget?.vehicle?.vehicle_name ?? "";

  return (
    <div className="space-y-6">
      {stats && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatsCard
            title={t.antai.stats.total}
            value={stats.total}
            subtitle={stats.archived ? t.antai.stats.archivedSuffix(stats.archived) : undefined}
            icon={Car}
            accent="blue"
          />
          <StatsCard
            title={t.antai.stats.visible}
            value={stats.visible}
            icon={Eye}
            accent="green"
          />
          <StatsCard
            title={t.antai.stats.hidden}
            value={stats.hidden}
            icon={EyeOff}
            accent="amber"
          />
          <StatsCard
            title={t.antai.stats.exceptions}
            value={stats.exceptions}
            subtitle={t.antai.stats.openExceptions(stats.open_exceptions)}
            icon={AlertTriangle}
            accent="red"
          />
        </div>
      )}

      <AntaiFilters
        options={options}
        filters={pagination.filters}
        onFilter={pagination.setFilter}
        search={pagination.search}
        onSearch={pagination.setSearch}
        sortValue={sortValue}
        onSort={(v) => {
          const [field, dir] = v.split(":");
          pagination.setSort(field, dir as "ASC" | "DESC");
        }}
        onReset={handleReset}
      />

      {selected.size > 0 && (
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 rounded-xl border border-primary/30 bg-primary/5 px-4 py-3">
          <span className="text-sm font-medium">{t.antai.bulk.selected(selected.size)}</span>
          <div className="flex items-center gap-2">
            <Button
              size="sm"
              variant="outline"
              className="gap-1.5"
              onClick={() => setEnableTarget({ bulk: true })}
            >
              <Eye className="w-4 h-4" />
              {t.antai.bulk.enable}
            </Button>
            <Button
              size="sm"
              variant="outline"
              className="gap-1.5"
              onClick={() => openDisable({ bulk: true })}
            >
              <EyeOff className="w-4 h-4" />
              {t.antai.bulk.disable}
            </Button>
            <Button size="sm" variant="ghost" onClick={clearSelection}>
              {t.antai.bulk.clear}
            </Button>
          </div>
        </div>
      )}

      <ServerDataTable
        columns={columns}
        data={rows}
        total={response?.total ?? 0}
        page={pagination.page}
        totalPages={response?.last_page ?? 1}
        loading={loading}
        onPageChange={pagination.setPage}
        onSortChange={pagination.setSort}
        sortBy={pagination.orderBy}
        sortOrder={pagination.order}
        emptyMessage={t.antai.empty}
        onRowClick={(row) => router.push(`/antai/${row.id}`)}
        selectable
        getRowId={(row) => row.id}
        selectedIds={[...selected]}
        onToggleRow={toggleRow}
        onToggleAllOnPage={toggleAllOnPage}
      />

      {/* Enable (single + bulk) */}
      <ConfirmationDialog
        open={enableTarget !== null}
        onOpenChange={(open) => !open && setEnableTarget(null)}
        title={enableTarget?.bulk ? t.antai.bulk.enableTitle : t.antai.enable.title}
        description={
          enableTarget?.vehicle
            ? t.antai.enable.description(enableName)
            : t.antai.bulk.enableDescription(selected.size)
        }
        confirmLabel={t.common.confirm}
        loading={enableBusy}
        onConfirm={confirmEnable}
      />

      {/* Disable (single + bulk) — carries an optional reason */}
      <Dialog
        open={disableTarget !== null}
        onOpenChange={(open) => !open && setDisableTarget(null)}
      >
        <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
          <DialogHeader>
            <DialogTitle>
              {disableTarget?.bulk ? t.antai.bulk.disableTitle : t.antai.disable.title}
            </DialogTitle>
            <DialogDescription>
              {disableTarget?.vehicle
                ? t.antai.disable.description(disableName)
                : t.antai.bulk.disableDescription(selected.size)}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">
              {t.antai.disable.reasonLabel}
            </label>
            <Select
              value={disableReason}
              onValueChange={(v) => setDisableReason(v as AntaiDisableReason)}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {ANTAI_DISABLE_REASON_VALUES.map((v) => (
                  <SelectItem key={v} value={v}>
                    {t.antai.enums.disableReason[v]}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDisableTarget(null)}>
              {t.common.cancel}
            </Button>
            <Button
              className="bg-amber-600 text-white hover:bg-amber-700"
              disabled={disableBusy}
              onClick={confirmDisable}
            >
              {disableBusy && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              {t.common.confirm}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Exception resolution tracking */}
      <ExceptionDialog
        open={exceptionTarget !== null}
        onOpenChange={(open) => !open && setExceptionTarget(null)}
        vehicle={exceptionTarget}
        loading={exceptionMutation.loading}
        onSubmit={(values) =>
          exceptionTarget &&
          exceptionMutation.mutate({
            id: exceptionTarget.id,
            payload: {
              ...values,
              detail: values.detail?.trim() ? values.detail.trim() : undefined,
            },
          })
        }
      />
    </div>
  );
}