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

export default function CompaniesPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t } = useLanguage();
  const [companies, setCompanies] = 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 [sortBy, setSortBy] = useState("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
  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, "companies:create");
  const canEdit = user && hasPermission(user.role, "companies:update");
  const canDelete = user && hasPermission(user.role, "companies:delete");

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

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

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

  const columns: ColumnDef<any, any>[] = useMemo(() => [
    {
      accessorKey: "name",
      header: t("table.colCompany"),
      cell: ({ row }) => {
        const c = row.original;
        return (
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
              <Building2 className="w-4 h-4 text-muted-foreground" />
            </div>
            <div>
              <Link href={`/companies/${c.id}`} className="font-medium text-primary hover:underline text-sm">{c.name}</Link>
              {c.domain && <p className="text-xs text-muted-foreground">{c.domain}</p>}
            </div>
          </div>
        );
      },
    },
    {
      accessorKey: "industry",
      header: t("common.industry"),
      cell: ({ getValue }) => <span className="text-sm text-muted-foreground">{(getValue() as string) ?? "—"}</span>,
    },
    {
      accessorKey: "size",
      header: t("table.colSize"),
      cell: ({ getValue }) => <span className="text-sm text-muted-foreground">{(getValue() as string) ?? "—"}</span>,
    },
    {
      id: "location",
      header: t("table.colLocation"),
      enableSorting: false,
      cell: ({ row }) => {
        const c = row.original;
        return <span className="text-sm text-muted-foreground">{[c.city, c.country].filter(Boolean).join(", ") || "—"}</span>;
      },
    },
    {
      id: "counts",
      header: t("table.colContactsDeals"),
      enableSorting: false,
      cell: ({ row }) => {
        const c = row.original._count;
        return <span className="text-xs text-muted-foreground">{c?.customers ?? 0} {t("table.contactsLabel")} · {c?.deals ?? 0} {t("table.colDeals")}</span>;
      },
    },
    {
      id: "website",
      header: t("common.website"),
      enableSorting: false,
      cell: ({ row }) => row.original.website ? (
        <a href={row.original.website} target="_blank" rel="noopener noreferrer"
          className="flex items-center gap-1 text-xs text-primary hover:underline">
          <Globe className="w-3 h-3" /> {t("companies.visit")}
        </a>
      ) : <span className="text-muted-foreground text-sm">—</span>,
    },
    {
      accessorKey: "createdAt",
      header: t("table.colAdded"),
      cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{formatDate(getValue() as string)}</span>,
    },
    {
      id: "actions", header: "", enableSorting: false, size: 48,
      cell: ({ row }) => {
        const c = row.original;
        const isOpen = openMenuId === c.id;
        return (
          <div className="relative flex justify-end">
            <button onClick={(e) => { e.stopPropagation(); setOpenMenuId(isOpen ? null : c.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={`/companies/${c.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={`/companies/${c.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(c.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("table.deactivate")}
                    </button>
                  )}
                </div>
              </>
            )}
          </div>
        );
      },
    },
  ], [t, canEdit, canDelete, openMenuId]);

  return (
    <AppShell breadcrumbs={[{ label: t("nav.companies") }]}>
      <PageHeader
        title={`${t("companies.title")}${!isLoading ? ` (${meta.total})` : ""}`}
        description={t("companies.listSubtitle")}
      >
        {canCreate && (
          <Button onClick={() => router.push("/companies/new")}>
            <Plus className="w-4 h-4" /> {t("companies.new")}
          </Button>
        )}
      </PageHeader>
      <DataTable
        data={companies} 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("companies.searchPlaceholder")}
        sortBy={sortBy} sortOrder={sortOrder} onSortChange={(by, order) => { setSortBy(by); setSortOrder(order); }}
        getRowId={(r) => r.id}
        emptyTitle={t("companies.emptyListTitle")}
        emptyDescription={t("companies.emptyListDescription")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/companies/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("companies.emptyListAction")}
            </Button>
          ) : undefined
        }
      />
      <ConfirmDialog
        open={!!deleteId}
        onClose={() => setDeleteId(null)}
        onConfirm={handleDelete}
        isLoading={isDeleting}
        title={t("companies.dialogDeactivateTitle")}
        description={t("companies.dialogDeactivateDesc")}
        confirmLabel={t("table.deactivate")}
        variant="destructive"
      />
    </AppShell>
  );
}