// screens/messages.jsx — Split-pane inbox with composer
function Messages({ ctx, initialId }) {
  const { data, nav } = ctx;
  const tt = ctx.tt;
  const [activeId, setActiveId] = React.useState(initialId || data.conversations[0]?.id);
  const [draft, setDraft] = React.useState("");
  const [extras, setExtras] = React.useState({}); // appended messages per conversation
  const conv = data.conversations.find((c) => c.id === activeId) || data.conversations[0];
  const tn = conv && data.byId.tenant(conv.tenantId);
  const apt = tn && data.byId.apt(tn.aptId);
  const allMsgs = conv ? [...conv.messages, ...(extras[conv.id] || [])] : [];

  React.useEffect(() => {
    // Scroll thread to bottom on conv change / new msg.
    const el = document.getElementById("msg-scroll");
    if (el) el.scrollTop = el.scrollHeight;
  }, [activeId, extras]);

  const send = () => {
    if (!draft.trim() || !conv) return;
    setExtras((x) => ({
      ...x,
      [conv.id]: [...(x[conv.id] || []), { from: "out", at: new Date().toISOString(), text: draft.trim() }],
    }));
    setDraft("");
  };

  return (
    <>
      <div className="main-top">
        <div className="title">
          <h1 className="display">{tt("msg.title")}</h1>
          <div className="sub">{tt("msg.sub", { n: data.conversations.filter((c) => c.unread > 0).length, tenants: data.conversations.length })}</div>
        </div>
        <div className="actions">
          <HeaderTools ctx={ctx} />
          <button className="btn"><Icon name="plus" size={14} /> {tt("btn.newThread")}</button>
        </div>
      </div>

      <div className="main-scroll" style={{ paddingBottom: 24 }}>
        <div className="msg-shell">
          {/* List */}
          <div className="msg-list">
            <div className="h">
              <div className="searchbar"><Icon name="search" size={13} /><input placeholder={tt("search.threads")} /></div>
            </div>
            <div className="scroll">
              {data.conversations.map((c) => {
                const t = data.byId.tenant(c.tenantId);
                const a = data.byId.apt(c.aptId);
                const last = (extras[c.id]?.length ? extras[c.id] : c.messages).at(-1) || c.messages.at(-1);
                return (
                  <div className="msg-item" key={c.id} aria-current={c.id === activeId}
                       onClick={() => setActiveId(c.id)}>
                    <div className="avatar">{initials(t.name)}</div>
                    <div className="body">
                      <div className="who-row">
                        <b>{t.name}</b>
                        <span><Flag code={t.country} /></span>
                        <time>{relTime(last.at)}</time>
                      </div>
                      <div className="preview">
                        {last.from === "out" ? tt("msg.you") : ""}{last.text}
                      </div>
                      <div className="flex center gap-2" style={{ marginTop: 4 }}>
                        <span className="pill" style={{ padding: "1px 6px", fontSize: 10.5 }}>{a.name}</span>
                        {c.unread > 0 && <span style={{ background: "var(--ef-accent)", color: "#fff", borderRadius: 999, fontSize: 10.5, padding: "1px 7px", fontWeight: 500 }}>{c.unread}</span>}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Thread */}
          {conv ? (
            <div className="msg-thread">
              <div className="head">
                <div className="avatar">{initials(tn.name)}</div>
                <div className="grow">
                  <div className="b500 flex center gap-2">{tn.name} <Flag code={tn.country} /></div>
                  <div className="muted txt-xs">
                    <Link onClick={() => nav("apartment", apt.id)}>{apt.name}</Link>
                    {tn.room ? ` · ${tt("msg.room", { n: tn.room })}` : ""} · {tn.phone}
                  </div>
                </div>
                <div className="flex gap-1">
                  <button className="iconbtn" title={tt("msg.viewProfile")} aria-label={tt("msg.viewProfile")} onClick={() => nav("tenant", tn.id)}><Icon name="eye" size={15} /></button>
                  <button className="iconbtn" title={tt("msg.more")} aria-label={tt("msg.more")}><Icon name="moreH" size={15} /></button>
                </div>
              </div>
              <div className="scroll" id="msg-scroll">
                {allMsgs.map((m, i) => {
                  const prev = allMsgs[i - 1];
                  const showDate = !prev || dayKey(prev.at) !== dayKey(m.at);
                  return (
                    <React.Fragment key={i}>
                      {showDate && (
                        <div style={{ alignSelf: "center", fontSize: 11, color: "var(--ef-muted)", padding: "4px 10px", background: "var(--ef-bg-soft)", borderRadius: 999, margin: "4px 0" }}>
                          {fmtDate(m.at, { short: true, withYear: false })}
                        </div>
                      )}
                      <div className={`bubble ${m.from}`}>
                        {m.text}
                        <time>{new Date(m.at).toLocaleTimeString(ctx.lang === "es" ? "es-ES" : "en-GB", { hour: "2-digit", minute: "2-digit" })}</time>
                      </div>
                    </React.Fragment>
                  );
                })}
              </div>
              <div className="composer">
                <button className="iconbtn"><Icon name="paperclip" size={15} /></button>
                <input placeholder={`${tt("btn.reply")} ${tn.name.split(" ")[0]}…`} value={draft}
                       onChange={(e) => setDraft(e.target.value)}
                       onKeyDown={(e) => e.key === "Enter" && send()} />
                <button className="btn accent" onClick={send} disabled={!draft.trim()}>
                  <Icon name="send" size={13} /> {tt("btn.send")}
                </button>
              </div>
            </div>
          ) : (
            <Empty icon="chat" title={tt("msg.empty")} />
          )}
        </div>
      </div>
    </>
  );
}

function dayKey(iso) {
  return new Date(iso).toDateString();
}

window.Messages = Messages;