// Page 3: 對話列表 + 檢視器 (light theme, all Chinese)

function PageConversations({ filters, density, selectedThreadId, setSelectedThreadId }) {
  const { CONVERSATIONS } = window.MOCK;
  const [preset, setPreset] = React.useState('all');
  const [search, setSearch] = React.useState('');

  const presets = [
    { id: 'all', label: '全部', filter: () => true },
    { id: 'looped', label: '迴圈警示', filter: c => c.status === 'looped', color: '#B45309' },
    { id: 'long', label: '過長 (>20 訊息)', filter: c => c.status === 'long' || c.msgCount > 20, color: '#6D28D9' },
    { id: 'errored', label: '錯誤結束', filter: c => c.status === 'errored', color: '#DC2626' },
    { id: 'abandoned', label: '中途中斷', filter: c => c.status === 'abandoned', color: '#9098A3' },
    { id: 'expensive', label: '高費用 (>$0.50)', filter: c => c.cost > 0.5, color: '#DB2777' },
  ];

  const activePreset = presets.find(p => p.id === preset);
  const filtered = CONVERSATIONS.filter(activePreset.filter).filter(c => {
    if (!search) return true;
    return c.title.toLowerCase().includes(search.toLowerCase()) ||
           c.brand_id.includes(search.toLowerCase()) ||
           c.user_admin.toLowerCase().includes(search.toLowerCase());
  });

  const selected = CONVERSATIONS.find(c => c.thread_id === selectedThreadId) || filtered[0];

  return (
    <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%', minWidth: 0, overflow: 'hidden' }}>
      <div style={{
        width: 380, borderRight: '1px solid #E5E5E0', background: '#FAFAF9',
        display: 'flex', flexDirection: 'column', flexShrink: 0,
      }}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid #E5E5E0', background: '#FFFFFF' }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: '#17171A', marginBottom: 2 }}>對話檢視器</div>
          <div style={{ fontSize: 11, color: '#9098A3' }}>共 {CONVERSATIONS.length} 筆 · 已篩選 {filtered.length} 筆</div>
        </div>
        <div style={{ padding: '8px 12px', borderBottom: '1px solid #E5E5E0' }}>
          <input value={search} onChange={(e) => setSearch(e.target.value)}
            placeholder="搜尋標題、品牌、使用者..."
            style={{
              width: '100%', padding: '6px 10px', fontSize: 12,
              background: '#FFFFFF', border: '1px solid #E5E5E0', borderRadius: 4,
              color: '#17171A', outline: 'none',
            }} />
        </div>
        <div style={{ padding: '8px 12px', borderBottom: '1px solid #E5E5E0', display: 'flex', flexWrap: 'wrap', gap: 4 }}>
          {presets.map(p => (
            <button key={p.id} onClick={() => setPreset(p.id)}
              style={{
                padding: '3px 8px', fontSize: 10.5, borderRadius: 3,
                color: preset === p.id ? '#7A6E00' : '#5C6470',
                background: preset === p.id ? '#FFFAB8' : '#FFFFFF',
                border: `1px solid ${preset === p.id ? '#FFE600' : '#E5E5E0'}`,
                fontWeight: preset === p.id ? 600 : 400,
                display: 'flex', alignItems: 'center', gap: 5,
              }}>
              {p.color && <span style={{ width: 5, height: 5, borderRadius: '50%', background: p.color }}></span>}
              {p.label}
            </button>
          ))}
        </div>

        <div style={{ flex: 1, overflow: 'auto' }} className="scroll">
          {filtered.slice(0, 80).map(c => (
            <ConvoListItem key={c.thread_id} convo={c}
              active={selected && selected.thread_id === c.thread_id}
              onClick={() => setSelectedThreadId(c.thread_id)} />
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'hidden' }}>
        {selected && <ConvoViewer convo={selected} />}
      </div>
    </div>
  );
}

// 軟刪 icon — 使用者刪了，admin 仍能讀。垃圾桶 SVG inline，避免拉 icon library。
function DeletedIcon({ size = 11, color = '#9098A3' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
    </svg>
  );
}

function ConvoListItem({ convo, active, onClick }) {
  const statusColor = {
    completed: '#15803D', errored: '#DC2626', looped: '#B45309',
    long: '#6D28D9', abandoned: '#9098A3',
  }[convo.status];
  const statusLabel = { completed: '完成', errored: '錯誤', looped: '迴圈', long: '過長', abandoned: '中斷' }[convo.status];
  const isDeleted = !!convo.deleted_at;
  const ago = (() => {
    const mins = Math.floor((Date.now() - convo.created_at.getTime()) / 60000);
    if (mins < 60) return mins + ' 分前';
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return hrs + ' 小時前';
    return Math.floor(hrs / 24) + ' 天前';
  })();
  const deletedTooltip = isDeleted
    ? `使用者於 ${convo.deleted_at.toISOString().slice(0, 19).replace('T', ' ')} UTC 刪除（admin 仍可閱讀）`
    : '';

  return (
    <button onClick={onClick}
      style={{
        display: 'block', width: '100%', textAlign: 'left',
        padding: '10px 14px',
        borderBottom: '1px solid #EEEEE9',
        borderLeft: active ? '2px solid #FFE600' : '2px solid transparent',
        paddingLeft: active ? 12 : 14,
        background: active ? '#FFFFFF' : 'transparent',
        // 已刪：整列降透明度，視覺上能掃過但不抓眼
        opacity: isDeleted ? 0.55 : 1,
      }}
      onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = '#F0F0EE'; }}
      onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0, flex: 1 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor, flexShrink: 0 }}></span>
          {isDeleted && (
            <span title={deletedTooltip} style={{ display: 'flex', alignItems: 'center' }}>
              <DeletedIcon size={11} color="#9098A3" />
            </span>
          )}
          <span style={{
            fontSize: 11.5,
            color: '#17171A',
            fontWeight: 500,
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            textDecoration: isDeleted ? 'line-through' : 'none',
          }}>{convo.title}</span>
        </div>
        <span style={{ fontSize: 10, color: '#9098A3', fontFamily: 'JetBrains Mono', flexShrink: 0 }}>{ago}</span>
      </div>
      <div style={{ fontSize: 10.5, color: '#5C6470', display: 'flex', alignItems: 'center', gap: 6 }}>
        <span title={`brand_idx=${convo.brand_id}`} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {convo.brand_display || convo.brand_id}
        </span>
        <span style={{ color: '#C5C5C0' }}>·</span>
        <span title={convo.user_admin_id ? `user_admin_idx=${convo.user_admin_id}` : ''} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {convo.user_admin}
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 5, fontSize: 10, color: '#9098A3', fontFamily: 'JetBrains Mono' }}>
        <span>{convo.msgCount} 訊息</span>
        <span>·</span>
        <span>{convo.toolCount} tools</span>
        <span>·</span>
        <span style={{ color: convo.cost > 0.3 ? '#B45309' : '#5C6470' }}>{fmtUSD(convo.cost, 4)}</span>
        <span style={{ marginLeft: 'auto', color: isDeleted ? '#9098A3' : statusColor }}>
          {isDeleted ? '已刪' : statusLabel}
        </span>
      </div>
    </button>
  );
}

