/* ============================================================
   Inbox list + Reader pane
   ============================================================ */

function relTime(ts) {
  const s = Math.max(1, (Date.now() - ts) / 1000);
  if (s < 60) return `${s | 0}s`;
  if (s < 3600) return `${(s / 60) | 0}m`;
  if (s < 86400) return `${(s / 3600) | 0}h`;
  return `${(s / 86400) | 0}d`;
}

function MessageList({ messages, selectedId, onSelect, filter, showPreview = true, grouped = false }) {
  const filtered = React.useMemo(() => {
    if (filter === "unread") return messages.filter((m) => !m.read);
    if (filter === "otp") return messages.filter((m) => m.kind === "otp");
    return messages;
  }, [messages, filter]);

  // Build [sender header, msg, msg, sender header, ...] when grouped
  const rows = React.useMemo(() => {
    if (!grouped) return filtered.map((m) => ({ kind: "msg", msg: m }));
    const out = [];
    let lastSender = null;
    filtered.forEach((m) => {
      const sender = m.fromName || m.from;
      if (sender !== lastSender) {
        out.push({ kind: "head", sender });
        lastSender = sender;
      }
      out.push({ kind: "msg", msg: m });
    });
    return out;
  }, [filtered, grouped]);

  if (filtered.length === 0) {
    return (
      <div className="msg-list-empty">
        <div>
          <span className="empty-dot"></span>
          <span style={{ fontSize: 12, color: "var(--text-muted)" }}>Listening for mail</span>
        </div>
        <h4>Inbox is empty</h4>
        <p>New messages sent to this address will appear here automatically.</p>
      </div>
    );
  }

  return (
    <>
      {rows.map((r, i) => r.kind === "head" ? (
        <div key={"h" + i} className="msg-group-head">{r.sender}</div>
      ) : (
        <div
          key={r.msg.id}
          className={`msg-item ${r.msg.read ? "" : "unread"} ${selectedId === r.msg.id ? "selected" : ""} ${grouped ? "grouped" : ""}`}
          onClick={() => onSelect(r.msg.id)}
        >
          {!grouped && <div className="msg-from" title={r.msg.from}>{r.msg.fromName || r.msg.from}</div>}
          <div className="msg-time">{relTime(r.msg.receivedAt)}</div>
          <div className="msg-subject" style={grouped ? { gridColumn: "1 / 2" } : null}>{r.msg.subject}</div>
          {showPreview && <div className="msg-preview">{r.msg.preview}</div>}
          <div className="msg-badges">
            {r.msg.kind === "otp" && <span className="msg-badge otp">OTP</span>}
            {r.msg.attachments && r.msg.attachments.length > 0 && (
              <span className="msg-badge attach">{r.msg.attachments.length}</span>
            )}
          </div>
        </div>
      ))}
    </>
  );
}

