"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import { FilterToolbar } from "@/components/design-system/filter-toolbar";
import { PageLayout } from "@/components/design-system/page-layout";
import { FilterSelect } from "@/components/ui/filter-select";
import { ListPagination } from "@/components/ui/list-pagination";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { BulkAiScoreToolbar } from "@/components/ai/bulk-ai-score-toolbar";
import {
  DataTable,
  DataTableCell,
  DataTableEmpty,
  DataTableHead,
  DataTableLoading,
  DataTableRow,
} from "@/components/ui/data-table";
import { useInstantList } from "@/hooks/use-instant-list";
import { PriorityBadge, TemperatureBadge } from "@/lib/status-badges";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

interface LeadRow {
  _id: string;
  companyId?: { nameAr?: string };
  personId?: { fullName?: string };
  serviceInterest?: string;
  status: string;
  temperature: string;
  priority: string;
  source: string;
  assignedTo?: { name?: string };
  createdAt: string;
}

const DEFAULT_FILTERS = {
  q: "",
  status: "",
  temperature: "",
  priority: "",
};

function LeadsListInner({
  initialData,
  initialPagination,
}: {
  initialData: LeadRow[];
  initialPagination?: { totalPages?: number };
}) {
  const { locale, t } = useLocale();
  const {
    data,
    loading,
    totalPages,
    page,
    setPage,
    values,
    setFilters,
    clearFilters,
    activeChips,
  } = useInstantList<LeadRow>({
    apiPath: "/api/leads",
    defaultFilters: DEFAULT_FILTERS,
    initialData,
    initialPagination,
  });
  const [selected, setSelected] = useState<Set<string>>(new Set());

  return (
    <PageLayout
      title={locale === "ar" ? "العملاء المحتملون" : "Leads"}
      description={
        locale === "ar"
          ? "تتبع العملاء المحتملين من المصدر حتى التحويل"
          : "Track leads from source through conversion"
      }
      actions={
        <Button asChild size="sm">
          <Link href="/leads/new">{locale === "ar" ? "إنشاء Lead" : "New lead"}</Link>
        </Button>
      }
    >
      <FilterToolbar
        chips={activeChips.map((c) => ({ key: c.key, value: c.value }))}
        onClear={clearFilters}
      >
        <Input
          placeholder={t.search}
          value={values.q}
          onChange={(e) => setFilters({ q: e.target.value })}
          className="sm:col-span-2 lg:col-span-4"
        />
        <FilterSelect
          value={values.status}
          onChange={(v) => setFilters({ status: v })}
          options={["new", "contacted", "qualified", "unqualified", "converted", "lost"]}
          allLabel={locale === "ar" ? "كل الحالات" : "All statuses"}
        />
        <FilterSelect
          value={values.temperature}
          onChange={(v) => setFilters({ temperature: v })}
          options={["hot", "warm", "cold"]}
          allLabel={locale === "ar" ? "كل الدرجات" : "All temperatures"}
        />
        <FilterSelect
          value={values.priority}
          onChange={(v) => setFilters({ priority: v })}
          options={["very_high", "high", "medium", "low"]}
          allLabel={locale === "ar" ? "كل الأولويات" : "All priorities"}
        />
      </FilterToolbar>

      <div className="flex flex-wrap items-center gap-3 text-sm">
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            checked={data.length > 0 && data.every((r) => selected.has(r._id))}
            onChange={(e) => {
              if (e.target.checked) setSelected(new Set(data.map((r) => r._id)));
              else setSelected(new Set());
            }}
          />
          {locale === "ar" ? "تحديد الصفحة" : "Select page"}
        </label>
        {selected.size > 0 ? (
          <button type="button" className="text-muted-foreground underline" onClick={() => setSelected(new Set())}>
            {locale === "ar" ? "مسح" : "Clear"}
          </button>
        ) : null}
      </div>
      <BulkAiScoreToolbar entityType="lead" selectedIds={[...selected]} onComplete={() => setSelected(new Set())} />

      <div className="space-y-3 md:hidden">
        {loading && data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.loading}</p>
        ) : data.length === 0 ? (
          <p className="py-8 text-center text-sm text-muted-foreground">{t.noResults}</p>
        ) : (
          data.map((row) => (
            <Link
              key={row._id}
              href={`/leads/${row._id}`}
              className="surface-elevated block p-4 active:scale-[0.99]"
            >
              <p className="font-semibold">{row.companyId?.nameAr ?? row.personId?.fullName ?? "—"}</p>
              <p className="mt-1 text-sm text-muted-foreground">{row.serviceInterest ?? row.status}</p>
              <div className="mt-3 flex flex-wrap gap-2">
                <TemperatureBadge value={row.temperature} />
                <PriorityBadge value={row.priority} />
              </div>
            </Link>
          ))
        )}
      </div>

      <DataTable className={cn("hidden md:block", loading && data.length > 0 && "opacity-70")}>
        <DataTableHead>
          <DataTableRow>
            <DataTableCell className="w-8" />
            <DataTableCell>{locale === "ar" ? "الشركة" : "Company"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الشخص" : "Person"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الخدمة" : "Service"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الحالة" : "Status"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الحرارة" : "Temp"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الأولوية" : "Priority"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "إجراء" : "Action"}</DataTableCell>
          </DataTableRow>
        </DataTableHead>
        <tbody>
          {loading && data.length === 0 ? (
            <DataTableLoading colSpan={8} />
          ) : data.length === 0 ? (
            <DataTableEmpty colSpan={8} />
          ) : (
            data.map((row) => (
              <DataTableRow key={row._id}>
                <DataTableCell>
                  <input
                    type="checkbox"
                    checked={selected.has(row._id)}
                    onChange={(e) => {
                      setSelected((prev) => {
                        const next = new Set(prev);
                        if (e.target.checked) next.add(row._id);
                        else next.delete(row._id);
                        return next;
                      });
                    }}
                  />
                </DataTableCell>
                <DataTableCell>{row.companyId?.nameAr ?? "—"}</DataTableCell>
                <DataTableCell>{row.personId?.fullName ?? "—"}</DataTableCell>
                <DataTableCell>{row.serviceInterest ?? "—"}</DataTableCell>
                <DataTableCell>{row.status}</DataTableCell>
                <DataTableCell>
                  <TemperatureBadge value={row.temperature} />
                </DataTableCell>
                <DataTableCell>
                  <PriorityBadge value={row.priority} />
                </DataTableCell>
                <DataTableCell>
                  <Link href={`/leads/${row._id}`} className="text-primary hover:underline">
                    {locale === "ar" ? "عرض" : "View"}
                  </Link>
                </DataTableCell>
              </DataTableRow>
            ))
          )}
        </tbody>
      </DataTable>

      <ListPagination
        page={page}
        totalPages={totalPages}
        loading={loading}
        onPageChange={setPage}
      />
    </PageLayout>
  );
}

export function LeadsList(props: {
  initialData: LeadRow[];
  initialPagination?: { totalPages?: number };
}) {
  return (
    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>
      <LeadsListInner {...props} />
    </Suspense>
  );
}