"use client";

import { useEffect, useRef, useState } from "react";
import { api } from "@/lib/client";

interface MessageRow {
  id: string;
  body: string;
  createdAt: string;
  sender: { name: string; role: string };
}

// Thread pesan singkat satu cabang. Bubble dari Admin Cabang rata kiri,
// bubble dari Pusat (super_admin/owner_approver) rata kanan — seperti chat.
export default function MessageThread({
  branchId,
  emptyLabel,
}: {
  branchId: string | null;
  emptyLabel?: string;
}) {
  const [messages, setMessages] = useState<MessageRow[]>([]);
  const [text, setText] = useState("");
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState("");
  const bottomRef = useRef<HTMLDivElement>(null);

  const load = () => {
    if (!branchId) { setMessages([]); return; }
    api<MessageRow[]>(`/api/messages?branchId=${branchId}`).then(setMessages).catch((e) => setErr(e.message));
  };

  useEffect(() => {
    load();
    if (!branchId) return;
    const t = setInterval(load, 5000);
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [branchId]);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ block: "nearest" });
  }, [messages.length]);

  async function send() {
    if (!branchId || !text.trim()) return;
    setSending(true); setErr("");
    try {
      await api("/api/messages", { method: "POST", body: JSON.stringify({ branchId, body: text.trim() }) });
      setText("");
      load();
    } catch (e: any) {
      setErr(e.message);
    } finally {
      setSending(false);
    }
  }

  if (!branchId) {
    return <p className="py-4 text-center text-sm text-slate-400">{emptyLabel ?? "Pilih cabang dahulu."}</p>;
  }

  return (
    <div className="flex flex-col gap-2">
      <div className="max-h-80 min-h-[8rem] space-y-2 overflow-y-auto rounded-lg bg-slate-50 p-3">
        {messages.length === 0 ? (
          <p className="py-6 text-center text-xs text-slate-400">Belum ada pesan. Mulai percakapan di bawah.</p>
        ) : (
          messages.map((m) => {
            const fromCabang = m.sender.role === "branch_admin";
            return (
              <div key={m.id} className={`flex ${fromCabang ? "justify-start" : "justify-end"}`}>
                <div
                  className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${
                    fromCabang ? "border border-slate-200 bg-white" : "bg-brand-600 text-white"
                  }`}
                >
                  <p className={`mb-0.5 text-[11px] font-semibold ${fromCabang ? "text-slate-500" : "text-brand-100"}`}>
                    {m.sender.name}
                  </p>
                  <p className="whitespace-pre-wrap break-words">{m.body}</p>
                  <p className={`mt-1 text-right text-[10px] ${fromCabang ? "text-slate-400" : "text-brand-100"}`}>
                    {new Date(m.createdAt).toLocaleString("id-ID", {
                      day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit",
                    })}
                  </p>
                </div>
              </div>
            );
          })
        )}
        <div ref={bottomRef} />
      </div>
      <div className="flex gap-2">
        <input
          className="input"
          placeholder="Tulis pesan…"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && !sending) send(); }}
        />
        <button className="btn-primary shrink-0 text-sm" disabled={!text.trim() || sending} onClick={send}>
          {sending ? "…" : "Kirim"}
        </button>
      </div>
      {err && <p className="text-xs text-red-600">{err}</p>}
    </div>
  );
}