"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { MessageCircle, ExternalLink, Send, RefreshCw, ArrowLeft, Loader2, Search } from "lucide-react";
import { getPB } from "@/lib/pocketbase";

// Vista nativa de mensajería. Habla con Chatwoot vía nuestro route server-side
// (/api/chatwoot), que llama por la red interna de Docker. Sin iframe, sin cookies.
const CHATWOOT_WEB = "https://chat.bah-ia.com.ar/app/accounts/3/dashboard";

interface Inbox { id: number; name: string; channel_type: string }
interface Sender { name?: string; phone_number?: string; thumbnail?: string }
interface ConvMessage { id: number; content?: string | null; message_type: number; created_at: number; private?: boolean; attachments?: { data_url?: string; file_type?: string }[] }
interface Conversation { id: number; status: string; meta?: { sender?: Sender }; messages?: ConvMessage[]; unread_count?: number; last_activity_at?: number }
interface Contact { name?: string; phone_number?: string; thumbnail?: string }

const STATUSES = [
  { v: "open", l: "Abiertas" },
  { v: "pending", l: "Pendientes" },
  { v: "resolved", l: "Resueltas" },
  { v: "all", l: "Todas" },
];

function fmtTime(unix?: number) {
  if (!unix) return "";
  const d = new Date(unix * 1000);
  const today = new Date();
  const sameDay = d.toDateString() === today.toDateString();
  return sameDay
    ? d.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" })
    : d.toLocaleDateString("es-AR", { day: "2-digit", month: "2-digit" }) + " " + d.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" });
}

function initials(name?: string) {
  if (!name) return "?";
  return name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("");
}

