"use client";
// src/app/tickets/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, PriorityBadge, Select, ConfirmDialog } from "@/components/ui/index";
import {
  cn,
  formatRelativeTime,
  getLabel,
  TICKET_STATUS_LABELS,
  TICKET_STATUS_LABELS_AR,
  TICKET_STATUS_COLORS,
} from "@/lib/utils";
import { toast } from "sonner";
import { Plus, Eye, MoreHorizontal, Trash2 } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { useLanguage } from "@/i18n/LanguageContext";

const STATUS_STYLES: Record<string, string> = { OPEN: "bg-red-100 text-red-700", IN_PROGRESS: "bg-blue-100 text-blue-700", WAITING_CUSTOMER: "bg-amber-100 text-amber-700", RESOLVED: "bg-green-100 text-green-700", CLOSED: "bg-gray-100 text-gray-600" };

export default function TicketsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "", label: t("tickets.allStatuses") },
      { value: "OPEN", label: t("tickets.stOpen") },
      { value: "IN_PROGRESS", label: t("tickets.stInProgress") },
      { value: "WAITING_CUSTOMER", label: t("tickets.stWaiting") },
      { value: "RESOLVED", label: t("tickets.stResolved") },
      { value: "CLOSED", label: t("tickets.stClosed") },
    ],
    [t]
  );
  const PRIORITY_OPTIONS = useMemo(
    () => [
      { value: "", label: t("tickets.allPriorities") },
      { value: "CRITICAL", label: t("tickets.priorityCritical") },
      { value: "HIGH", label: t("tickets.priorityHigh") },
      { value: "MEDIUM", label: t("tickets.priorityMedium") },
      { value: "LOW", label: t("tickets.priorityLow") },
    ],
    [t]
  );
  const [tickets, setTickets] = 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 [priorityFilter, setPriorityFilter] = 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, "tickets:create");
  const canDelete = user && hasPermission(user.role, "tickets:delete");

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

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

  const handleDelete = async () => {
    if (!deleteId) return;
    setIsDeleting(true);
    try {
      await fetch(`/api/tickets/${deleteId}`, { method: "DELETE" });
      toast.success(t("tickets.toastDeleted"));
      setDeleteId(null);
      fetchTickets();
    } catch {
      toast.error(t("toast.failed"));
    }
    finally { setIsDeleting(false); }
  };

  const columns: ColumnDef<any, any>[] = useMemo(() => [
    { accessorKey: "subject", header: t("table.colSubject"), cell: ({ row }) => { const tk = row.original; return <div><Link href={`/tickets/${tk.id}`} className="font-medium text-primary hover:underline text-sm">{tk.subject}</Link><p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{tk.description}</p></div>; } },
    { 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", TICKET_STATUS_COLORS[s] ?? "bg-gray-100 text-gray-600")}>{getLabel(TICKET_STATUS_LABELS, TICKET_STATUS_LABELS_AR, s, language)}</span>; } },
    { accessorKey: "priority", header: t("common.priority"), cell: ({ getValue }) => <PriorityBadge priority={getValue() as string} /> },
    { id: "customer", header: t("table.colCustomer"), enableSorting: false, cell: ({ row }) => row.original.customer ? <Link href={`/customers/${row.original.customer.id}`} className="text-xs text-primary hover:underline">{row.original.customer.firstName} {row.original.customer.lastName}</Link> : <span className="text-xs text-muted-foreground">—</span> },
    { id: "assignedTo", header: t("common.assignedTo"), enableSorting: false, cell: ({ row }) => <span className="text-sm text-muted-foreground">{row.original.assignedTo?.name ?? t("common.unassigned")}</span> },
    { id: "comments", header: t("table.colComments"), enableSorting: false, cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original._count?.comments ?? 0} {t("tickets.commentsSuffix")}</span> },
    { accessorKey: "createdAt", header: t("table.colCreated"), cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{formatRelativeTime(getValue() as string, language)}</span> },
    {
      id: "actions", header: "", enableSorting: false, size: 48,
      cell: ({ row }) => {
        const tk = row.original;
        const isOpen = openMenuId === tk.id;
        return (
          <div className="relative flex justify-end">
            <button onClick={(e) => { e.stopPropagation(); setOpenMenuId(isOpen ? null : tk.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-[140px]"><Link href={`/tickets/${tk.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>{canDelete && <button onClick={() => { setOpenMenuId(null); setDeleteId(tk.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("common.delete")}</button>}</div></>)}
          </div>
        );
      },
    },
  ], [t, language, canDelete, openMenuId]);

  return (
    <AppShell breadcrumbs={[{ label: t("nav.tickets") }]}>
      <PageHeader title={`${t("tickets.title")}${!isLoading ? ` (${meta.total})` : ""}`} description={t("tickets.listSubtitle")}>
        {canCreate && (
          <Button onClick={() => router.push("/tickets/new")}>
            <Plus className="w-4 h-4" /> {t("tickets.new")}
          </Button>
        )}
      </PageHeader>
      <div className="flex gap-3 mb-4 flex-wrap">
        <div className="w-44">
          <Select options={STATUS_OPTIONS} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} />
        </div>
        <div className="w-44">
          <Select options={PRIORITY_OPTIONS} value={priorityFilter} onChange={(e) => setPriorityFilter(e.target.value)} />
        </div>
        {(statusFilter || priorityFilter) && (
          <Button variant="ghost" size="sm" onClick={() => { setStatusFilter(""); setPriorityFilter(""); }}>
            {t("common.clear")}
          </Button>
        )}
      </div>
      <DataTable
        data={tickets}
        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("tickets.searchPlaceholder")}
        getRowId={(r) => r.id}
        emptyTitle={t("tickets.empty")}
        emptyDescription={t("tickets.emptyListDesc")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/tickets/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("tickets.new")}
            </Button>
          ) : undefined
        }
      />
      <ConfirmDialog
        open={!!deleteId}
        onClose={() => setDeleteId(null)}
        onConfirm={handleDelete}
        isLoading={isDeleting}
        title={t("tickets.deleteTitle")}
        description={t("tickets.deleteDesc")}
        confirmLabel={t("common.delete")}
        variant="destructive"
      />
    </AppShell>
  );
}