/**
 * Conversații tab (M3): the conversation list over ChatService.
 *  - one row per available conversation: 1:1 rows for every ACTIVE contact
 *    (fingerprint mini + name), group rows for every registered chatreg
 *    (name + member count);
 *  - last-message preview + time (from device-local preview metadata, so the
 *    list renders without opening any room) and the unread dot (per-room
 *    last-seen ts in localStorage + the closed-room mailbox probe);
 *  - "grup nou": member picker over active contacts (≤12 incl. me) + name.
 * Tapping a row routes to #/c/<id> (full-screen conversation view).
 */

import { ChatService, type Conversation } from "../../core/conversations";
import { activeContacts } from "../../core/contacts";
import { CHAT_MEMBERS_MAX } from "../../core/groupchat";
import { clampName } from "../../core/contacts";
import { Session } from "../../core/session";
import { dateLocales, t } from "../i18n";
import { h, sheet, toast } from "../ui-kit";
import { fpSpan } from "./contacts-tab";

/** Preview timestamp: time-of-day for today, short date otherwise. */
export function fmtWhen(ts: number): string {
  const d = new Date(ts);
  const now = new Date();
  const locale = dateLocales();
  if (d.toDateString() === now.toDateString()) {
    return d.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
  }
  return d.toLocaleDateString(locale, { day: "numeric", month: "short" });
}

// ---- group creation ----------------------------------------------------------

function openNewGroupSheet(chat: ChatService): void {
  const selfroom = Session.selfroom;
  if (!selfroom) return;
  const contacts = activeContacts(selfroom.state);
  if (contacts.length === 0) {
    toast(t("chatGroupNeedMembers"));
    return;
  }

  const nameInput = h("input", {
    type: "text",
    class: "text-input",
    maxlength: 40,
    placeholder: t("ctGroupNamePh"),
    "data-testid": "newgroup-name",
  }) as HTMLInputElement;

  const picked = new Set<string>();
  const maxOthers = CHAT_MEMBERS_MAX - 1; // me + others ≤ 12
  const boxes: HTMLInputElement[] = [];
  const memberRows = h("div", { class: "check-col member-picker" });
  for (const c of contacts) {
    const box = h("input", { type: "checkbox", "data-pub": c.pub }) as HTMLInputElement;
    boxes.push(box);
    box.addEventListener("change", () => {
      if (box.checked && picked.size >= maxOthers) {
        box.checked = false;
        toast(t("chatGroupTooMany", { n: CHAT_MEMBERS_MAX }));
        return;
      }
      if (box.checked) picked.add(c.pub);
      else picked.delete(c.pub);
      gate();
    });
    memberRows.append(
      h("label", { class: "check-row", "data-testid": "newgroup-member", "data-pub": c.pub },
        box,
        fpSpan(c.pub, "fp-small"),
        h("span", {}, c.name),
      ),
    );
  }

  const create = h(
    "button",
    { type: "button", class: "btn", disabled: true, "data-testid": "newgroup-create" },
    t("chatGroupCreate"),
  ) as HTMLButtonElement;
  const cancel = h("button", { type: "button", class: "btn ghost" }, t("cancel"));
  const gate = (): void => {
    create.disabled = clampName(nameInput.value).length === 0 || picked.size === 0;
  };
  nameInput.addEventListener("input", gate);

  const body = h(
    "div",
    { "data-testid": "newgroup-sheet" },
    h("h2", { class: "sheet-title" }, t("chatNewGroup")),
    nameInput,
    h("p", { class: "field-label" }, t("chatGroupPick", { n: CHAT_MEMBERS_MAX })),
    memberRows,
    h("div", { class: "btn-row" }, cancel, create),
  );
  const s = sheet(body);
  cancel.addEventListener("click", () => s.close());

  create.addEventListener("click", () => {
    const name = clampName(nameInput.value);
    if (!name || picked.size === 0) return;
    create.disabled = true;
    void chat
      .createGroup(name, [...picked])
      .then((id) => {
        s.close();
        toast(t("chatGroupCreated"));
        location.hash = `#/c/${id}`;
      })
      .catch(() => {
        toast(t("chatGroupFailed"));
        create.disabled = false;
      });
  });
}

