"use client";
// src/app/users/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, Badge, ConfirmDialog } from "@/components/ui/index";
import { formatDate, getInitials, getLabel, ROLE_LABELS, ROLE_LABELS_AR } from "@/lib/utils";
import { toast } from "sonner";
import { Plus, Pencil, MoreHorizontal, UserX, UserCheck } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";
import { useLanguage } from "@/i18n/LanguageContext";

const ROLE_BADGE_STYLES: Record<string, string> = {
  SUPER_ADMIN: "bg-red-100 text-red-700",
  ADMIN: "bg-orange-100 text-orange-700",
  MANAGER: "bg-purple-100 text-purple-700",
  SALES_REP: "bg-blue-100 text-blue-700",
  SUPPORT_SUPERVISOR: "bg-teal-100 text-teal-700",
  SUPPORT_AGENT: "bg-cyan-100 text-cyan-800",
  MARKETING_MANAGER: "bg-pink-100 text-pink-800",
  VIEWER: "bg-gray-100 text-gray-600",
};

export default function UsersPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [users, setUsers] = 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 [toggleId, setToggleId] = useState<string | null>(null);
  const [toggleActive, setToggleActive] = useState(false);
  const [isToggling, setIsToggling] = useState(false);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

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

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

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

  const handleToggleActive = async () => {
    if (!toggleId) return;
    setIsToggling(true);
    try {
      const res = await fetch(`/api/users/${toggleId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ isActive: !toggleActive }) });
      if (!res.ok) throw new Error((await res.json()).error);
      toast.success(!toggleActive ? t("toast.userActivated") : t("toast.userDeactivated"));
      setToggleId(null);
      fetchUsers();
    } catch (e: any) { toast.error(e.message); }
    finally { setIsToggling(false); }
  };

  const columns: ColumnDef<any, any>[] = useMemo(() => [
    {
      id: "user",
      header: t("table.colUser"),
      accessorFn: (r) => r.name,
      cell: ({ row }) => {
        const u = row.original;
        return (
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs font-bold flex-shrink-0">
              {getInitials(u.name)}
            </div>
            <div>
              <p className="font-medium text-sm text-foreground">{u.name}</p>
              <p className="text-xs text-muted-foreground">{u.email}</p>
            </div>
          </div>
        );
      },
    },
    {
      accessorKey: "role",
      header: t("users.role"),
      cell: ({ getValue }) => {
        const role = getValue() as string;
        return (
          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${ROLE_BADGE_STYLES[role] ?? "bg-gray-100"}`}>
            {getLabel(ROLE_LABELS, ROLE_LABELS_AR, role, language) || role}
          </span>
        );
      },
    },
    {
      accessorKey: "isActive",
      header: t("common.status"),
      cell: ({ getValue }) => <Badge variant={getValue() ? "success" : "secondary"}>{getValue() ? t("common.active") : t("common.inactive")}</Badge>,
    },
    {
      id: "activity",
      header: t("table.colLeadsDealsHeader"),
      enableSorting: false,
      cell: ({ row }) => {
        const c = row.original._count;
        return <span className="text-xs text-muted-foreground">{c?.assignedLeads ?? 0} {t("nav.leads")} · {c?.assignedOpps ?? 0} {t("table.colDeals")}</span>;
      },
    },
    { accessorKey: "createdAt", header: t("table.colJoined"), cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{formatDate(getValue() as string)}</span> },
    {
      id: "actions", header: "", enableSorting: false, size: 48,
      cell: ({ row }) => {
        const u = row.original;
        const isOpen = openMenuId === u.id;
        const isSelf = user?.id === u.id;
        return (
          <div className="relative flex justify-end">
            <button onClick={(e) => { e.stopPropagation(); setOpenMenuId(isOpen ? null : u.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]">
                  {canEdit && <Link href={`/users/${u.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>}
                  {canEdit && !isSelf && (
                    <button onClick={() => { setOpenMenuId(null); setToggleId(u.id); setToggleActive(u.isActive); }}
                      className={`flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent w-full ${u.isActive ? "text-destructive" : "text-green-600"}`}>
                      {u.isActive ? <><UserX className="w-4 h-4" /> {t("users.deactivate")}</> : <><UserCheck className="w-4 h-4" /> {t("users.activate")}</>}
                    </button>
                  )}
                </div>
              </>
            )}
          </div>
        );
      },
    },
  ], [t, language, user, canEdit, openMenuId]);

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