"use client";
// src/app/leads/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,
  LeadStatusBadge,
  ConfirmDialog,
  Select,
} from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import {
  formatDate,
  formatCurrency,
  getLabel,
  LEAD_SOURCE_LABELS,
  LEAD_SOURCE_LABELS_AR,
} from "@/lib/utils";
import { toast } from "sonner";
import {
  Plus,
  Eye,
  Pencil,
  Trash2,
  MoreHorizontal,
  TrendingUp,
  Phone,
  Mail,
} from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";

interface Lead {
  id: string;
  firstName: string;
  lastName: string;
  email: string | null;
  phone: string | null;
  company: string | null;
  jobTitle: string | null;
  status: string;
  source: string;
  score: number;
  budget: number | null;
  currency: string;
  city: string | null;
  country: string | null;
  createdAt: string;
  assignedTo: { id: string; name: string; email: string } | null;
  _count: { activities: number; tasks: number };
}

interface LeadsResponse {
  data: {
    items: Lead[];
    meta: { total: number; page: number; pageSize: number; pageCount: number };
  };
}

export default function LeadsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();

  const STATUS_OPTIONS = useMemo(
    () => [
      { value: "", label: t("leads.allStatuses") },
      { value: "NEW", label: t("leads.statusNEW") },
      { value: "CONTACTED", label: t("leads.statusCONTACTED") },
      { value: "QUALIFIED", label: t("leads.statusQUALIFIED") },
      { value: "UNQUALIFIED", label: t("leads.statusUNQUALIFIED") },
      { value: "CONVERTED", label: t("leads.statusCONVERTED") },
      { value: "LOST", label: t("leads.statusLOST") },
    ],
    [t]
  );

  const SOURCE_OPTIONS = useMemo(
    () => [
      { value: "", label: t("leads.allSources") },
      ...Object.keys(LEAD_SOURCE_LABELS).map((value) => ({
        value,
        label: getLabel(LEAD_SOURCE_LABELS, LEAD_SOURCE_LABELS_AR, value, language),
      })),
    ],
    [t, language]
  );

  const [leads, setLeads] = useState<Lead[]>([]);
  const [meta, setMeta] = useState({ total: 0, page: 1, pageSize: 10, pageCount: 1 });
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Query state
  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 [statusFilter, setStatusFilter] = useState("");
  const [sourceFilter, setSourceFilter] = useState("");

  // Delete state
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  // Action menu
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

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

  const fetchLeads = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams({
        page: String(page),
        pageSize: String(pageSize),
        sortBy,
        sortOrder,
        ...(search && { search }),
        ...(statusFilter && { status: statusFilter }),
        ...(sourceFilter && { source: sourceFilter }),
      });
      const res = await fetch(`/api/leads?${params}`);
      if (!res.ok) throw new Error("Failed to fetch leads");
      const data: LeadsResponse = await res.json();
      setLeads(data.data.items);
      setMeta(data.data.meta);
    } catch (err) {
      setError("Failed to load leads. Please try again.");
    } finally {
      setIsLoading(false);
    }
  }, [page, pageSize, sortBy, sortOrder, search, statusFilter, sourceFilter]);

  useEffect(() => { fetchLeads(); }, [fetchLeads]);

  // Reset page on filter change
  useEffect(() => { setPage(1); }, [search, statusFilter, sourceFilter]);

  const handleDelete = async () => {
    if (!deleteId) return;
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/leads/${deleteId}`, { method: "DELETE" });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error ?? "Delete failed");
      }
      toast.success("Lead deleted successfully");
      setDeleteId(null);
      fetchLeads();
    } catch (err: any) {
      toast.error(err.message ?? "Failed to delete lead");
    } finally {
      setIsDeleting(false);
    }
  };

  const handleBulkDelete = async (ids: string[]) => {
    try {
      await Promise.all(ids.map((id) => fetch(`/api/leads/${id}`, { method: "DELETE" })));
      toast.success(`${ids.length} leads deleted`);
      fetchLeads();
    } catch {
      toast.error("Some leads could not be deleted");
    }
  };

  const columns: ColumnDef<Lead, any>[] = useMemo(() => [
    {
      id: "name",
      header: t("table.colName"),
      accessorFn: (row) => `${row.firstName} ${row.lastName}`,
      cell: ({ row }) => {
        const lead = row.original;
        return (
          <div>
            <Link
              href={`/leads/${lead.id}`}
              className="font-medium text-primary hover:underline"
            >
              {lead.firstName} {lead.lastName}
            </Link>
            {lead.jobTitle && (
              <div className="text-xs text-muted-foreground">{lead.jobTitle}</div>
            )}
          </div>
        );
      },
    },
    {
      id: "contact",
      header: t("table.colContact"),
      enableSorting: false,
      cell: ({ row }) => {
        const lead = row.original;
        return (
          <div className="space-y-0.5">
            {lead.email && (
              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <Mail className="w-3 h-3" />
                <span className="truncate max-w-[160px]">{lead.email}</span>
              </div>
            )}
            {lead.phone && (
              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <Phone className="w-3 h-3" />
                {lead.phone}
              </div>
            )}
          </div>
        );
      },
    },
    {
      accessorKey: "company",
      header: t("table.colCompany"),
      cell: ({ getValue }) => (
        <span className="text-sm">{(getValue() as string) ?? "—"}</span>
      ),
    },
    {
      accessorKey: "status",
      header: t("common.status"),
      cell: ({ getValue }) => <LeadStatusBadge status={getValue() as string} />,
    },
    {
      accessorKey: "source",
      header: t("common.source"),
      cell: ({ getValue }) => {
        const src = getValue() as string;
        return (
          <span className="text-xs text-muted-foreground">
            {getLabel(LEAD_SOURCE_LABELS, LEAD_SOURCE_LABELS_AR, src, language) || src}
          </span>
        );
      },
    },
    {
      accessorKey: "score",
      header: t("common.score"),
      cell: ({ getValue }) => {
        const score = getValue() as number;
        const color =
          score >= 70
            ? "text-green-600"
            : score >= 40
            ? "text-amber-600"
            : "text-red-500";
        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 ${
                  score >= 70 ? "bg-green-500" : score >= 40 ? "bg-amber-500" : "bg-red-500"
                }`}
                style={{ width: `${score}%` }}
              />
            </div>
            <span className={`text-xs font-medium ${color}`}>{score}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "budget",
      header: t("common.budget"),
      cell: ({ row }) => (
        <span className="text-sm">
          {row.original.budget
            ? formatCurrency(row.original.budget, row.original.currency)
            : "—"}
        </span>
      ),
    },
    {
      id: "assignedTo",
      header: t("common.assignedTo"),
      enableSorting: false,
      cell: ({ row }) => (
        <span className="text-sm text-muted-foreground">
          {row.original.assignedTo?.name ?? "—"}
        </span>
      ),
    },
    {
      accessorKey: "createdAt",
      header: t("table.colCreated"),
      cell: ({ getValue }) => (
        <span className="text-xs text-muted-foreground">
          {formatDate(getValue() as string)}
        </span>
      ),
    },
    {
      id: "actions",
      header: "",
      enableSorting: false,
      size: 48,
      cell: ({ row }) => {
        const lead = row.original;
        const isOpen = openMenuId === lead.id;
        return (
          <div className="relative flex justify-end">
            <button
              onClick={(e) => {
                e.stopPropagation();
                setOpenMenuId(isOpen ? null : lead.id);
              }}
              className="p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
            >
              <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={`/leads/${lead.id}`}
                    onClick={() => setOpenMenuId(null)}
                    className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors"
                  >
                    <Eye className="w-4 h-4" /> {t("common.view")}
                  </Link>
                  {canEdit && (
                    <Link
                      href={`/leads/${lead.id}/edit`}
                      onClick={() => setOpenMenuId(null)}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors"
                    >
                      <Pencil className="w-4 h-4" /> {t("common.edit")}
                    </Link>
                  )}
                  {canDelete && !lead._count && (
                    <button
                      onClick={() => { setOpenMenuId(null); setDeleteId(lead.id); }}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent w-full transition-colors"
                    >
                      <Trash2 className="w-4 h-4" /> {t("common.delete")}
                    </button>
                  )}
                  {canDelete && (
                    <button
                      onClick={() => { setOpenMenuId(null); setDeleteId(lead.id); }}
                      className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent w-full transition-colors"
                    >
                      <Trash2 className="w-4 h-4" /> {t("common.delete")}
                    </button>
                  )}
                </div>
              </>
            )}
          </div>
        );
      },
    },
  ], [t, language, canEdit, canDelete, openMenuId]);

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

      {/* Filters row */}
      <div className="flex flex-wrap gap-3 mb-4">
        <div className="w-full sm:w-44">
          <Select
            options={STATUS_OPTIONS}
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            placeholder={t("leads.allStatuses")}
          />
        </div>
        <div className="w-full sm:w-44">
          <Select
            options={SOURCE_OPTIONS}
            value={sourceFilter}
            onChange={(e) => setSourceFilter(e.target.value)}
            placeholder={t("leads.allSources")}
          />
        </div>
        {(statusFilter || sourceFilter || search) && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => { setStatusFilter(""); setSourceFilter(""); setSearch(""); }}
          >
            {t("leads.clearFilters")}
          </Button>
        )}
      </div>

      <DataTable
        data={leads}
        columns={columns}
        getRowClassName={(row) => (openMenuId === row.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("leads.searchPlaceholder")}
        sortBy={sortBy}
        sortOrder={sortOrder}
        onSortChange={(by, order) => { setSortBy(by); setSortOrder(order); }}
        onBulkDelete={canDelete ? handleBulkDelete : undefined}
        getRowId={(row) => row.id}
        emptyTitle={t("leads.emptyListTitle")}
        emptyDescription={t("leads.emptyListDescription")}
        emptyAction={
          canCreate ? (
            <Button onClick={() => router.push("/leads/new")} size="sm">
              <Plus className="w-4 h-4" /> {t("leads.createLead")}
            </Button>
          ) : undefined
        }
        toolbarExtra={
          <div className="flex items-center gap-1.5 text-xs text-muted-foreground bg-muted px-3 py-1.5 rounded-lg">
            <TrendingUp className="w-3.5 h-3.5" />
            {t("leads.totalCount", { count: meta.total })}
          </div>
        }
      />

      <ConfirmDialog
        open={!!deleteId}
        onClose={() => setDeleteId(null)}
        onConfirm={handleDelete}
        isLoading={isDeleting}
        title={t("leads.deleteDialogTitle")}
        description={t("leads.deleteConfirm")}
        confirmLabel={t("common.delete")}
        variant="destructive"
      />
    </AppShell>
  );
}