"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import { BulkSegmentToolbar } from "@/components/market/bulk-segment-toolbar";
import { FilterChips } from "@/components/ui/filter-bar";
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";

interface ContactRow {
  _id: string;
  contactType: string;
  contactValue: string;
  entityType?: string;
  dataConfidence?: string;
  isVerified?: boolean;
  linkedCompanyId?: string;
  linkedCompanyName?: string;
  linkedPersonId?: string;
  linkedPersonName?: string;
  campaignCount?: number;
  replyCount?: number;
}

const DEFAULT_FILTERS = {
  q: "",
  contactType: "",
  entityType: "",
  isVerified: "",
  dataConfidence: "",
};

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

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

  return (
    <div className="space-y-4">
      <h1 className="text-2xl font-bold tracking-tight">{t.contacts}</h1>

      <div className="grid gap-3 rounded-xl border border-border bg-card p-4 shadow-[var(--shadow)] md:grid-cols-3">
        <Input
          placeholder={t.search}
          value={values.q}
          onChange={(e) => setFilters({ q: e.target.value })}
          className="md:col-span-3"
        />
        <FilterSelect
          value={values.contactType}
          onChange={(v) => setFilters({ contactType: v })}
          options={["email", "mobile", "phone", "website", "linkedin"]}
          allLabel={locale === "ar" ? "كل الأنواع" : "All types"}
        />
        <FilterSelect
          value={values.entityType}
          onChange={(v) => setFilters({ entityType: v })}
          options={["company", "person"]}
          allLabel={locale === "ar" ? "كل الكيانات" : "All entities"}
          labels={{
            company: locale === "ar" ? "شركة" : "Company",
            person: locale === "ar" ? "شخص" : "Person",
          }}
        />
        <FilterSelect
          value={values.isVerified}
          onChange={(v) => setFilters({ isVerified: v })}
          options={["true", "false"]}
          allLabel={locale === "ar" ? "التحقق — الكل" : "Verified — all"}
          labels={{
            true: locale === "ar" ? "موثق" : "Verified",
            false: locale === "ar" ? "غير موثق" : "Not verified",
          }}
        />
        <FilterSelect
          value={values.dataConfidence}
          onChange={(v) => setFilters({ dataConfidence: v })}
          options={["high", "medium", "low"]}
          allLabel={locale === "ar" ? "كل مستويات الثقة" : "All confidence"}
        />
      </div>

      <FilterChips
        chips={activeChips.map((c) => ({ key: c.key, value: c.value }))}
        onRemove={(key) => setFilters({ [key]: "" } as Partial<typeof DEFAULT_FILTERS>)}
        onClear={clearFilters}
      />

      <BulkSegmentToolbar
        targetType="contact_points"
        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())}
      />

      <DataTable>
        <DataTableHead>
          <DataTableRow>
            <DataTableCell className="w-8" />
            <DataTableCell>{locale === "ar" ? "النوع" : "Type"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "القيمة" : "Value"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الشركة" : "Company"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الشخص" : "Person"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "موثق" : "Verified"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "حملات" : "Campaigns"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "ردود" : "Replies"}</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.contactType}</DataTableCell>
                <DataTableCell>{row.contactValue}</DataTableCell>
                <DataTableCell>
                  {row.linkedCompanyId ? (
                    <Link
                      href={`/market/companies/${row.linkedCompanyId}`}
                      className="text-primary hover:underline"
                    >
                      {row.linkedCompanyName ?? row.linkedCompanyId}
                    </Link>
                  ) : (
                    "—"
                  )}
                </DataTableCell>
                <DataTableCell>
                  {row.linkedPersonId ? (
                    <Link
                      href={`/market/people/${row.linkedPersonId}`}
                      className="text-primary hover:underline"
                    >
                      {row.linkedPersonName ?? row.linkedPersonId}
                    </Link>
                  ) : (
                    "—"
                  )}
                </DataTableCell>
                <DataTableCell>
                  {row.isVerified
                    ? locale === "ar"
                      ? "نعم"
                      : "Yes"
                    : locale === "ar"
                      ? "لا"
                      : "No"}
                </DataTableCell>
                <DataTableCell>{row.campaignCount ?? 0}</DataTableCell>
                <DataTableCell>{row.replyCount ?? 0}</DataTableCell>
              </DataTableRow>
            ))
          )}
        </tbody>
      </DataTable>

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

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