// ---- the tab -----------------------------------------------------------------

/** Run `cleanup` the moment `el` leaves the document (tab switch, route). */
function onDisconnect(el: HTMLElement, cleanup: () => void): void {
  const obs = new MutationObserver(() => {
    if (!el.isConnected) {
      obs.disconnect();
      cleanup();
    }
  });
  obs.observe(document.body, { childList: true, subtree: true });
}

function convRow(chat: ChatService, conv: Conversation): HTMLElement {
  const isGroup = conv.ref.kind === "group";
  const isMatch = conv.ref.kind === "match";
  const previewText = conv.preview
    ? `${conv.preview.from === chat.myPub ? `${t("chatYou")}: ` : ""}${conv.preview.body}`
    : t("chatStartHint");
  return h(
    "button",
    {
      type: "button",
      class: "conv-row",
      "data-testid": "conv-row",
      "data-conv": conv.ref.id,
      onclick: () => {
        location.hash = `#/c/${conv.ref.id}`;
      },
    },
    isGroup
      ? h("span", { class: "conv-glyph", "aria-hidden": "true" }, "👥")
      : fpSpan(isMatch ? (conv.matchPeer ?? "") : conv.ref.id, "fp-small conv-glyph", "conv-fp"),
    h(
      "span",
      { class: "conv-main" },
      h(
        "span",
        { class: "conv-top" },
        h("span", { class: "contact-name" }, conv.name),
        conv.preview ? h("span", { class: "conv-time muted" }, fmtWhen(conv.preview.ts)) : null,
      ),
      h(
        "span",
        { class: "conv-bottom" },
        h("span", { class: `conv-preview muted${conv.preview ? "" : " conv-hint"}` }, previewText),
        isGroup ? h("span", { class: "chip" }, t("chatMembers", { n: conv.memberCount ?? 0 })) : null,
        isMatch ? h("span", { class: "chip chip-strong", "data-testid": "conv-match-badge" }, `❤️ ${t("mtMatchBadge")}`) : null,
      ),
    ),
    conv.unread ? h("span", { class: "unread-dot", "data-testid": "conv-unread" }) : null,
  );
}

export function renderChatsTab(container: HTMLElement): void {
  const chat = Session.chat;
  if (!chat || !Session.selfroom) {
    // selfroom stack still booting — honest note, retry shortly
    container.replaceChildren(h("p", { class: "muted empty-note", "data-testid": "chats-starting" }, t("chatStarting")));
    const timer = setInterval(() => {
      if (Session.chat && Session.selfroom) {
        clearInterval(timer);
        renderChatsTab(container);
      }
    }, 400);
    onDisconnect(container, () => clearInterval(timer));
    return;
  }

  const render = (): void => {
    const conversations = chat.conversations();
    const rows =
      conversations.length === 0
        ? [h("p", { class: "muted empty-note", "data-testid": "chats-empty" }, t("chatEmpty"))]
        : conversations.map((c) => convRow(chat, c));
    container.replaceChildren(
      h(
        "div",
        { class: "chats-panel", "data-testid": "chats-panel" },
        h(
          "section",
          { class: "card" },
          h(
            "div",
            { class: "card-head" },
            h("h2", {}, t("tabChats")),
            h(
              "button",
              { type: "button", class: "btn ghost small", "data-testid": "newgroup-open", onclick: () => openNewGroupSheet(chat) },
              t("chatNewGroup"),
            ),
          ),
          ...rows,
        ),
      ),
    );
  };

  // previews / unread / registry changes re-render live
  const unsub = chat.onListChanged(() => {
    if (container.isConnected) render();
  });
  onDisconnect(container, unsub);

  render();
  // Conversații tab ⇒ go live (lazy, idempotent; mailbox never depends on it)
  Session.selfroom.hub.ensureLive();
  // incoming-message detection for conversations whose rooms are NOT open:
  // a cheap mailbox seq probe per closed conversation (throttled inside)
  void chat.probeClosed();
}