function escapeHtml(value = "") {
  return String(value)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function sanitizeEmailHtml(html = "") {
  const template = document.createElement("template");
  template.innerHTML = html;
  template.content.querySelectorAll("script, iframe, object, embed, form, input, button, textarea").forEach((n) => n.remove());
  template.content.querySelectorAll("*").forEach((node) => {
    [...node.attributes].forEach((attr) => {
      const name = attr.name.toLowerCase();
      const value = attr.value.trim();
      if (name.startsWith("on")) node.removeAttribute(attr.name);
      if ((name === "href" || name === "src") && /^javascript:/i.test(value)) node.removeAttribute(attr.name);
      if (name === "srcdoc") node.removeAttribute(attr.name);
    });
    if (node.tagName === "A") {
      node.setAttribute("target", "_blank");
      node.setAttribute("rel", "noopener noreferrer");
    }
  });
  return template.innerHTML;
}

function messageToEml(message) {
  const headers = [
    `From: ${message.fromName || message.from} <${message.from}>`,
    `To: ${message.to}`,
    `Subject: ${message.subject}`,
    `Date: ${new Date(message.receivedAt).toUTCString()}`,
    "MIME-Version: 1.0",
    'Content-Type: text/html; charset="UTF-8"',
  ];
  return `${headers.join("\r\n")}\r\n\r\n${message.html || escapeHtml(message.preview || "")}`;
}

function downloadMessage(message) {
  const blob = new Blob([messageToEml(message)], { type: "message/rfc822" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  const safeSubject = (message.subject || "message").replace(/[\\/:*?"<>|]+/g, "-").slice(0, 80);
  a.href = url;
  a.download = `${safeSubject}.eml`;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

function Reader({ message, onClose, onDelete, onMarkRead, onReply, onForward }) {
  const [starred, setStarred] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("tm:starred") || "{}"); }
    catch { return {}; }
  });

  React.useEffect(() => {
    if (message && !message.read) onMarkRead(message.id);
  }, [message?.id]);

  if (!message) {
    return (
      <div className="reader reader-empty">
        <div className="reader-empty-inner">
          <div className="glyph"><Icon name="mail" size={20} /></div>
          <h3>No message selected</h3>
          <p>Pick a message from the list to read it here, or wait — new mail will arrive shortly.</p>
        </div>
      </div>
    );
  }

  const date = new Date(message.receivedAt);
  const dateStr = date.toLocaleString(undefined, {
    weekday: "short", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
  });
  const isStarred = !!starred[message.id];
  const safeHtml = sanitizeEmailHtml(message.html || `<p>${escapeHtml(message.preview || "")}</p>`);
  const mailto = `mailto:${message.from}?subject=${encodeURIComponent(`Re: ${message.subject || ""}`)}`;
  const forwardMailto = `mailto:?subject=${encodeURIComponent(`Fwd: ${message.subject || ""}`)}&body=${encodeURIComponent(`${message.preview || ""}\n\nFrom: ${message.from}\nTo: ${message.to}`)}`;
  const toggleStar = () => {
    setStarred((cur) => {
      const next = { ...cur, [message.id]: !cur[message.id] };
      if (!next[message.id]) delete next[message.id];
      localStorage.setItem("tm:starred", JSON.stringify(next));
      return next;
    });
  };

  return (
    <div className="reader">
      <div className="reader-header">
        <div className="reader-toolbar">
          <div className="reader-toolbar-left">
            <button className="icon-btn" title="Back" onClick={onClose}><Icon name="arrow_left" /></button>
            <a className="icon-btn" title="Reply" href={mailto} onClick={onReply}><Icon name="reply" /></a>
            <a className="icon-btn" title="Forward" href={forwardMailto} onClick={onForward}><Icon name="forward" /></a>
            <button className={`icon-btn ${isStarred ? "starred" : ""}`} title={isStarred ? "Unstar" : "Star"} onClick={toggleStar}><Icon name="star" /></button>
          </div>
          <div className="reader-toolbar-left">
            <button className="icon-btn" title="Download .eml" onClick={() => downloadMessage(message)}><Icon name="download" /></button>
            <button className="icon-btn" title="Delete" onClick={() => onDelete(message.id)}><Icon name="trash" /></button>
          </div>
        </div>
        <h2 className="reader-subject">{message.subject}</h2>
        <div className="reader-meta">
          <span><b>{message.fromName || message.from}</b> &lt;{message.from}&gt;</span>
          <span>to <b>{message.to}</b></span>
          <span>{dateStr}</span>
        </div>
      </div>
      <div className="reader-body" dangerouslySetInnerHTML={{ __html: safeHtml }} />
      {message.attachments && message.attachments.length > 0 && (
        <div className="attachments">
          {message.attachments.map((a, i) => (
            <div className="attachment" key={i}>
              <div className="attachment-icon">{(a.name.split(".").pop() || "").toUpperCase().slice(0,3)}</div>
              <div>
                <div>{a.name}</div>
                <div className="attachment-size">{a.size}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

window.MessageList = MessageList;
window.Reader = Reader;
window.relTime = relTime;