export default function ChatwootPage() {
  const token = () => getPB().authStore.token;

  const [inboxes, setInboxes] = useState<Inbox[]>([]);
  const [inboxId, setInboxId] = useState<number | null>(null);
  const [status, setStatus] = useState("open");
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [convId, setConvId] = useState<number | null>(null);
  const [messages, setMessages] = useState<ConvMessage[]>([]);
  const [contact, setContact] = useState<Contact | null>(null);
  const [search, setSearch] = useState("");
  const [reply, setReply] = useState("");
  const [sending, setSending] = useState(false);
  const [loadingConvs, setLoadingConvs] = useState(false);
  const [loadingMsgs, setLoadingMsgs] = useState(false);
  const [err, setErr] = useState("");

  const threadRef = useRef<HTMLDivElement>(null);

  async function api(qs: string) {
    const r = await fetch(`/api/chatwoot?${qs}`, { headers: { Authorization: token() } });
    const d = await r.json();
    if (!r.ok) throw new Error(d?.error || `Error ${r.status}`);
    return d;
  }

  // Inboxes (una vez)
  useEffect(() => {
    (async () => {
      try {
        const d = await api("resource=inboxes");
        const list: Inbox[] = d.inboxes || [];
        setInboxes(list);
        if (list.length) setInboxId(list[0].id);
      } catch (e) {
        setErr((e as Error).message);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadConversations = useCallback(async (silent = false) => {
    if (!inboxId) return;
    if (!silent) setLoadingConvs(true);
    try {
      const d = await api(`resource=conversations&inbox_id=${inboxId}&status=${status}`);
      setConversations(d.conversations || []);
      setErr("");
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      if (!silent) setLoadingConvs(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inboxId, status]);

  const loadMessages = useCallback(async (id: number, silent = false) => {
    if (!silent) setLoadingMsgs(true);
    try {
      const d = await api(`resource=messages&conversation_id=${id}`);
      setMessages(d.messages || []);
      setContact(d.contact || null);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      if (!silent) setLoadingMsgs(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Recargar conversaciones al cambiar inbox/estado + polling
  useEffect(() => {
    setConvId(null);
    setMessages([]);
    loadConversations();
    const t = setInterval(() => loadConversations(true), 7000);
    return () => clearInterval(t);
  }, [loadConversations]);

  // Mensajes de la conversación abierta + polling
  useEffect(() => {
    if (convId == null) return;
    loadMessages(convId);
    const t = setInterval(() => loadMessages(convId, true), 4000);
    return () => clearInterval(t);
  }, [convId, loadMessages]);

  // Auto-scroll al final del hilo
  useEffect(() => {
    threadRef.current?.scrollTo({ top: threadRef.current.scrollHeight });
  }, [messages]);

  async function send() {
    const content = reply.trim();
    if (!content || convId == null) return;
    setSending(true);
    try {
      await fetch("/api/chatwoot", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: token() },
        body: JSON.stringify({ conversation_id: convId, content }),
      }).then(async (r) => { if (!r.ok) throw new Error((await r.json())?.error || "No se pudo enviar"); });
      setReply("");
      await loadMessages(convId, true);
      loadConversations(true);
    } catch (e) {
      setErr((e as Error).message);
    } finally {
      setSending(false);
    }
  }

  const filtered = conversations.filter((c) => {
    if (!search.trim()) return true;
    const s = search.toLowerCase();
    const snd = c.meta?.sender;
    return (snd?.name || "").toLowerCase().includes(s) || (snd?.phone_number || "").includes(s);
  });

  return (
    <div className="-m-5 md:-m-8 flex h-[calc(100dvh-7rem)] md:h-[calc(100dvh-4rem)] flex-col">
      {/* Barra superior */}
      <div className="flex items-center justify-between gap-3 border-b border-line bg-surface px-4 py-3 md:px-6">
        <div className="flex min-w-0 items-center gap-2">
          <MessageCircle className="h-5 w-5 shrink-0 text-brand-dark" />
          <div className="min-w-0">
            <h1 className="truncate text-lg font-extrabold leading-tight text-ink">Mensajería</h1>
            <p className="truncate text-xs text-ink-soft">WhatsApp y chat web — directo desde Chatwoot</p>
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          {inboxes.length > 0 && (
            <select
              value={inboxId ?? ""}
              onChange={(e) => setInboxId(Number(e.target.value))}
              className="h-9 rounded-lg border border-line bg-canvas px-2 text-xs font-semibold text-ink outline-none focus:border-brand"
            >
              {inboxes.map((ib) => <option key={ib.id} value={ib.id}>{ib.name}</option>)}
            </select>
          )}
          <a
            href={CHATWOOT_WEB}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 rounded-lg border border-line bg-canvas px-2.5 py-1.5 text-xs font-semibold text-ink-soft transition-colors hover:border-brand hover:text-ink"
          >
            <ExternalLink className="h-3.5 w-3.5" /> <span className="hidden sm:inline">Ir a Chatwoot</span>
          </a>
        </div>
      </div>

      {err && <div className="border-b border-red-200 bg-red-50 px-4 py-2 text-xs text-bad">{err}</div>}

      <div className="flex min-h-0 flex-1">
        {/* Lista de conversaciones */}
        <aside className={`${convId != null ? "hidden md:flex" : "flex"} w-full flex-col border-r border-line bg-surface md:w-80 lg:w-96`}>
          <div className="flex items-center gap-2 border-b border-line p-2">
            <div className="relative flex-1">
              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-faint" />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Buscar nombre o teléfono"
                className="h-9 w-full rounded-lg border border-line bg-canvas pl-8 pr-2 text-xs text-ink outline-none focus:border-brand"
              />
            </div>
            <select
              value={status}
              onChange={(e) => setStatus(e.target.value)}
              className="h-9 rounded-lg border border-line bg-canvas px-2 text-xs font-semibold text-ink outline-none focus:border-brand"
            >
              {STATUSES.map((s) => <option key={s.v} value={s.v}>{s.l}</option>)}
            </select>
            <button onClick={() => loadConversations()} className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-line bg-canvas text-ink-soft hover:text-ink" title="Actualizar">
              <RefreshCw className="h-3.5 w-3.5" />
            </button>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto">
            {loadingConvs ? (
              <div className="grid place-items-center py-16 text-faint"><Loader2 className="h-5 w-5 animate-spin" /></div>
            ) : filtered.length === 0 ? (
              <p className="px-4 py-12 text-center text-sm text-faint">Sin conversaciones.</p>
            ) : filtered.map((c) => {
              const snd = c.meta?.sender;
              const last = c.messages?.[c.messages.length - 1];
              const active = c.id === convId;
              return (
                <button
                  key={c.id}
                  onClick={() => setConvId(c.id)}
                  className={`flex w-full items-center gap-3 border-b border-line px-3 py-2.5 text-left transition-colors hover:bg-canvas ${active ? "bg-canvas" : ""}`}
                >
                  <div className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-soft text-xs font-bold text-brand-dark">
                    {snd?.thumbnail ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={snd.thumbnail} alt="" className="h-full w-full object-cover" />
                    ) : initials(snd?.name)}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center justify-between gap-2">
                      <span className="truncate text-sm font-bold text-ink">{snd?.name || snd?.phone_number || "Sin nombre"}</span>
                      <span className="shrink-0 text-[10px] text-faint">{fmtTime(c.last_activity_at || last?.created_at)}</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <p className="truncate text-xs text-ink-soft">{last?.content || (last?.attachments?.length ? "📎 Adjunto" : "—")}</p>
                      {!!c.unread_count && <span className="ml-auto grid h-4 min-w-4 shrink-0 place-items-center rounded-full bg-brand px-1 text-[10px] font-bold text-white">{c.unread_count}</span>}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </aside>

        {/* Hilo */}
        <section className={`${convId != null ? "flex" : "hidden md:flex"} min-w-0 flex-1 flex-col bg-canvas`}>
          {convId == null ? (
            <div className="grid flex-1 place-items-center px-6 text-center text-sm text-faint">
              <div>
                <MessageCircle className="mx-auto mb-3 h-10 w-10 opacity-40" />
                Elegí una conversación de la izquierda.
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 border-b border-line bg-surface px-3 py-2.5">
                <button onClick={() => setConvId(null)} className="grid h-8 w-8 place-items-center rounded-lg text-ink-soft hover:bg-canvas md:hidden">
                  <ArrowLeft className="h-4 w-4" />
                </button>
                <div className="grid h-9 w-9 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-soft text-xs font-bold text-brand-dark">
                  {contact?.thumbnail ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={contact.thumbnail} alt="" className="h-full w-full object-cover" />
                  ) : initials(contact?.name)}
                </div>
                <div className="min-w-0">
                  <p className="truncate text-sm font-bold text-ink">{contact?.name || "Sin nombre"}</p>
                  <p className="truncate text-xs text-ink-soft">{contact?.phone_number || ""}</p>
                </div>
              </div>

              <div ref={threadRef} className="min-h-0 flex-1 space-y-2 overflow-y-auto p-4">
                {loadingMsgs && messages.length === 0 ? (
                  <div className="grid place-items-center py-16 text-faint"><Loader2 className="h-5 w-5 animate-spin" /></div>
                ) : messages.filter((m) => m.message_type !== 2 && !m.private).map((m) => {
                  const incoming = m.message_type === 0;
                  return (
                    <div key={m.id} className={`flex ${incoming ? "justify-start" : "justify-end"}`}>
                      <div className={`max-w-[78%] rounded-2xl px-3 py-2 text-sm ${incoming ? "rounded-bl-sm bg-surface text-ink border border-line" : "rounded-br-sm bg-brand text-white"}`}>
                        {m.attachments?.map((a, i) => a.data_url && a.file_type === "image" ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img key={i} src={a.data_url} alt="adjunto" className="mb-1 max-h-60 rounded-lg" />
                        ) : a.data_url ? (
                          <a key={i} href={a.data_url} target="_blank" rel="noreferrer" className="block underline opacity-90">📎 Adjunto</a>
                        ) : null)}
                        {m.content && <p className="whitespace-pre-wrap break-words">{m.content}</p>}
                        <p className={`mt-1 text-[10px] ${incoming ? "text-faint" : "text-white/70"}`}>{fmtTime(m.created_at)}</p>
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="flex items-end gap-2 border-t border-line bg-surface p-3">
                <textarea
                  value={reply}
                  onChange={(e) => setReply(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
                  placeholder="Escribí un mensaje…  (Enter envía, Shift+Enter salto de línea)"
                  rows={1}
                  className="max-h-32 min-h-[2.75rem] flex-1 resize-y rounded-xl border border-line bg-canvas px-3 py-2.5 text-sm text-ink outline-none focus:border-brand"
                />
                <button
                  onClick={send}
                  disabled={sending || !reply.trim()}
                  className="inline-flex h-11 shrink-0 items-center gap-2 rounded-xl bg-brand px-4 text-sm font-semibold text-white transition-colors hover:bg-brand-dark disabled:opacity-50"
                >
                  {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                  <span className="hidden sm:inline">Enviar</span>
                </button>
              </div>
            </>
          )}
        </section>
      </div>
    </div>
  );
}