"use client";

import { Suspense, useCallback, useEffect, useRef, 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 { Button } from "@/components/ui/button";
import {
  DataTable,
  DataTableCell,
  DataTableEmpty,
  DataTableHead,
  DataTableLoading,
  DataTableRow,
} from "@/components/ui/data-table";
import { Input } from "@/components/ui/input";
import { FilterSelect } from "@/components/ui/filter-select";
import { ListPagination } from "@/components/ui/list-pagination";
import { useFilterParams } from "@/hooks/use-filter-params";
import { PriorityBadge } from "@/lib/status-badges";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

export interface CompanyRow {
  _id: string;
  nameAr: string;
  nameEn?: string;
  entityType: string;
  sector?: string;
  city?: string;
  priority: string;
  leadScore: number;
  dataConfidence: string;
  createdAt: string;
}

interface PaginationMeta {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
}

const DEFAULT_FILTERS = {
  q: "",
  entityType: "",
  sector: "",
  city: "",
  priority: "",
  dataConfidence: "",
  hasEmail: "",
  hasMobile: "",
};

function CompaniesBrowserInner({
  initialData,
  initialFacets,
  initialPagination,
}: {
  initialData: CompanyRow[];
  initialFacets: Record<string, string[]>;
  initialPagination: PaginationMeta;
}) {
  const { locale, t } = useLocale();
  const {
    values,
    queryString,
    setFilters,
    clearFilters,
    page,
    setPage,
    activeChips,
  } = useFilterParams(DEFAULT_FILTERS);

  const [data, setData] = useState<CompanyRow[]>(initialData);
  const [facets, setFacets] = useState(initialFacets);
  const [totalPages, setTotalPages] = useState(initialPagination.totalPages);
  const [loading, setLoading] = useState(false);
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const lastFetchedQuery = useRef<string | null>(null);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch(`/api/market/companies?${queryString}&limit=25`);
      const json = await res.json();
      setData(json.data ?? []);
      setFacets((prev) => json.facets ?? prev);
      setTotalPages(json.pagination?.totalPages ?? 1);
    } finally {
      setLoading(false);
    }
  }, [queryString]);

  useEffect(() => {
    if (lastFetchedQuery.current === queryString) return;

    const hasFilters = Object.entries(values).some(
      ([k, v]) => Boolean(v) && k !== "page"
    );

    if (lastFetchedQuery.current === null && !hasFilters && page === 1) {
      lastFetchedQuery.current = queryString;
      return;
    }

    lastFetchedQuery.current = queryString;
    const timer = setTimeout(() => void fetchData(), 0);
    return () => clearTimeout(timer);
  }, [fetchData, queryString, values, page]);

  return (
    <PageLayout
      title={t.companies}
      description={
        locale === "ar"
          ? "استكشف قاعدة الشركات، صنّفها، وأضفها للشرائح"
          : "Explore, filter, and segment your company database"
      }
      actions={
        <Button asChild size="sm">
          <Link href="/imports">{locale === "ar" ? "استيراد" : "Import"}</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 } as Partial<typeof DEFAULT_FILTERS>)}
          className="sm:col-span-2 lg:col-span-4"
        />
        <FilterSelect
          value={values.entityType}
          onChange={(v) => setFilters({ entityType: v })}
          options={facets.entityTypes ?? []}
          allLabel={locale === "ar" ? "كل الأنواع" : "All types"}
        />
        <FilterSelect
          value={values.sector}
          onChange={(v) => setFilters({ sector: v })}
          options={facets.sectors ?? []}
          allLabel={locale === "ar" ? "كل القطاعات" : "All sectors"}
        />
        <FilterSelect
          value={values.city}
          onChange={(v) => setFilters({ city: v })}
          options={facets.cities ?? []}
          allLabel={locale === "ar" ? "كل المدن" : "All cities"}
        />
        <FilterSelect
          value={values.priority}
          onChange={(v) => setFilters({ priority: v })}
          options={facets.priorities ?? []}
          allLabel={locale === "ar" ? "كل الأولويات" : "All priorities"}
        />
        <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="companies"
        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="company"
        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/companies/${row._id}`}
              className="surface-elevated block p-4 active:scale-[0.99]"
            >
              <p className="font-semibold">{row.nameAr}</p>
              <p className="mt-1 text-sm text-muted-foreground">
                {row.sector ?? "—"} · {row.city ?? "—"}
              </p>
              <div className="mt-3 flex items-center justify-between">
                <PriorityBadge value={row.priority} />
                <span className="font-bold text-primary">{row.leadScore}</span>
              </div>
            </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" ? "القطاع" : "Sector"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "المدينة" : "City"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "الأولوية" : "Priority"}</DataTableCell>
            <DataTableCell>{locale === "ar" ? "النقاط" : "Score"}</DataTableCell>
          </DataTableRow>
        </DataTableHead>
        <tbody>
          {loading && data.length === 0 ? (
            <DataTableLoading colSpan={6} />
          ) : data.length === 0 ? (
            <DataTableEmpty colSpan={6} />
          ) : (
            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/companies/${row._id}`} className="font-medium text-primary hover:underline">
                    {row.nameAr}
                  </Link>
                </DataTableCell>
                <DataTableCell>{row.sector ?? "—"}</DataTableCell>
                <DataTableCell>{row.city ?? "—"}</DataTableCell>
                <DataTableCell>
                  <PriorityBadge value={row.priority} />
                </DataTableCell>
                <DataTableCell>{row.leadScore}</DataTableCell>
              </DataTableRow>
            ))
          )}
        </tbody>
      </DataTable>

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

export function CompaniesBrowser(props: {
  initialData: CompanyRow[];
  initialFacets: Record<string, string[]>;
  initialPagination: PaginationMeta;
}) {
  return (
    <Suspense fallback={<div className="p-8 text-muted-foreground">{props.initialData.length ? "..." : "..."}</div>}>
      <CompaniesBrowserInner {...props} />
    </Suspense>
  );
}