function ConvoViewer({ convo }) {
  // 真實 thread：useEffect 拉 /api/conversations/:thread_id（從 LangGraph checkpointer 撈）
  const [messages, setMessages] = React.useState(null);  // null = loading, [] = 空, [...] = ok
  const [error, setError] = React.useState(null);
  const [showRaw, setShowRaw] = React.useState(null);
  const [selectedTurn, setSelectedTurn] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    setMessages(null);
    setError(null);
    setSelectedTurn(null);
    if (!convo || !convo.thread_id) return;
    window.AdminAPI.conversations.get(convo.thread_id)
      .then((data) => {
        if (!alive) return;
        const normalized = window.AdminDataLoader.normalizeMessages((data && data.messages) || []);
        setMessages(normalized);
      })
      .catch((e) => {
        if (!alive) return;
        console.error('load thread failed', e);
        setError(e.message || '載入失敗');
        setMessages([]);
      });
    return () => { alive = false; };
  }, [convo && convo.thread_id]);

  const full = {
    ...convo,
    messages: messages || [],
    // cacheHit 從 conversations.list 帶下來（real：cache_read / (input + cache_read)）
    // avgLatency 後端尚未 instrument per-message latency
    avgLatency: null,
    errors: error ? [{ code: 'LOAD_ERROR', message: error }] : null,
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{
        padding: '10px 16px', borderBottom: '1px solid #E5E5E0', background: '#FFFFFF',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {convo.deleted_at && (
              <span title={`使用者於 ${convo.deleted_at.toISOString().slice(0, 19).replace('T', ' ')} UTC 刪除（admin 仍可閱讀）`}
                style={{ display: 'flex', alignItems: 'center' }}>
                <DeletedIcon size={13} color="#B45309" />
              </span>
            )}
            <span style={{
              fontSize: 13.5, fontWeight: 600, color: '#17171A',
              textDecoration: convo.deleted_at ? 'line-through' : 'none',
            }}>{convo.title}</span>
            {convo.deleted_at && (
              <Pill color="amber">已刪</Pill>
            )}
            {convo.status !== 'completed' && (
              <Pill color={convo.status === 'errored' ? 'red' : convo.status === 'looped' ? 'amber' : 'gray'}>
                {{ errored: '錯誤', looped: '迴圈', long: '過長', abandoned: '中斷' }[convo.status]}
              </Pill>
            )}
          </div>
          <div style={{ fontSize: 11, color: '#9098A3', marginTop: 3, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span className="term" title={`thread_id=${convo.thread_id}`} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 280, fontSize: 10.5 }}>{convo.thread_id}</span>
            <span style={{ color: '#C5C5C0' }}>·</span>
            <span title={`brand_idx=${convo.brand_id}`}>{convo.brand_display || convo.brand_id}</span>
            <span style={{ color: '#C5C5C0' }}>·</span>
            <span title={convo.user_admin_id ? `user_admin_idx=${convo.user_admin_id}` : ''}>{convo.user_admin}</span>
            <span style={{ color: '#C5C5C0' }}>·</span>
            <span className="term" style={{ fontSize: 10.5 }}>{convo.created_at.toISOString().slice(0, 19).replace('T', ' ')} UTC</span>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 280px', overflow: 'hidden' }}>
        <div style={{ overflow: 'auto', padding: '16px 20px', background: '#FAFAF9', minWidth: 0 }} className="scroll">
          {messages == null ? (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#9098A3', fontSize: 12 }}>
              <span className="spinner" style={{ width: 18, height: 18, border: '2px solid #E5E5E0', borderTopColor: '#FFE600', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite', marginRight: 10 }}></span>
              載入對話中...
            </div>
          ) : error ? (
            <div style={{ padding: 24, color: '#DC2626', fontSize: 12 }}>對話載入失敗：{error}</div>
          ) : messages.length === 0 ? (
            <div style={{ padding: 24, color: '#9098A3', fontSize: 12 }}>此 thread 沒有訊息（可能尚未存進 checkpointer）</div>
          ) : messages.map((m, i) => (
            <Message key={i} msg={m} idx={i} convo={full}
              showRaw={showRaw === i}
              setShowRaw={() => setShowRaw(showRaw === i ? null : i)}
              selected={selectedTurn === i}
              onSelect={() => setSelectedTurn(selectedTurn === i ? null : i)}
            />
          ))}
        </div>

        <ConvoSidebar convo={full} selectedTurn={selectedTurn} />
      </div>
    </div>
  );
}

function Message({ msg, idx, convo, showRaw, setShowRaw, selected, onSelect }) {
  const roleCfg = {
    system:    { bg: '#F0F0EE', border: '#D4D4CF', label: '系統提示', color: '#5C6470' },
    user:      { bg: '#DBEAFE', border: '#93C5FD', label: '使用者', color: '#1D4ED8' },
    assistant: { bg: '#FFFFFF', border: '#E5E5E0', label: 'AI 助理', color: '#17171A' },
    tool:      { bg: '#EDE9FE', border: '#C4B5FD', label: '工具結果', color: '#6D28D9' },
  }[msg.role];

  return (
    <div onClick={onSelect} style={{
      marginBottom: 10, cursor: 'pointer',
      outline: selected ? '2px solid #FFE600' : 'none',
      outlineOffset: 2,
      borderRadius: 6,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5, fontSize: 10.5, color: '#9098A3', fontFamily: 'JetBrains Mono' }}>
        <span style={{
          padding: '1px 6px', borderRadius: 3,
          background: roleCfg.bg, color: roleCfg.color, border: `1px solid ${roleCfg.border}`,
          fontWeight: 600, fontSize: 9.5, letterSpacing: '0.04em',
        }}>{roleCfg.label}</span>
        <span>turn {idx}</span>
        <span>·</span>
        <span>{msg.timestamp}</span>
        {msg.model && <><span>·</span><span style={{ color: '#5C6470' }}>{msg.model}</span></>}
        {msg.tokens && <><span>·</span><span>{msg.tokens.input}↓ {msg.tokens.output}↑</span></>}
        {msg.cost && <><span>·</span><span style={{ color: msg.cost > 0.05 ? '#B45309' : '#5C6470' }}>{fmtUSD(msg.cost, 4)}</span></>}
        {msg.latency_ms && <><span>·</span><span>{msg.latency_ms}ms</span></>}
        <button onClick={(e) => { e.stopPropagation(); setShowRaw(); }}
          style={{ marginLeft: 'auto', fontSize: 10, color: '#9098A3', textDecoration: 'underline' }}>
          {showRaw ? '隱藏 raw' : '顯示 raw'}
        </button>
      </div>

      <div style={{
        padding: '10px 13px',
        background: roleCfg.bg, border: `1px solid ${roleCfg.border}`, borderRadius: 5,
        fontSize: 12.5, color: '#17171A', lineHeight: 1.55,
      }}>
        {msg.content && <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{msg.content}</div>}

        {msg.tool_calls && msg.tool_calls.map((tc, ti) => (
          <ToolCallBlock key={ti} tc={tc} />
        ))}

        {/* role=tool 已在 normalize 階段被 merge 進上一則 assistant 的 tool_calls[].result，
            這裡不再有 standalone tool message 要渲染；保留 fallback 防舊資料 */}

        {showRaw && (
          <pre style={{
            marginTop: 8, padding: 8, background: '#17171A', borderRadius: 4,
            fontFamily: 'JetBrains Mono', fontSize: 10.5, color: '#FFE600',
            overflow: 'auto', maxHeight: 200,
          }}>{JSON.stringify(msg, null, 2)}</pre>
        )}
      </div>
    </div>
  );
}

function ToolResultBlock({ result, hasContent }) {
  const [open, setOpen] = React.useState(false);
  const preview = result.preview || '';
  const charCount = preview.length;
  return (
    <div style={{ marginTop: hasContent ? 8 : 0 }}>
      <button onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
        style={{
          width: '100%', textAlign: 'left',
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '4px 0',
          fontSize: 10, fontFamily: 'JetBrains Mono', fontWeight: 600,
          color: '#6D28D9',
        }}>
        <span style={{ color: '#9098A3' }}>{open ? '▼' : '▶'}</span>
        <span>← {result.name}</span>
        <span style={{ marginLeft: 'auto', color: '#9098A3', fontWeight: 400 }}>
          {open ? '收起' : `展開 (${charCount} 字元)`}
        </span>
      </button>
      {open && (
        <pre style={{
          fontFamily: 'JetBrains Mono', fontSize: 11,
          background: '#FFFFFF', padding: 8, borderRadius: 4,
          color: '#17171A', overflow: 'auto', margin: '4px 0 0', border: '1px solid #C4B5FD',
          maxHeight: 320,
          whiteSpace: 'pre-wrap', wordBreak: 'break-word',
        }}>{preview}</pre>
      )}
    </div>
  );
}

function ToolCallBlock({ tc }) {
  const [open, setOpen] = React.useState(false);
  // tc.result 由 normalize 階段 merge 自 ToolMessage（依 tool_call_id 配對）
  const argsKeys = tc.args && typeof tc.args === 'object' ? Object.keys(tc.args) : [];
  const argsJSON = argsKeys.length ? JSON.stringify(tc.args, null, 2) : '(無參數)';
  const outputText = tc.result && tc.result.preview ? tc.result.preview : null;
  const outputLen = outputText ? outputText.length : 0;

  return (
    <div style={{
      marginTop: 8, border: '1px solid #C4B5FD', borderRadius: 4, background: '#FAFAF9',
    }}>
      <button onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
        style={{
          width: '100%', textAlign: 'left', padding: '6px 10px',
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 11,
        }}>
        <span style={{ color: '#9098A3' }}>{open ? '▼' : '▶'}</span>
        <span className="term" style={{ color: '#6D28D9', fontWeight: 600 }}>{tc.name}</span>
        {argsKeys.length > 0 && (
          <span className="term" style={{ color: '#9098A3', fontSize: 10 }}>({argsKeys.join(', ')})</span>
        )}
        <span style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
          {outputText != null
            ? <span style={{ color: '#15803D', fontSize: 10 }}>↩ {outputLen} 字元</span>
            : <span style={{ color: '#9098A3', fontSize: 10 }}>無回傳</span>}
        </span>
      </button>
      {open && (
        <div style={{ borderTop: '1px solid #E5E5E0' }}>
          <ToolPanel label="Input" json={argsJSON} accentColor="#6D28D9" />
          {outputText != null && (
            <ToolPanel label="Output" json={outputText} accentColor="#15803D" preformatted />
          )}
        </div>
      )}
    </div>
  );
}

function ToolPanel({ label, json, accentColor, preformatted }) {
  return (
    <div style={{ borderBottom: '1px solid #EEEEE9' }}>
      <div style={{
        padding: '4px 10px',
        fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase',
        color: accentColor, background: '#FAFAF9',
      }}>{label}</div>
      <pre className="term" style={{
        margin: 0, padding: '6px 10px', fontSize: 10.5,
        background: '#FFFFFF', color: '#17171A',
        overflow: 'auto', maxHeight: 240,
        whiteSpace: preformatted ? 'pre-wrap' : 'pre',
        wordBreak: preformatted ? 'break-word' : 'normal',
      }}>{json}</pre>
    </div>
  );
}

function ConvoSidebar({ convo, selectedTurn }) {
  // 真實值來自 conversations.list 聚合（agent_token_usage SUM）。
  // checkpointer 沒帶 per-message token / cost / latency，所以 sidebar 用整體聚合。
  const totalIn = +(convo.tokensInput || 0);
  const totalOut = +(convo.tokensOutput || 0);
  const cacheRead = +(convo.tokensCacheRead || 0);
  const cacheCreate = +(convo.tokensCacheCreate || 0);
  const cacheHit = +(convo.cacheHit || 0);

  const tools = {};
  convo.messages.forEach(m => {
    (m.tool_calls || []).forEach(tc => { tools[tc.name] = (tools[tc.name] || 0) + 1; });
  });

  const turn = selectedTurn != null ? convo.messages[selectedTurn] : null;

  return (
    <div style={{
      borderLeft: '1px solid #E5E5E0', background: '#FFFFFF', overflow: 'auto',
      padding: '14px 14px',
    }} className="scroll">
      <SectionHeader>對話總計</SectionHeader>
      <Row label="費用" value={fmtUSD(convo.cost, 4)} mono highlight />
      <Row label="總訊息" value={convo.msgCount} mono />
      <Row label="輸入 Token" value={fmtCompact(totalIn)} mono />
      <Row label="輸出 Token" value={fmtCompact(totalOut)} mono />
      <Row label="Cache 讀取" value={fmtCompact(cacheRead)} mono />
      <Row label="Cache 建立" value={fmtCompact(cacheCreate)} mono />
      <Row label="Cache 命中" value={fmtPct(cacheHit)} mono />
      <Row label="平均延遲" value={convo.avgLatency != null ? convo.avgLatency + 'ms' : '—'} mono />
      <Row label="使用模型" value={convo.model || '—'} mono small />

      <SectionHeader style={{ marginTop: 18 }}>使用工具</SectionHeader>
      {Object.entries(tools).map(([name, count]) => (
        <Row key={name} label={name} value={count + '×'} mono small />
      ))}
      {Object.keys(tools).length === 0 && <div style={{ fontSize: 11, color: '#9098A3' }}>未使用工具</div>}

      {convo.errors && convo.errors.length > 0 && (
        <>
          <SectionHeader style={{ marginTop: 18, color: '#DC2626' }}>錯誤</SectionHeader>
          {convo.errors.map((e, i) => (
            <div key={i} style={{ padding: 7, background: '#FEE2E2', borderRadius: 4, marginBottom: 5, fontFamily: 'JetBrains Mono', fontSize: 10.5, color: '#DC2626', border: '1px solid #FCA5A5' }}>
              <div style={{ fontWeight: 600 }}>{e.code}</div>
              <div style={{ color: '#B91C1C', marginTop: 2 }}>{e.message}</div>
            </div>
          ))}
        </>
      )}

      {turn && turn.tokens && (
        <>
          <SectionHeader style={{ marginTop: 18, color: '#7A6E00' }}>已選 turn {selectedTurn}</SectionHeader>
          <Row label="角色" value={turn.role} small />
          <Row label="輸入 Token" value={fmtCompact(turn.tokens.input)} mono small />
          <Row label="輸出 Token" value={fmtCompact(turn.tokens.output)} mono small />
          {turn.tokens.cache_read && <Row label="Cache 讀取" value={fmtCompact(turn.tokens.cache_read)} mono small />}
          {turn.cost && <Row label="費用" value={fmtUSD(turn.cost, 5)} mono small />}
          {turn.latency_ms && <Row label="延遲" value={turn.latency_ms + 'ms'} mono small />}
        </>
      )}
    </div>
  );
}

function SectionHeader({ children, style }) {
  return (
    <div style={{
      fontSize: 9.5, color: '#9098A3', textTransform: 'uppercase',
      letterSpacing: '0.12em', fontFamily: 'JetBrains Mono',
      marginBottom: 6, fontWeight: 600,
      ...style,
    }}>{children}</div>
  );
}

function Row({ label, value, mono, small, highlight }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', fontSize: small ? 11 : 12 }}>
      <span style={{ color: '#5C6470' }}>{label}</span>
      <span style={{
        color: highlight ? '#7A6E00' : '#17171A',
        fontFamily: mono ? 'JetBrains Mono' : 'inherit',
        fontWeight: highlight ? 600 : 400,
      }}>{value}</span>
    </div>
  );
}

window.PageConversations = PageConversations;