"use client";

import { useCallback, useState } from "react";
import { useRouter } from "next/navigation";
import {
  ClipboardList,
  Hourglass,
  Radio,
  Package,
  MoreHorizontal,
  Check,
  X,
  Eye,
  Truck,
  Loader2,
} 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 from "@/presentation/components/shared/server-data-table";
import StatsCard from "@/presentation/components/shared/stats-card";
import { Button } from "@/presentation/components/ui/button";
import { Badge } from "@/presentation/components/ui/badge";
import { Input } from "@/presentation/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/presentation/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/presentation/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/presentation/components/ui/dialog";
import { StatusPill } from "@/presentation/components/telematics/status-pill";
import type { TelematicsOrder } from "@/domain/entities/telematics-order";
import type { Column } from "@/presentation/components/shared/server-data-table";

const STATUS_FILTER_VALUES = [
  "submitted",
  "in_progress",
  "pending_install",
  "installed",
  "delivered",
  "cancelled",
  "rejected",
];

export function OrdersTab() {
  const t = useT();
  const locale = useLocale();
  const container = useRepositories();
  const pagination = useServerPagination({ orderBy: "date", order: "DESC" });
  const router = useRouter();

  const today = new Date().toISOString().slice(0, 10);
  const [acceptTarget, setAcceptTarget] = useState<TelematicsOrder | null>(null);
  const [acceptDate, setAcceptDate] = useState(today);
  const [acceptNote, setAcceptNote] = useState("");
  const [rejectTarget, setRejectTarget] = useState<TelematicsOrder | null>(null);
  const [rejectReason, setRejectReason] = useState("");
  const [deliverTarget, setDeliverTarget] = useState<TelematicsOrder | null>(null);
  const [deliverDate, setDeliverDate] = useState(today);

  const { data: stats, refetch: refetchStats } = useApiQuery(
    () => container.telematicsOrderRepository.getStats(),
    { deps: [] }
  );

  const { data: response, loading, refetch } = useApiQuery(
    () => container.telematicsOrderRepository.findAll(pagination.params),
    { deps: [pagination.params] }
  );

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

  const acceptMutation = useApiMutation(
    ({ id, orderDate, note }: { id: number; orderDate: string; note?: string }) =>
      container.telematicsOrderRepository.accept(id, orderDate, note),
    {
      successMessage: t.telematics.orders.toasts.accepted,
      onSuccess: () => {
        setAcceptTarget(null);
        setAcceptDate(today);
        setAcceptNote("");
        refreshAll();
      },
    }
  );

  const rejectMutation = useApiMutation(
    ({ id, reason }: { id: number; reason: string }) =>
      container.telematicsOrderRepository.reject(id, reason),
    {
      successMessage: t.telematics.orders.toasts.rejected,
      onSuccess: () => {
        setRejectTarget(null);
        setRejectReason("");
        refreshAll();
      },
    }
  );

  const markDeliveredMutation = useApiMutation(
    ({ id, receivedDate }: { id: number; receivedDate: string }) =>
      container.telematicsOrderRepository.markDelivered(id, receivedDate),
    {
      successMessage: t.telematics.markDelivered.success,
      onSuccess: () => {
        setDeliverTarget(null);
        setDeliverDate(today);
        refreshAll();
      },
    }
  );

  const formatMoney = (value: number) =>
    new Intl.NumberFormat(locale === "fr" ? "fr-FR" : "en-US", {
      style: "currency",
      currency: "EUR",
      maximumFractionDigits: 0,
    }).format(value);

  const columns: Column<TelematicsOrder>[] = [
    {
      key: "reference",
      label: t.telematics.orders.columns.reference,
      sortable: true,
      render: (row) => (
        <span className="font-medium font-mono text-xs">{row.reference}</span>
      ),
    },
    {
      key: "organization",
      label: t.telematics.orders.columns.organization,
      render: (row) => (
        <div>
          <p className="text-sm">{row.organization?.name ?? "—"}</p>
          {row.organization?.contact_name && (
            <p className="text-xs text-muted-foreground">
              {row.organization.contact_name}
            </p>
          )}
        </div>
      ),
    },
    {
      key: "products",
      label: t.telematics.orders.columns.products,
      render: (row) => (
        <span className="text-xs">
          {row.products.length ? row.products.join(", ") : "—"}
        </span>
      ),
    },
    {
      key: "quantity",
      label: t.telematics.orders.columns.quantity,
      sortable: true,
      render: (row) => <span className="text-xs">{row.quantity}</span>,
    },
    {
      key: "delivery",
      label: t.telematics.orders.columns.delivery,
      render: (row) => (
        <div className="flex items-center gap-1.5 text-xs">
          <span>{row.delivery.primary ?? "—"}</span>
          {row.delivery.site_count > 1 && (
            <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
              +{row.delivery.site_count - 1}
            </Badge>
          )}
        </div>
      ),
    },
    {
      key: "date",
      label: t.telematics.orders.columns.date,
      sortable: true,
      render: (row) => (
        <span className="text-xs">{formatDate(row.date, locale)}</span>
      ),
    },
    {
      key: "total_ht",
      label: t.telematics.orders.columns.totalHt,
      sortable: true,
      render: (row) => (
        <span className="text-xs font-medium">{formatMoney(row.total_ht)}</span>
      ),
    },
    {
      key: "status",
      label: t.telematics.orders.columns.status,
      render: (row) => (
        <StatusPill label={row.status_label} color={row.status_color} />
      ),
    },
    {
      key: "actions",
      label: "",
      className: "w-10",
      render: (row) => (
        <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()}>
            {row.can_accept && (
              <DropdownMenuItem
                className="text-emerald-600"
                onClick={() => {
                  setAcceptDate(today);
                  setAcceptNote("");
                  setAcceptTarget(row);
                }}
              >
                <Check className="w-4 h-4 mr-2" />
                {t.telematics.orders.actions.accept}
              </DropdownMenuItem>
            )}
            {row.can_reject && (
              <DropdownMenuItem
                className="text-destructive"
                onClick={() => setRejectTarget(row)}
              >
                <X className="w-4 h-4 mr-2" />
                {t.telematics.orders.actions.reject}
              </DropdownMenuItem>
            )}
            {row.can_mark_delivered && (
              <DropdownMenuItem
                onClick={() => {
                  setDeliverDate(today);
                  setDeliverTarget(row);
                }}
              >
                <Truck className="w-4 h-4 mr-2" />
                {t.telematics.markDelivered.action}
              </DropdownMenuItem>
            )}
            <DropdownMenuItem
              onClick={() => router.push(`/commandes-telematique/${row.id}`)}
            >
              <Eye className="w-4 h-4 mr-2" />
              {t.telematics.orders.actions.view}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  return (
    <div className="space-y-6">
      {stats && (
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <StatsCard
            title={t.telematics.orders.stats.total}
            value={stats.total}
            icon={ClipboardList}
            accent="blue"
          />
          <StatsCard
            title={t.telematics.orders.stats.pending}
            value={stats.en_attente}
            icon={Hourglass}
            accent="purple"
          />
          <StatsCard
            title={t.telematics.orders.stats.inProgress}
            value={stats.en_cours}
            icon={Radio}
            accent="amber"
          />
          <StatsCard
            title={t.telematics.orders.stats.installed}
            value={stats.installes}
            icon={Package}
            accent="green"
          />
        </div>
      )}

      <ServerDataTable
        columns={columns}
        data={response?.items ?? []}
        total={response?.total ?? 0}
        page={pagination.page}
        totalPages={response?.last_page ?? 1}
        loading={loading}
        search={pagination.search}
        onSearchChange={pagination.setSearch}
        onPageChange={pagination.setPage}
        onSortChange={pagination.setSort}
        sortBy={pagination.orderBy}
        sortOrder={pagination.order}
        searchPlaceholder={t.telematics.orders.searchPlaceholder}
        emptyMessage={t.telematics.orders.empty}
        onRowClick={(row) =>
          router.push(`/commandes-telematique/${row.id}`)
        }
        toolbar={
          <div className="flex flex-col gap-1">
            <span className="text-[11px] font-medium text-muted-foreground leading-none">
              {t.telematics.orders.filters.status}
            </span>
            <Select
              value={(pagination.filters.status as string) ?? "all"}
              onValueChange={(v) =>
                pagination.setFilter("status", v === "all" ? undefined : v)
              }
            >
              <SelectTrigger className="h-8 w-44 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">
                  {t.telematics.orders.filters.allStatuses}
                </SelectItem>
                {STATUS_FILTER_VALUES.map((s) => (
                  <SelectItem key={s} value={s}>
                    {s}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        }
      />

      {/* Accept */}
      <Dialog
        open={acceptTarget !== null}
        onOpenChange={(open) => {
          if (!open) {
            setAcceptTarget(null);
            setAcceptDate(today);
            setAcceptNote("");
          }
        }}
      >
        <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
          <DialogHeader>
            <DialogTitle>{t.telematics.orders.lifecycle.acceptTitle}</DialogTitle>
            <DialogDescription>
              {t.telematics.orders.lifecycle.acceptDescription}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-1.5">
            <label className="text-sm font-medium">
              {t.telematics.orders.lifecycle.acceptOrderDateLabel}
            </label>
            <Input
              type="date"
              value={acceptDate}
              onChange={(e) => setAcceptDate(e.target.value)}
            />
          </div>
          <textarea
            className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
            value={acceptNote}
            placeholder={t.telematics.orders.lifecycle.acceptNotePlaceholder}
            onChange={(e) => setAcceptNote(e.target.value)}
          />
          <DialogFooter>
            <Button variant="outline" onClick={() => setAcceptTarget(null)}>
              {t.common.cancel}
            </Button>
            <Button
              className="bg-emerald-600 text-white hover:bg-emerald-700"
              disabled={!acceptDate || acceptMutation.loading}
              onClick={() =>
                acceptTarget &&
                acceptMutation.mutate({
                  id: acceptTarget.id,
                  orderDate: acceptDate,
                  note: acceptNote.trim() || undefined,
                })
              }
            >
              {acceptMutation.loading && (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              )}
              {t.telematics.orders.lifecycle.confirm}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Reject */}
      <Dialog
        open={rejectTarget !== null}
        onOpenChange={(open) => !open && setRejectTarget(null)}
      >
        <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
          <DialogHeader>
            <DialogTitle>{t.telematics.orders.lifecycle.rejectTitle}</DialogTitle>
            <DialogDescription>
              {t.telematics.orders.lifecycle.rejectDescription}
            </DialogDescription>
          </DialogHeader>
          <textarea
            className="flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
            value={rejectReason}
            placeholder={t.telematics.orders.lifecycle.rejectReasonPlaceholder}
            onChange={(e) => setRejectReason(e.target.value)}
          />
          <DialogFooter>
            <Button variant="outline" onClick={() => setRejectTarget(null)}>
              {t.common.cancel}
            </Button>
            <Button
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={!rejectReason.trim() || rejectMutation.loading}
              onClick={() =>
                rejectTarget &&
                rejectMutation.mutate({
                  id: rejectTarget.id,
                  reason: rejectReason.trim(),
                })
              }
            >
              {rejectMutation.loading && (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              )}
              {t.telematics.orders.lifecycle.confirm}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Mark delivered */}
      <Dialog
        open={deliverTarget !== null}
        onOpenChange={(open) => {
          if (!open) {
            setDeliverTarget(null);
            setDeliverDate(today);
          }
        }}
      >
        <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
          <DialogHeader>
            <DialogTitle>{t.telematics.markDelivered.title}</DialogTitle>
            <DialogDescription>
              {t.telematics.markDelivered.description}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-1.5">
            <label className="text-sm font-medium">
              {t.telematics.markDelivered.receivedDateLabel}
            </label>
            <Input
              type="date"
              value={deliverDate}
              onChange={(e) => setDeliverDate(e.target.value)}
            />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeliverTarget(null)}>
              {t.common.cancel}
            </Button>
            <Button
              disabled={!deliverDate || markDeliveredMutation.loading}
              onClick={() =>
                deliverTarget &&
                markDeliveredMutation.mutate({
                  id: deliverTarget.id,
                  receivedDate: deliverDate,
                })
              }
            >
              {markDeliveredMutation.loading && (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              )}
              {t.telematics.markDelivered.confirm}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}