// Event Stream screen — conversation log with expandable inline message detail.
// Manual refresh. Shows recent conversations across all source groups.

const { useState } = React;

// ─── Single message row inside expanded conversation detail ───────────────
const ConversationMessageRow = ({ msg }) => {
  const text = msg.text || msg.message || "";
  const preview = text.length > 80 ? text.slice(0, 80) + "…" : text || "(media)";
  const fwdCount = (msg.forwardInfo || []).length;

  return (
    <div style={{
      display: "flex", alignItems: "flex-start", gap: 12, padding: "8px 0",
      borderBottom: "1px solid var(--border)", fontSize: 13,
    }}>
      <span className="mono muted" style={{ minWidth: 60, fontSize: 11 }}>
        #{msg.messageId || msg._id}
      </span>
      <span style={{ flex: 1, color: "var(--fg-2)" }}>{preview}</span>
      {msg.hasMedia && (
        <span className="badge" style={{ fontSize: 11 }}>Media</span>
      )}
      {fwdCount > 0 && (
        <span className="badge" style={{ fontSize: 11 }}>→ {fwdCount} groups</span>
      )}
      <span className="muted" style={{ fontSize: 11, whiteSpace: "nowrap" }}>
        {relativeTime(msg.timestamp || msg.created_at)}
      </span>
    </div>
  );
};

// ─── Main Event Stream screen ─────────────────────────────────────────────
const EventStreamScreen = () => {
  const toast = useToast();
  const { data: conversations, loading, error, refetch } = useApi(ConversationApi.list, []);
  const [expandedId, setExpandedId]   = useState(null);
  const [detail, setDetail]           = useState(null);
  const [loadingDetail, setLoadingDetail] = useState(false);

  // Toggle expand: load full conversation detail on open
  const handleExpand = async (id) => {
    if (expandedId === id) {
      setExpandedId(null);
      setDetail(null);
      return;
    }
    setExpandedId(id);
    setDetail(null);
    setLoadingDetail(true);
    try {
      const conv = await ConversationApi.get(id);
      setDetail(conv);
    } catch (e) {
      toast.error(e.message);
      setExpandedId(null);
    } finally {
      setLoadingDetail(false);
    }
  };

  const list = conversations || [];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Event Stream</h1>
          <div className="page-sub">Recent message activity across source groups.</div>
        </div>
        <button className="btn" onClick={refetch}><I.Refresh /> Refresh</button>
      </div>

      <Card flush>
        <table className="table">
          <thead>
            <tr>
              <th>User</th>
              <th>Source Group</th>
              <th>Messages</th>
              <th>Topic</th>
              <th>Updated</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <SkeletonRows cols={5} rows={5} />
            ) : error ? (
              <tr><td colSpan={5}><Empty icon={I.AlertTriangle} title="Error" sub={error} /></td></tr>
            ) : list.length === 0 ? (
              <tr><td colSpan={5}><Empty icon={I.Activity} title="No conversations" sub="No message activity yet." /></td></tr>
            ) : (
              list.map((conv) => {
                const isExpanded = expandedId === conv._id;
                // Use detail messages when this row is expanded, else show count from list
                const msgs = (isExpanded && detail?._id === conv._id)
                  ? (detail.messages || []).slice(-10)
                  : [];

                return (
                  <React.Fragment key={conv._id}>
                    <tr style={{ cursor: "pointer" }} onClick={() => handleExpand(conv._id)}>
                      <td>
                        <span className="mono" style={{ fontSize: 12 }}>
                          {conv.username ? `@${conv.username}` : (conv.user_telegram_id || "—")}
                        </span>
                      </td>
                      <td className="muted">{conv.sourceGroupId || "—"}</td>
                      <td>{(conv.messages || []).length}</td>
                      <td>
                        {conv.topicId
                          ? <span className="mono">#{conv.topicId}</span>
                          : <span className="muted">—</span>}
                      </td>
                      <td className="muted">{relativeTime(conv.updated_at || conv.updatedAt)}</td>
                    </tr>

                    {/* Expandable detail row */}
                    {isExpanded && (
                      <tr>
                        <td colSpan={5} style={{ padding: "12px 16px", background: "var(--bg-1)" }}>
                          {loadingDetail ? (
                            <div className="muted" style={{ fontSize: 13 }}>Loading messages…</div>
                          ) : msgs.length === 0 ? (
                            <div className="muted" style={{ fontSize: 13 }}>No messages.</div>
                          ) : (
                            <>
                              <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>
                                Last {msgs.length} messages
                              </div>
                              {msgs.map((msg, idx) => (
                                <ConversationMessageRow key={msg._id || idx} msg={msg} />
                              ))}
                            </>
                          )}
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                );
              })
            )}
          </tbody>
        </table>
      </Card>
    </div>
  );
};

Object.assign(window, { EventStreamScreen });