"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import {
  Building2,
  CheckCircle2,
  Mail,
  Phone,
  UserCircle,
  XCircle,
} from "lucide-react";
import { FilterToolbar } from "@/components/design-system/filter-toolbar";
import { PageLayout } from "@/components/design-system/page-layout";
import { EmptyState } from "@/components/design-system/empty-state";
import { BulkSegmentToolbar } from "@/components/market/bulk-segment-toolbar";
import { FilterSelect } from "@/components/ui/filter-select";
import { Input } from "@/components/ui/input";
import { ListPagination } from "@/components/ui/list-pagination";
import { Badge } from "@/components/ui/badge";
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 ContactIntelligenceInner({
  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());

  const typeIcon = (type: string) => {
    if (type === "email") return <Mail className="h-4 w-4" />;
    if (type === "mobile" || type === "phone") return <Phone className="h-4 w-4" />;
    return <Mail className="h-4 w-4" />;
  };

  return (
    <PageLayout
      title={locale === "ar" ? "مركز ذكاء الاتصال" : "Communication Intelligence"}
      description={
        locale === "ar"
          ? "كل نقطة اتصال مرتبطة بمالكها — شركة أو شخص"
          : "Every contact point linked to its owner"
      }
    >
      <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="lg:col-span-2"
        />
        <FilterSelect
          value={values.contactType}
          onChange={(v) => setFilters({ contactType: v })}
          options={["email", "mobile", "phone", "website", "linkedin"]}
          allLabel={locale === "ar" ? "كل الأنواع" : "All types"}
        />
        <FilterSelect
          value={values.isVerified}
          onChange={(v) => setFilters({ isVerified: v })}
          options={["true", "false"]}
          allLabel={locale === "ar" ? "التحقق" : "Verified"}
          labels={{
            true: locale === "ar" ? "موثق" : "Yes",
            false: locale === "ar" ? "غير موثق" : "No",
          }}
        />
        <FilterSelect
          value={values.dataConfidence}
          onChange={(v) => setFilters({ dataConfidence: v })}
          options={["high", "medium", "low"]}
          allLabel={locale === "ar" ? "الثقة" : "Confidence"}
        />
      </FilterToolbar>

      <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())}
      />

      {loading && data.length === 0 ? (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="surface-elevated h-40 animate-shimmer rounded-xl" />
          ))}
        </div>
      ) : data.length === 0 ? (
        <EmptyState
          icon={<Mail className="h-6 w-6" />}
          title={t.noResults}
          description={
            locale === "ar" ? "جرّب تغيير الفلاتر أو استيراد بيانات" : "Try adjusting filters or import data"
          }
        />
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {data.map((row) => (
            <article
              key={row._id}
              className="surface-elevated group relative overflow-hidden p-5 transition-all hover:-translate-y-0.5 hover:shadow-lg"
            >
              <input
                type="checkbox"
                className="absolute top-4 end-4"
                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;
                  });
                }}
              />
              <div className="flex items-start gap-3">
                <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                  {typeIcon(row.contactType)}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate font-semibold" dir="ltr">
                    {row.contactValue}
                  </p>
                  <Badge variant="secondary" className="mt-1">
                    {row.contactType}
                  </Badge>
                </div>
              </div>

              <div className="mt-4 space-y-2 border-t border-border pt-4 text-sm">
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  {locale === "ar" ? "المالك" : "Owner"}
                </p>
                {row.linkedCompanyId ? (
                  <Link
                    href={`/market/companies/${row.linkedCompanyId}`}
                    className="flex items-center gap-2 text-primary hover:underline"
                  >
                    <Building2 className="h-4 w-4 shrink-0" />
                    <span className="truncate">{row.linkedCompanyName ?? "—"}</span>
                  </Link>
                ) : null}
                {row.linkedPersonId ? (
                  <Link
                    href={`/market/people/${row.linkedPersonId}`}
                    className="flex items-center gap-2 text-primary hover:underline"
                  >
                    <UserCircle className="h-4 w-4 shrink-0" />
                    <span className="truncate">{row.linkedPersonName ?? "—"}</span>
                  </Link>
                ) : null}
                {!row.linkedCompanyId && !row.linkedPersonId ? (
                  <span className="text-muted-foreground">—</span>
                ) : null}
              </div>

              <div className="mt-4 flex flex-wrap items-center gap-2">
                {row.isVerified ? (
                  <span className="inline-flex items-center gap-1 text-xs text-accent">
                    <CheckCircle2 className="h-3.5 w-3.5" />
                    {locale === "ar" ? "موثق" : "Verified"}
                  </span>
                ) : (
                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                    <XCircle className="h-3.5 w-3.5" />
                    {locale === "ar" ? "غير موثق" : "Unverified"}
                  </span>
                )}
                <span className="text-xs text-muted-foreground">
                  {row.campaignCount ?? 0} {locale === "ar" ? "حملة" : "campaigns"} ·{" "}
                  {row.replyCount ?? 0} {locale === "ar" ? "رد" : "replies"}
                </span>
              </div>
            </article>
          ))}
        </div>
      )}

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

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