"use client";



import { Suspense, useCallback, useEffect, useRef, useState } from "react";

import Link from "next/link";

import { useRouter } from "next/navigation";

import { Loader2 } from "lucide-react";

import { FilterToolbar } from "@/components/design-system/filter-toolbar";

import { PageLayout } from "@/components/design-system/page-layout";

import { InboxPreviewPane } from "@/components/inbox/inbox-preview-pane";

import { FilterSelect } from "@/components/ui/filter-select";

import { ListPagination } from "@/components/ui/list-pagination";

import { Input } from "@/components/ui/input";

import { Button } from "@/components/ui/button";

import { useInstantList } from "@/hooks/use-instant-list";

import { useLocale } from "@/components/providers/locale-provider";

import { Badge } from "@/components/ui/badge";
import { emailListSnippet } from "@/lib/email-body/format-email-body";
import { cn } from "@/lib/utils";



type MailboxOption = {

  _id: string;

  name: string;

  email: string;

  isDefault: boolean;

};



type ImapSource = "env" | "mailbox";



interface InboxRow {

  _id: string;

  fromEmail: string;

  subject?: string;

  status: string;

  companyId?: { nameAr?: string };

  campaignId?: { name?: string };

  receivedAt: string;

  bodyText?: string;

  bodyHtml?: string;

  leadId?: string;

  classification?: { intent?: string; sentiment?: string; leadTemperature?: string } | null;

}



const DEFAULT_FILTERS = { q: "", status: "", fromEmail: "" };



