"use client";
// src/app/deals/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, ConfirmDialog, Select } from "@/components/ui/index";
import { formatDate, formatCurrency, OPP_STAGE_COLORS, OPP_STAGE_LABELS, OPP_STAGE_LABELS_AR } from "@/lib/utils";
import { toast } from "sonner";
import { Plus, Eye, Pencil, Trash2, MoreHorizontal } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { useLanguage } from "@/i18n/LanguageContext";

interface Deal {
  id: string;
  title: string;
  value: number;
  currency: string;
  stage: string;
  probability: number;
  closeDate: string | null;
  createdAt: string;
  assignedTo: { id: string; name: string } | null;
  customer: { id: string; firstName: string; lastName: string } | null;
  company: { id: string; name: string } | null;
}

export default function DealsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const stageLabels = language === "ar" ? OPP_STAGE_LABELS_AR : OPP_STAGE_LABELS;

  const STAGE_OPTIONS = useMemo(
    () => [
      { value: "", label: t("deals.allStages") },
      ...Object.entries(stageLabels).map(([value, label]) => ({ value, label })),
    ],
    [t, stageLabels]
  );
  const [deals, setDeals] = useState<Deal[]>([]);
  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 [sortBy, setSortBy] = useState("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  const [stageFilter, setStageFilter] = useState("");
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

  const canCreate = user && hasPermission(user.role, "deals:create");
  const canEdit = user && hasPermission(user.role, "deals:update");
  const canDelete = user && hasPermission(user.role, "deals:delete");

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

  useEffect(() => { fetchDeals(); }, [fetchDeals]);
  useEffect(() => { setPage(1); }, [search, stageFilter]);

  const handleDelete = async () => {
    if (!deleteId) return;
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/deals/${deleteId}`, { method: "DELETE" });
      if (!res.ok) throw new Error((await res.json()).error);
      toast.success(t("toast.dealArchived"));
      setDeleteId(null);
      fetchDeals();
    } catch (e: any) { toast.error(e.message); }
    finally { setIsDeleting(false); }
  };

  const totalValue = deals.reduce((sum, d) => sum + Number(d.value), 0);

  const columns: ColumnDef<Deal, any>[] = useMemo(() => [
    {
      accessorKey: "title",
      header: t("deals.colDeal"),
      cell: ({ row }) => {
        const d = row.original;
        return (
          <div>
            <Link href={`/deals/${d.id}`} className="font-medium text-primary hover:underline">{d.title}</Link>
            {d.customer && <div className="text-xs text-muted-foreground">{d.customer.firstName} {d.customer.lastName}</div>}
          </div>
        );
      },
    },
    {
      accessorKey: "value",
      header: t("common.value"),
      cell: ({ row }) => <span className="font-semibold text-sm">{formatCurrency(row.original.value, row.original.currency)}</span>,
    },
    {
      accessorKey: "stage",
      header: t("deals.stage"),
      cell: ({ getValue }) => {
        const stage = getValue() as string;
        return (
          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${OPP_STAGE_COLORS[stage] ?? "bg-gray-100 text-gray-600"}`}>
            {stageLabels[stage] ?? stage}
          </span>
        );
      },
    },
    {
      accessorKey: "probability",
      header: t("deals.probability"),
      cell: ({ getValue }) => {
        const p = getValue() as number;
        return (
          <div className="flex items-center gap-2">
            <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
              <div className="h-full rounded-full bg-primary" style={{ width: `${p}%` }} />
            </div>
            <span className="text-xs font-medium">{p}%</span>
          </div>
        );
      },
    },
    {
      id: "contact",
      header: t("common.company"),
      enableSorting: false,
      cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.company?.name ?? "—"}</span>,
    },
    {
      accessorKey: "closeDate",
      header: t("deals.closeDate"),
      cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{getValue() ? formatDate(getValue() as string) : "—"}</span>,
    },
    {
      id: "assignedTo",
      header: t("common.assignedTo"),
      enableSorting: false,
      cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.assignedTo?.name ?? "—"}</span>,
    },
    {
      id: "actions",
      header: "",
      enableSorting: false,
      size: 48,
      cell: ({ row }) => {
        const d = row.original;
        const isOpen = openMenuId === d.id;
        return (
          <div className="relative flex justify-end">
            <button onClick={(e) => { e.stopPropagation(); setOpenMenuId(isOpen ? null : d.id); }} className="p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-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-[140px] animate-fade-in">
                  <Link href={`/deals/${d.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("common.view")}</Link>
                  {canEdit && <Link href={`/deals/${d.id}/edit`} onClick={() => setOpenMenuId(null)} className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"><Pencil className="w-4 h-4" /> {t("common.edit")}</Link>}
                  {canDelete && <button onClick={() => { setOpenMenuId(null); setDeleteId(d.id); }} className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent w-full"><Trash2 className="w-4 h-4" /> {t("deals.archive")}</button>}
                </div>
              </>
            )}
          </div>
        );
      },
    },
  ], [t, stageLabels, canEdit, canDelete, openMenuId]);

  return (
    <AppShell breadcrumbs={[{ label: t("nav.deals") }]}>
      <PageHeader title={`${t("deals.title")}${!isLoading ? ` (${meta.total})` : ""}`} description={t("deals.pageDescription")}>
        {canCreate && <Button onClick={() => router.push("/deals/new")}><Plus className="w-4 h-4" /> {t("deals.new")}</Button>}
      </PageHeader>

      {/* Pipeline summary */}
      {!isLoading && deals.length > 0 && (
        <div className="bg-card border border-border rounded-xl p-4 mb-4 flex items-center gap-6">
          <div>
            <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">{t("deals.showing")}</p>
            <p className="text-lg font-bold">{formatCurrency(totalValue)}</p>
          </div>
          <div className="flex-1 flex gap-2 overflow-x-auto">
            {Object.entries(stageLabels).map(([stage, label]) => {
              const count = deals.filter(d => d.stage === stage).length;
              if (!count) return null;
              return (
                <div key={stage} className={`px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap ${OPP_STAGE_COLORS[stage] ?? "bg-gray-100 text-gray-600"}`}>
                  {label}: {count}
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="flex gap-3 mb-4">
        <div className="w-48">
          <Select options={STAGE_OPTIONS} value={stageFilter} onChange={(e) => setStageFilter(e.target.value)} />
        </div>
        {stageFilter && <Button variant="ghost" size="sm" onClick={() => setStageFilter("")}>{t("common.clear")}</Button>}
      </div>

      <DataTable
        data={deals} columns={columns} isLoading={isLoading} error={error}
        getRowClassName={(r) => (openMenuId === r.id ? "relative z-50" : undefined)}
        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("deals.searchPlaceholder")}
        sortBy={sortBy} sortOrder={sortOrder} onSortChange={(by, order) => { setSortBy(by); setSortOrder(order); }}
        getRowId={(r) => r.id}
        emptyTitle={t("deals.emptyTitle")} emptyDescription={t("deals.emptyDesc")}
        emptyAction={canCreate ? <Button onClick={() => router.push("/deals/new")} size="sm"><Plus className="w-4 h-4" /> {t("deals.new")}</Button> : undefined}
      />
      <ConfirmDialog open={!!deleteId} onClose={() => setDeleteId(null)} onConfirm={handleDelete}
        isLoading={isDeleting} title={t("deals.archiveTitle")} description={t("deals.archiveDesc")}
        confirmLabel={t("deals.archive")} variant="destructive" />
    </AppShell>
  );
}