"use client";
// src/app/invoices/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 } from "@/components/ui/index";
import { formatDate, formatCurrency, getLabel, INVOICE_STATUS_LABELS, INVOICE_STATUS_LABELS_AR, INVOICE_STATUS_COLORS } from "@/lib/utils";
import { Plus, MoreHorizontal, Eye, DollarSign } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { useLanguage } from "@/i18n/LanguageContext";

export default function InvoicesPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "", label: t("invoices.invoiceStatusAll") },
      { value: "DRAFT", label: t("invoices.stDraft") },
      { value: "SENT", label: t("invoices.stSent") },
      { value: "UNPAID", label: t("invoices.stUnpaid") },
      { value: "PARTIAL", label: t("invoices.stPartial") },
      { value: "PAID", label: t("invoices.stPaid") },
      { value: "OVERDUE", label: t("invoices.stOverdue") },
      { value: "CANCELLED", label: t("invoices.stCancelled") },
    ],
    [t]
  );
  const [invoices, setInvoices] = 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 canCreate = user && hasPermission(user.role, "invoices:create");
  const canUpdate = user && hasPermission(user.role, "invoices:update");

  const fetchInvoices = 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/invoices?${params}`);
      if (!res.ok) throw new Error("Failed");
      const data = await res.json();
      setInvoices(data.data.items);
      setMeta(data.data.meta);
    } catch {
      setError(t("invoices.loadError"));
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, search, statusFilter, t]);

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

  const handleSend = useCallback(
    async (id: string) => {
      try {
        const res = await fetch(`/api/invoices/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "send" }) });
        if (!res.ok) throw new Error((await res.json()).error);
        toast.success(t("invoices.toastSent"));
        fetchInvoices();
      } catch (e: any) {
        toast.error(e.message);
      }
    },
    [t, fetchInvoices]
  );

  const columns: ColumnDef<any, any>[] = useMemo(
    () => [
      {
        accessorKey: "invoiceNumber",
        header: t("invoices.number"),
        cell: ({ row }) => (
          <Link href={`/invoices/${row.original.id}`} className="font-mono font-semibold text-primary hover:underline text-sm">
            {row.original.invoiceNumber}
          </Link>
        ),
      },
      {
        id: "customer",
        header: t("invoices.colCustomer"),
        enableSorting: false,
        cell: ({ row }) => {
          const inv = row.original;
          return inv.contact ? (
            <div>
              <p className="text-sm font-medium">
                {inv.contact.firstName} {inv.contact.lastName}
              </p>
              {inv.account && <p className="text-xs text-muted-foreground">{inv.account.name}</p>}
            </div>
          ) : (
            <span className="text-muted-foreground text-sm">—</span>
          );
        },
      },
      {
        accessorKey: "total",
        header: t("invoices.colTotal"),
        cell: ({ row }) => <span className="font-semibold text-sm">{formatCurrency(row.original.total, row.original.currency)}</span>,
      },
      {
        id: "balance",
        header: t("invoices.colBalance"),
        enableSorting: false,
        cell: ({ row }) => {
          const inv = row.original;
          const balance = Number(inv.total) - Number(inv.amountPaid);
          return (
            <span className={cn("text-sm", balance > 0 ? "text-amber-600 font-medium" : "text-green-600")}>
              {balance > 0 ? formatCurrency(balance, inv.currency) : t("invoices.paidInFull")}
            </span>
          );
        },
      },
      {
        accessorKey: "status",
        header: t("common.status"),
        cell: ({ getValue }) => {
          const s = getValue() as string;
          return (
            <span className={cn("text-xs px-2 py-0.5 rounded-full font-medium", INVOICE_STATUS_COLORS[s] ?? "bg-gray-100")}>
              {getLabel(INVOICE_STATUS_LABELS, INVOICE_STATUS_LABELS_AR, s, language)}
            </span>
          );
        },
      },
      {
        accessorKey: "dueDate",
        header: t("invoices.dueDate"),
        cell: ({ row }) => {
          const inv = row.original;
          const isOverdue = inv.dueDate && new Date(inv.dueDate) < new Date() && !["PAID", "CANCELLED"].includes(inv.status);
          return (
            <span className={cn("text-xs", isOverdue ? "text-red-500 font-medium" : "text-muted-foreground")}>{inv.dueDate ? formatDate(inv.dueDate) : "—"}</span>
          );
        },
      },
      {
        id: "actions",
        header: "",
        enableSorting: false,
        size: 48,
        cell: ({ row }) => {
          const inv = row.original;
          const isOpen = openMenuId === inv.id;
          return (
            <div className="relative flex justify-end">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setOpenMenuId(isOpen ? null : inv.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={`/invoices/${inv.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("invoices.view")}
                    </Link>
                    {canUpdate && inv.status === "DRAFT" && (
                      <button
                        onClick={() => {
                          setOpenMenuId(null);
                          handleSend(inv.id);
                        }}
                        className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent w-full text-left"
                      >
                        <DollarSign className="w-4 h-4" /> {t("invoices.sendInvoice")}
                      </button>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        },
      },
    ],
    [t, language, openMenuId, canUpdate, handleSend]
  );

  return (
    <AppShell breadcrumbs={[{ label: t("nav.invoices") }]}>
      <PageHeader title={`${t("invoices.title")}${!isLoading ? ` (${meta.total})` : ""}`} description={t("invoices.listSubtitle")}>
        {canCreate && (
          <Button onClick={() => router.push("/invoices/new")}>
            <Plus className="w-4 h-4" /> {t("invoices.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={invoices}
        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("invoices.searchPlaceholder")}
        getRowId={(r) => r.id}
        emptyTitle={t("invoices.emptyListTitle")}
        emptyDescription={t("invoices.emptyListDescription")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/invoices/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("invoices.new")}
            </Button>
          ) : undefined
        }
      />
    </AppShell>
  );
}