function InboxListInner({

  initialData,

  initialPagination,

  autoSync = true,

}: {

  initialData: InboxRow[];

  initialPagination?: { totalPages?: number };

  autoSync?: boolean;

}) {

  const router = useRouter();

  const { locale, t } = useLocale();

  const {

    data,

    loading: listLoading,

    totalPages,

    page,

    setPage,

    values,

    setFilters,

    clearFilters,

    activeChips,

    refetch,

  } = useInstantList<InboxRow>({

    apiPath: "/api/inbox",

    defaultFilters: DEFAULT_FILTERS,

    initialData,

    initialPagination,

  });



  const [selectedId, setSelectedId] = useState<string | null>(null);

  const [imapSource, setImapSource] = useState<ImapSource>("mailbox");

  const [mailboxId, setMailboxId] = useState("");

  const [mailboxes, setMailboxes] = useState<MailboxOption[]>([]);

  const [mailboxesReady, setMailboxesReady] = useState(false);

  const [mailboxesError, setMailboxesError] = useState("");

  const [actionLoading, setActionLoading] = useState<

    "" | "sync" | "verify" | "bulkAi"

  >("");

  const [message, setMessage] = useState<string | null>(null);

  const [syncWarning, setSyncWarning] = useState<string | null>(null);

  const autoSyncRanRef = useRef(false);

  const syncInFlightRef = useRef(false);

  const [aiStatus, setAiStatus] = useState<{

    provider?: string;

    available?: boolean;

    model?: string;

  } | null>(null);



  const loadMailboxes = useCallback(async () => {
    setMailboxesError("");
    try {
      const res = await fetch("/api/email/mailboxes");
      const json = (await res.json()) as { data?: MailboxOption[]; error?: string };

      if (!res.ok) {
        setMailboxes([]);
        setMailboxesError(json.error ?? "Could not load mailboxes");
        return;
      }

      const list = json.data ?? [];
      setMailboxes(list);
      const defaultBox = list.find((m) => m.isDefault) ?? list[0];
      if (defaultBox) setMailboxId(defaultBox._id);
    } finally {
      setMailboxesReady(true);
    }
  }, []);



  useEffect(() => {

    if (imapSource !== "mailbox") return;

    const timeout = window.setTimeout(() => void loadMailboxes(), 0);

    return () => window.clearTimeout(timeout);

  }, [imapSource, loadMailboxes]);



  useEffect(() => {

    void (async () => {

      const res = await fetch("/api/ai/status");

      if (res.ok) {

        const json = await res.json();

        setAiStatus({

          provider: json.provider,

          available: json.available,

          model: json.model,

        });

      }

    })();

  }, []);



  const previewId =
    selectedId && data.some((r) => r._id === selectedId)
      ? selectedId
      : data[0]?._id ?? null;

  function imapQueryParams(): string {

    if (imapSource === "mailbox" && mailboxId) {

      return `source=mailbox&mailboxId=${encodeURIComponent(mailboxId)}`;

    }

    return "source=env";

  }



  const runInboxSync = useCallback(
    async (options?: { silent?: boolean }) => {
      if (syncInFlightRef.current) return false;

      if (imapSource === "mailbox" && !mailboxId) {
        const pickMsg =
          locale === "ar" ? "اختر صندوق بريد أولاً." : "Select a mailbox first.";
        if (!options?.silent) {
          setMessage(pickMsg);
        }
        return false;
      }

      syncInFlightRef.current = true;
      setActionLoading("sync");
      if (!options?.silent) {
        setMessage(null);
      }
      setSyncWarning(null);

      try {
        const res = await fetch("/api/inbox/sync", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            source: imapSource,
            mailboxId: imapSource === "mailbox" ? mailboxId : undefined,
          }),
        });
        const json = (await res.json().catch(() => ({}))) as {
          error?: string;
          fetched?: number;
          created?: number;
          linked?: number;
        };

        if (!res.ok) {
          const errMsg = `${locale === "ar" ? "فشل المزامنة" : "Sync failed"}: ${json.error ?? "—"}`;
          setSyncWarning(errMsg);
          return false;
        }

        if (!options?.silent) {
          setMessage(
            `fetched=${json.fetched ?? 0}, created=${json.created ?? 0}, linked=${json.linked ?? 0}`
          );
        }

        await refetch();
        return true;
      } catch {
        setSyncWarning(
          locale === "ar"
            ? "فشل الاتصال أثناء مزامنة البريد. تم عرض الرسائل المحفوظة."
            : "Sync connection failed. Showing saved messages."
        );
        return false;
      } finally {
        syncInFlightRef.current = false;
        setActionLoading("");
      }
    },
    [imapSource, mailboxId, locale, refetch]
  );

  useEffect(() => {
    if (!autoSync || autoSyncRanRef.current) return;
    if (imapSource === "mailbox" && !mailboxesReady) return;
    if (imapSource === "mailbox" && !mailboxId) {
      autoSyncRanRef.current = true;
      return;
    }
    autoSyncRanRef.current = true;
    const timer = window.setTimeout(() => {
      void runInboxSync({ silent: true });
    }, 0);
    return () => window.clearTimeout(timer);
  }, [autoSync, imapSource, mailboxId, mailboxesReady, runInboxSync]);

  async function syncInboxNow() {
    await runInboxSync({ silent: false });
  }



  async function bulkClassify() {

    setActionLoading("bulkAi");

    setMessage(null);

    const res = await fetch("/api/ai/classify-email-replies/bulk", {

      method: "POST",

      headers: { "Content-Type": "application/json" },

      body: JSON.stringify({ limit: 20 }),

    });

    const json = await res.json();

    setActionLoading("");

    if (!res.ok) {

      setMessage(json.error ?? "—");

      return;

    }

    setMessage(`classified=${json.classified}, failed=${json.failed}`);

    await refetch();

  }



  async function verifyImap() {

    if (imapSource === "mailbox" && !mailboxId) {

      setMessage(locale === "ar" ? "اختر صندوق بريد أولاً." : "Select a mailbox first.");

      return;

    }

    setActionLoading("verify");

    setMessage(null);

    const res = await fetch(`/api/email/verify-imap?${imapQueryParams()}`);

    const json = await res.json();

    setActionLoading("");

    setMessage(

      res.ok ? `IMAP: ${json.message}` : `IMAP: ${json.error ?? json.message}`

    );

  }



  const busy = listLoading || actionLoading !== "";

  const syncing = actionLoading === "sync";



  function selectMessage(id: string) {

    setSelectedId(id);

    if (typeof window !== "undefined" && window.innerWidth < 1024) {

      router.push(`/inbox/${id}`);

    }

  }



  return (

    <PageLayout

      title={locale === "ar" ? "صندوق الوارد" : "Inbox"}

      description={

        locale === "ar"

          ? "ردود البريد، التصنيف الذكي، والربط بالعملاء"

          : "Email replies, AI classification, and CRM linking"

      }

      actions={

        <div className="flex flex-wrap items-center gap-2">

          {aiStatus ? (

            <span className="rounded-lg border border-border bg-muted px-2 py-1 text-xs text-muted-foreground">

              AI: {aiStatus.provider}

              {aiStatus.model ? ` / ${aiStatus.model}` : ""}

            </span>

          ) : null}

          <Button variant="outline" size="sm" asChild>

            <Link href="/ai/status">AI</Link>

          </Button>

          <Button

            type="button"

            variant="outline"

            size="sm"

            disabled={busy}

            onClick={() => void bulkClassify()}

          >

            {actionLoading === "bulkAi"

              ? "..."

              : locale === "ar"

                ? "تصنيف"

                : "Classify"}

          </Button>

          <Button

            type="button"

            variant="outline"

            size="sm"

            disabled={busy}

            onClick={() => void verifyImap()}

          >

            {actionLoading === "verify" ? "..." : "IMAP"}

          </Button>

          <Button
            type="button"
            size="sm"
            className="inline-flex items-center gap-2"
            disabled={syncing}
            onClick={() => void syncInboxNow()}
          >
            {syncing ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : null}
            {syncing
              ? locale === "ar"
                ? "جاري المزامنة..."
                : "Syncing..."
              : locale === "ar"
                ? "مزامنة البريد"
                : "Sync inbox"}
          </Button>

        </div>

      }

    >

      <div className="surface-elevated flex flex-wrap items-end gap-3 p-4">

        <label className="block text-sm">

          <span className="text-muted-foreground">

            {locale === "ar" ? "مصدر IMAP" : "IMAP source"}

          </span>

          <select

            className="mt-1 flex h-10 min-h-[44px] w-full min-w-[160px] rounded-lg border border-border bg-card px-3 text-sm sm:min-h-10"

            value={imapSource}

            onChange={(e) => setImapSource(e.target.value as ImapSource)}

          >

            <option value="mailbox">Mailbox</option>

            <option value="env">Environment (.env)</option>

          </select>

        </label>

        {imapSource === "mailbox" ? (

          <label className="block text-sm">

            <span className="text-muted-foreground">Mailbox</span>

            <select

              className="mt-1 flex h-10 min-h-[44px] min-w-[200px] rounded-lg border border-border bg-card px-3 text-sm sm:min-h-10"

              value={mailboxId}

              onChange={(e) => setMailboxId(e.target.value)}

            >

              <option value="">—</option>

              {mailboxes.map((m) => (

                <option key={m._id} value={m._id}>

                  {m.name} ({m.email})

                </option>

              ))}

            </select>

            {mailboxesError ? (

              <p className="mt-1 text-xs text-destructive">{mailboxesError}</p>

            ) : null}

          </label>

        ) : null}

      </div>



      <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-3"

        />

        <FilterSelect

          value={values.status}

          onChange={(v) => setFilters({ status: v })}

          options={["new", "classified", "linked_to_lead", "ignored", "spam"]}

          allLabel={locale === "ar" ? "كل الحالات" : "All statuses"}

        />

        <Input

          placeholder="from email"

          value={values.fromEmail}

          onChange={(e) => setFilters({ fromEmail: e.target.value })}

          dir="ltr"

        />

      </FilterToolbar>



      {syncing ? (
        <div className="flex items-center gap-2 rounded-xl border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-primary">
          <Loader2 className="h-4 w-4 animate-spin shrink-0" />
          {locale === "ar" ? "جاري مزامنة البريد..." : "Syncing inbox..."}
        </div>
      ) : null}

      {syncWarning ? (
        <div className="rounded-xl border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900">
          {syncWarning}
        </div>
      ) : null}

      {message ? (

        <div className="rounded-xl border border-border bg-muted/40 p-3 text-sm text-muted-foreground">

          {message}

        </div>

      ) : null}



      <div className="flex min-h-0 flex-col gap-4 lg:flex-row lg:gap-0 lg:overflow-hidden lg:rounded-xl lg:border lg:border-border lg:bg-card lg:shadow-[var(--shadow-sm)]">

        <div

          className={cn(

            "flex max-h-[50vh] flex-col lg:max-h-[min(70vh,720px)] lg:w-[min(100%,380px)] lg:shrink-0 lg:border-e lg:border-border"

          )}

        >

          <div className="flex-1 overflow-y-auto p-2">

            {listLoading && 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>

            ) : (

              <ul className="space-y-1">

                {data.map((row) => {

                  const active = previewId === row._id;
                  const snippet = emailListSnippet(row.bodyText, row.bodyHtml);
                  const intent = row.classification?.intent;

                  return (

                    <li key={row._id}>

                      <button

                        type="button"

                        onClick={() => selectMessage(row._id)}

                        className={cn(

                          "w-full rounded-xl px-3 py-3 text-start transition-colors",

                          active

                            ? "bg-primary/15 ring-1 ring-primary/30"

                            : "hover:bg-muted"

                        )}

                      >

                        <div className="flex items-start justify-between gap-2">

                          <p className="truncate text-sm font-semibold" dir="ltr">

                            {row.fromEmail}

                          </p>

                          <span className="shrink-0 text-[10px] text-muted-foreground">

                            {new Date(row.receivedAt).toLocaleDateString(

                              locale === "ar" ? "ar-SA" : "en-US"

                            )}

                          </span>

                        </div>

                        <p className="truncate text-sm font-medium">

                          {row.subject || "—"}

                        </p>

                        {snippet ? (

                          <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">

                            {snippet}

                          </p>

                        ) : null}

                        <div className="mt-2 flex flex-wrap gap-1">

                          <Badge variant="secondary" className="text-[10px]">

                            {row.status}

                          </Badge>

                          {intent ? (

                            <Badge variant="secondary" className="text-[10px]">

                              AI: {intent}

                            </Badge>

                          ) : null}

                          {row.leadId ? (

                            <Badge className="text-[10px] bg-primary/15 text-primary">

                              Lead

                            </Badge>

                          ) : null}

                        </div>

                      </button>

                    </li>

                  );

                })}

              </ul>

            )}

          </div>

          <div className="border-t border-border p-2">

            <ListPagination

              page={page}

              totalPages={totalPages}

              loading={listLoading}

              onPageChange={setPage}

            />

          </div>

        </div>



        <div className="hidden min-h-[320px] flex-1 p-4 lg:block">

          <InboxPreviewPane messageId={previewId} />

        </div>

      </div>



      <p className="text-center text-xs text-muted-foreground lg:hidden">

        {locale === "ar" ? "اضغط على رسالة لفتحها" : "Tap a message to open"}

      </p>

    </PageLayout>

  );

}



export function InboxList(props: {

  initialData: InboxRow[];

  initialPagination?: { totalPages?: number };

  autoSync?: boolean;

}) {

  return (

    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>

      <InboxListInner {...props} />

    </Suspense>

  );

}