"use client";
// src/app/quotes/page.tsx
import { useState, useEffect, useCallback, useMemo } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ColumnDef } from "@tanstack/react-table";
import { AppShell } from "@/components/layout/AppShell";
import { DataTable } from "@/components/datatable/DataTable";
import { Button, PageHeader, Select, ConfirmDialog } from "@/components/ui/index";
import { formatDate, formatCurrency, getLabel, QUOTE_STATUS_LABELS, QUOTE_STATUS_LABELS_AR, QUOTE_STATUS_COLORS } from "@/lib/utils";
import { toast } from "sonner";
import { Plus, Eye, Send, CheckCircle, XCircle, MoreHorizontal, FileText } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/i18n/LanguageContext";

export default function QuotesPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [quotes, setQuotes] = useState<any[]>([]);
  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 10, pageCount: 1 });
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [statusFilter, setStatusFilter] = useState("");
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "", label: t("quotes.quoteStatusAll") },
      { value: "DRAFT", label: t("quotes.stDraft") },
      { value: "SENT", label: t("quotes.stSent") },
      { value: "ACCEPTED", label: t("quotes.stAccepted") },
      { value: "REJECTED", label: t("quotes.stRejected") },
      { value: "EXPIRED", label: t("quotes.stExpired") },
    ],
    [t]
  );

  const canCreate = user && hasPermission(user.role, "quotes:create");
  const canUpdate = user && hasPermission(user.role, "quotes:update");

  const fetchQuotes = useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams({ page: String(page), pageSize: String(pageSize), ...(search && { search }), ...(statusFilter && { status: statusFilter }) });
      const res = await fetch(`/api/quotes?${params}`);
      if (!res.ok) throw new Error("Failed");
      const data = await res.json();
      setQuotes(data.data.items);
      setMeta(data.data.meta);
    } catch {
      setError(t("quotes.loadError"));
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, search, statusFilter, t]);

  useEffect(() => {
    fetchQuotes();
  }, [fetchQuotes]);
  useEffect(() => {
    setPage(1);
  }, [search, statusFilter]);

  const handleAction = useCallback(
    async (quoteId: string, action: string) => {
      try {
        const res = await fetch(`/api/quotes/${quoteId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action }) });
        if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
        if (action === "send") toast.success(t("quotes.toastActionSent"));
        else if (action === "accept") toast.success(t("quotes.toastActionAccepted"));
        else toast.success(t("quotes.toastActionRejected"));
        fetchQuotes();
      } catch (e: any) {
        toast.error(e.message);
      }
    },
    [fetchQuotes, t]
  );

  const columns: ColumnDef<any, any>[] = useMemo(
    () => [
      {
        accessorKey: "quoteNumber",
        header: t("quotes.number"),
        cell: ({ row }) => (
          <Link href={`/quotes/${row.original.id}`} className="font-mono font-semibold text-primary hover:underline text-sm">
            {row.original.quoteNumber}
          </Link>
        ),
      },
      {
        id: "customer",
        header: t("quotes.colCustomerOpp"),
        enableSorting: false,
        cell: ({ row }) => {
          const q = row.original;
          return (
            <div>
              {q.contact && (
                <p className="text-sm font-medium">
                  {q.contact.firstName} {q.contact.lastName}
                </p>
              )}
              {q.opportunity && <p className="text-xs text-muted-foreground">{q.opportunity.title}</p>}
              {!q.contact && !q.opportunity && <span className="text-muted-foreground text-sm">—</span>}
            </div>
          );
        },
      },
      {
        accessorKey: "total",
        header: t("quotes.colTotal"),
        cell: ({ row }) => <span className="font-semibold text-sm">{formatCurrency(row.original.total, row.original.currency)}</span>,
      },
      {
        accessorKey: "status",
        header: t("quotes.colStatus"),
        cell: ({ getValue }) => {
          const s = getValue() as string;
          return (
            <span className={cn("text-xs px-2 py-0.5 rounded-full font-medium", QUOTE_STATUS_COLORS[s] ?? "bg-gray-100 text-gray-600")}>
              {getLabel(QUOTE_STATUS_LABELS, QUOTE_STATUS_LABELS_AR, s, language)}
            </span>
          );
        },
      },
      {
        accessorKey: "version",
        header: t("quotes.colVersion"),
        cell: ({ getValue }) => <span className="text-xs text-muted-foreground">v{getValue()}</span>,
      },
      {
        accessorKey: "validUntil",
        header: t("quotes.validUntil"),
        cell: ({ getValue }) => {
          const val = getValue() as string;
          const isExpired = val && new Date(val) < new Date();
          return <span className={cn("text-xs", isExpired ? "text-red-500 font-medium" : "text-muted-foreground")}>{val ? formatDate(val) : "—"}</span>;
        },
      },
      {
        id: "owner",
        header: t("quotes.colOwner"),
        enableSorting: false,
        cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.owner?.name ?? "—"}</span>,
      },
      {
        id: "actions",
        header: "",
        enableSorting: false,
        size: 48,
        cell: ({ row }) => {
          const q = row.original;
          const isOpen = openMenuId === q.id;
          return (
            <div className="relative flex justify-end">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setOpenMenuId(isOpen ? null : q.id);
                }}
                className="p-1.5 rounded-lg hover:bg-accent text-muted-foreground"
              >
                <MoreHorizontal className="w-4 h-4" />
              </button>
              {isOpen && (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setOpenMenuId(null)} />
                  <div className="absolute top-full end-0 mt-1 bg-popover border border-border rounded-lg shadow-lg py-1 z-50 min-w-[160px]">
                    <Link href={`/quotes/${q.id}`} onClick={() => setOpenMenuId(null)} className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent">
                      <Eye className="w-4 h-4" /> {t("quotes.menuView")}
                    </Link>
                    {canUpdate && q.status === "DRAFT" && (
                      <button
                        onClick={() => {
                          setOpenMenuId(null);
                          handleAction(q.id, "send");
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent w-full text-left"
                      >
                        <Send className="w-4 h-4" /> {t("quotes.sendToCustomer")}
                      </button>
                    )}
                    {canUpdate && q.status === "SENT" && (
                      <>
                        <button
                          onClick={() => {
                            setOpenMenuId(null);
                            handleAction(q.id, "accept");
                          }}
                          className="flex items-center gap-2 px-3 py-1.5 text-sm text-green-600 hover:bg-accent w-full text-left"
                        >
                          <CheckCircle className="w-4 h-4" /> {t("quotes.markAccepted")}
                        </button>
                        <button
                          onClick={() => {
                            setOpenMenuId(null);
                            handleAction(q.id, "reject");
                          }}
                          className="flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 hover:bg-accent w-full text-left"
                        >
                          <XCircle className="w-4 h-4" /> {t("quotes.markRejected")}
                        </button>
                      </>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        },
      },
    ],
    [t, language, canUpdate, openMenuId, handleAction]
  );

  return (
    <AppShell breadcrumbs={[{ label: t("quotes.title") }]}>
      <PageHeader title={`${t("quotes.title")}${!isLoading ? ` (${meta.total})` : ""}`} description={t("quotes.listSubtitle")}>
        {canCreate && (
          <Button onClick={() => router.push("/quotes/new")}>
            <Plus className="w-4 h-4" /> {t("quotes.new")}
          </Button>
        )}
      </PageHeader>
      <div className="flex gap-3 mb-4">
        <div className="w-44">
          <Select options={STATUS_OPTIONS} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} />
        </div>
        {statusFilter && (
          <Button variant="ghost" size="sm" onClick={() => setStatusFilter("")}>
            {t("common.clear")}
          </Button>
        )}
      </div>
      <DataTable
        data={quotes}
        columns={columns}
        getRowClassName={(r) => (openMenuId === r.id ? "relative z-50" : undefined)}
        isLoading={isLoading}
        error={error}
        pageCount={meta.pageCount}
        page={meta.page}
        pageSize={meta.pageSize}
        total={meta.total}
        onPageChange={setPage}
        onPageSizeChange={(s) => {
          setPageSize(s);
          setPage(1);
        }}
        searchValue={search}
        onSearchChange={setSearch}
        searchPlaceholder={t("quotes.searchPlaceholder")}
        getRowId={(r) => r.id}
        emptyTitle={t("quotes.emptyListTitle")}
        emptyDescription={t("quotes.emptyListDescription")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/quotes/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("quotes.new")}
            </Button>
          ) : undefined
        }
      />
    </AppShell>
  );
}