"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import { BulkSegmentToolbar } from "@/components/market/bulk-segment-toolbar";
import { BulkAiScoreToolbar } from "@/components/ai/bulk-ai-score-toolbar";
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 { Input } from "@/components/ui/input";
import {
  DataTable,
  DataTableCell,
  DataTableEmpty,
  DataTableHead,
  DataTableLoading,
  DataTableRow,
} from "@/components/ui/data-table";
import { useInstantList } from "@/hooks/use-instant-list";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

export interface PersonRow {
  _id: string;
  fullName: string;
  jobTitle?: string;
  isDecisionMaker?: boolean | string;
  email?: string;
  mobile?: string;
  companyId?: string | { _id: string; nameAr?: string; nameEn?: string };
  companyNameAr?: string;
}

const DEFAULT_FILTERS = {
  q: "",
  jobTitle: "",
  seniorityLevel: "",
  isDecisionMaker: "",
  hasEmail: "",
  hasMobile: "",
};

function PeopleBrowserInner({
  initialData,
  initialPagination,
}: {
  initialData: PersonRow[];
  initialPagination: { totalPages?: number };
}) {
  const { locale, t } = useLocale();
  const {
    data,
    loading,
    totalPages,
    page,
    setPage,
    values,
    setFilters,
    clearFilters,
    activeChips,
  } = useInstantList<PersonRow>({
    apiPath: "/api/market/people",
    defaultFilters: DEFAULT_FILTERS,
    initialData,
    initialPagination,
  });

  const [selected, setSelected] = useState<Set<string>>(new Set());

  return (
    <PageLayout
      title={t.people}
      description={
        locale === "ar"
          ? "استكشف الأشخاص وصنّفهم حسب الدور والاتصال"
          : "Explore people and filter by role and contact data"
      }
    >
      <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"
        />
        <Input
          placeholder={locale === "ar" ? "المسمى الوظيفي" : "Job title"}
          value={values.jobTitle}
          onChange={(e) => setFilters({ jobTitle: e.target.value })}
        />
        <Input
          placeholder={locale === "ar" ? "المستوى" : "Seniority"}
          value={values.seniorityLevel}
          onChange={(e) => setFilters({ seniorityLevel: e.target.value })}
        />
        <FilterSelect
          value={values.isDecisionMaker}
          onChange={(v) => setFilters({ isDecisionMaker: v })}
          options={["true", "false"]}
          allLabel={locale === "ar" ? "صانع قرار — الكل" : "Decision maker — all"}
          labels={{
            true: locale === "ar" ? "نعم" : "Yes",
            false: locale === "ar" ? "لا" : "No",
          }}
        />
        <FilterSelect
          value={values.hasEmail}
          onChange={(v) => setFilters({ hasEmail: v })}
          options={["true", "false"]}
          allLabel={locale === "ar" ? "بريد — الكل" : "Email — all"}
          labels={{
            true: locale === "ar" ? "لديه بريد" : "Has email",
            false: locale === "ar" ? "بدون" : "No",
          }}
        />
        <FilterSelect
          value={values.hasMobile}
          onChange={(v) => setFilters({ hasMobile: v })}
          options={["true", "false"]}
          allLabel={locale === "ar" ? "جوال — الكل" : "Mobile — all"}
          labels={{
            true: locale === "ar" ? "لديه جوال" : "Has mobile",
            false: locale === "ar" ? "بدون" : "No",
          }}
        />
      </FilterToolbar>

      <BulkSegmentToolbar
        targetType="people"
        selectedIds={[...selected]}
        allOnPageSelected={data.length > 0 && data.every((r) => selected.has(r._id))}
        onToggleAll={(checked) => {
          if (checked) setSelected(new Set(data.map((r) => r._id)));
          else setSelected(new Set());
        }}
        onClear={() => setSelected(new Set())}
      />
      <BulkAiScoreToolbar
        entityType="person"
        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={`/market/people/${row._id}`}
              className="surface-elevated block min-h-[44px] p-4 active:scale-[0.99]"
            >
              <p className="font-semibold">{row.fullName}</p>
              <p className="mt-1 text-sm text-muted-foreground">{row.jobTitle ?? "—"}</p>
              <p className="mt-1 truncate text-sm text-primary">{row.email ?? row.mobile ?? "—"}</p>
            </Link>
          ))
        )}
      </div>

      <DataTable className={cn("hidden md:block", loading && data.length > 0 && "opacity-70")}>
        <DataTableHead>
          <DataTableRow>
            <DataTableCell className="w-8" />
            <DataTableCell>{locale === "ar" ? "الاسم" : "Name"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الشركة" : "Company"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "المسمى" : "Title"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "صانع قرار" : "DM"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "البريد" : "Email"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الجوال" : "Mobile"}</DataTableCell>
          </DataTableRow>
        </DataTableHead>
        <tbody>
          {loading && data.length === 0 ? (
            <DataTableLoading colSpan={7} />
          ) : data.length === 0 ? (
            <DataTableEmpty colSpan={7} />
          ) : (
            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>
                  <Link
                    href={`/market/people/${row._id}`}
                    className="font-medium text-primary hover:underline"
                  >
                    {row.fullName}
                  </Link>
                </DataTableCell>
                <DataTableCell>
                  {typeof row.companyId === "object" && row.companyId?._id ? (
                    <Link
                      href={`/market/companies/${row.companyId._id}`}
                      className="text-primary hover:underline"
                    >
                      {row.companyId.nameAr ?? row.companyNameAr ?? "—"}
                    </Link>
                  ) : typeof row.companyId === "string" ? (
                    <Link
                      href={`/market/companies/${row.companyId}`}
                      className="text-primary hover:underline"
                    >
                      {row.companyNameAr ?? "—"}
                    </Link>
                  ) : (
                    row.companyNameAr ?? "—"
                  )}
                </DataTableCell>
                <DataTableCell>{row.jobTitle ?? "—"}</DataTableCell>
                <DataTableCell>
                  {row.isDecisionMaker === "yes" || row.isDecisionMaker === true
                    ? locale === "ar"
                      ? "نعم"
                      : "Yes"
                    : row.isDecisionMaker === "no" || row.isDecisionMaker === false
                      ? locale === "ar"
                        ? "لا"
                        : "No"
                      : "—"}
                </DataTableCell>
                <DataTableCell>{row.email ?? "—"}</DataTableCell>
                <DataTableCell>{row.mobile ?? "—"}</DataTableCell>
              </DataTableRow>
            ))
          )}
        </tbody>
      </DataTable>

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

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