/* ============================================================
   Screen 2 — Murojaatlar (Inquiry Inbox)
   All dynamic data fetched from the Worker via useApi.
   ============================================================ */

const PAGE_SIZE = 30;

function ScreenInbox() {
  const [filters, setFilters] = useState({
    topics: new Set(),
    statuses: new Set(),
    priorities: new Set(),
    regions: new Set(),
    languages: new Set(),
    sentiment: new Set(),
    keyword: '',
  });
  const [sort, setSort] = useState({ col: 'created_at', dir: 'desc' });
  const [expanded, setExpanded] = useState(null);
  const [selection, setSelection] = useState(new Set());
  const [page, setPage] = useState(0);

  const toggleSet = (key, val) => {
    setFilters(f => {
      const s = new Set(f[key]);
      s.has(val) ? s.delete(val) : s.add(val);
      return { ...f, [key]: s };
    });
    setPage(0);
  };

  // Build the query string from filters/sort/page.
  // Worker accepts a single value per filter, so when user picks multiple
  // we just send the first (a future enhancement is OR-set support).
  const qs = useMemo(() => {
    const p = new URLSearchParams();
    p.set('limit', String(PAGE_SIZE));
    p.set('offset', String(page * PAGE_SIZE));
    p.set('sort_col', sort.col);
    p.set('sort_dir', sort.dir);
    if (filters.topics.size)    p.set('topic',     [...filters.topics][0]);
    if (filters.statuses.size)  p.set('status',    [...filters.statuses][0]);
    if (filters.priorities.size) p.set('priority', [...filters.priorities][0]);
    if (filters.regions.size)   p.set('region',    [...filters.regions][0]);
    if (filters.languages.size) p.set('language',  [...filters.languages][0]);
    if (filters.sentiment.size) p.set('sentiment', [...filters.sentiment][0]);
    if (filters.keyword.trim()) p.set('keyword',   filters.keyword.trim());
    return p.toString();
  }, [filters, sort, page]);

  // Live data
  const inq      = useApi('/api/inquiries?' + qs, { pollMs: 10000 });
  const byTopic  = useApi('/api/stats/by-topic',  { pollMs: 30000 });
  const byRegion = useApi('/api/stats/by-region', { pollMs: 30000 });
  const funnel   = useApi('/api/stats/funnel',    { pollMs: 30000 });

  const items = inq.data?.items || [];
  const total = inq.data?.total || 0;
  const aggregates = inq.data?.aggregates || { by_status: {}, by_priority: {} };

  // Filter-rail counts
  const topicCounts  = useMemo(() => Object.fromEntries((byTopic.data?.items  || []).map(t => [t.id, t.total])), [byTopic.data]);
  const regionCounts = useMemo(() => Object.fromEntries((byRegion.data?.items || []).map(r => [r.id, r.total])), [byRegion.data]);
  const statusTotals = useMemo(() => Object.fromEntries((funnel.data?.items   || []).map(s => [s.status, s.n])), [funnel.data]);

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
  const clearFilters = () => {
    setFilters({
      topics: new Set(), statuses: new Set(), priorities: new Set(),
      regions: new Set(), languages: new Set(), sentiment: new Set(),
      keyword: '',
    });
    setPage(0);
  };

  const sortBy = (col) => {
    setSort(s => ({ col, dir: s.col === col && s.dir === 'desc' ? 'asc' : 'desc' }));
    setPage(0);
  };
  const sortArrow = (col) => sort.col !== col ? '' : (sort.dir === 'asc' ? '↑' : '↓');

  return (
    <div className="page" style={{ maxWidth: '100%' }}>
      <div className="page-head">
        <div>
          <div className="page-crumbs">
            <span>Asosiy</span><span>/</span><span style={{ color: 'var(--ink-2)' }}>Murojaatlar</span>
          </div>
          <h1 className="page-title">Murojaatlar<span className="ru">Обращения · Inquiry inbox</span></h1>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={inq.refresh}><Icon name="refresh" size={12} /> Yangilash</button>
          <button className="btn"><Icon name="download" size={12} /> Eksport (CSV)</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 16 }}>
        {/* FILTER RAIL */}
        <aside className="filter-rail">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14, paddingBottom: 10, borderBottom: '1px solid var(--line)' }}>
            <span style={{ fontWeight: 600, fontSize: 12 }}>Filtrlar</span>
            <button className="btn btn-ghost btn-sm" onClick={clearFilters}>Tozalash</button>
          </div>

          <div className="filter-group">
            <div className="filter-label">Kalit soʻz</div>
            <input
              className="input"
              placeholder="Matn yoki ID…"
              value={filters.keyword}
              onChange={e => { setFilters(f => ({ ...f, keyword: e.target.value })); setPage(0); }}
            />
          </div>

          <div className="filter-group">
            <div className="filter-label">Mavzu</div>
            <div className="filter-options">
              {TOPICS.map(t => (
                <label key={t.id} className="filter-opt">
                  <input type="checkbox" checked={filters.topics.has(t.id)} onChange={() => toggleSet('topics', t.id)} />
                  <span style={{ width: 8, height: 8, background: t.color, borderRadius: 2, display: 'inline-block' }} />
                  <span style={{ flex: 1 }}>{t.uz}</span>
                  <span className="count">{topicCounts[t.id] ?? 0}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <div className="filter-label">Holat</div>
            <div className="filter-options">
              {Object.entries({ new: 'Yangi', classified: 'Tasniflandi', routed: 'Yoʻnaltirildi', answered: 'Javob berildi', resolved: 'Hal etildi' }).map(([k, lbl]) => (
                <label key={k} className="filter-opt">
                  <input type="checkbox" checked={filters.statuses.has(k)} onChange={() => toggleSet('statuses', k)} />
                  <span style={{ flex: 1 }}>{lbl}</span>
                  <span className="count">{statusTotals[k] ?? 0}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <div className="filter-label">Prioritet</div>
            <div className="filter-options">
              {Object.entries({ urgent: 'Shoshilinch', high: 'Yuqori', medium: 'Oʻrtacha', low: 'Past' }).map(([k, lbl]) => (
                <label key={k} className="filter-opt">
                  <input type="checkbox" checked={filters.priorities.has(k)} onChange={() => toggleSet('priorities', k)} />
                  <span style={{ flex: 1 }}>{lbl}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <div className="filter-label">Hudud</div>
            <div className="filter-options">
              {REGIONS.map(r => (
                <label key={r.id} className="filter-opt">
                  <input type="checkbox" checked={filters.regions.has(r.id)} onChange={() => toggleSet('regions', r.id)} />
                  <span style={{ flex: 1 }}>{r.uz}</span>
                  <span className="count">{regionCounts[r.id] ?? 0}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <div className="filter-label">Til</div>
            <div className="filter-options">
              {Object.entries({ 'uz-latn': 'Oʻzbek (Lotin)', 'uz-cyrl': 'Oʻzbek (Kirill)', 'ru': 'Rus', 'mixed': 'Aralash' }).map(([k, lbl]) => (
                <label key={k} className="filter-opt">
                  <input type="checkbox" checked={filters.languages.has(k)} onChange={() => toggleSet('languages', k)} />
                  <span style={{ flex: 1 }}>{lbl}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <div className="filter-label">Sentiment</div>
            <div className="filter-options">
              {[['negative', 'Salbiy', 'rose'], ['neutral', 'Neytral', 'ink-4'], ['positive', 'Ijobiy', 'jade']].map(([k, lbl, c]) => (
                <label key={k} className="filter-opt">
                  <input type="checkbox" checked={filters.sentiment.has(k)} onChange={() => toggleSet('sentiment', k)} />
                  <span style={{ width: 8, height: 8, background: `var(--${c})`, borderRadius: '50%', display: 'inline-block' }} />
                  <span style={{ flex: 1 }}>{lbl}</span>
                </label>
              ))}
            </div>
          </div>
        </aside>

        {/* RIGHT — analytics strip + table */}
        <div style={{ minWidth: 0 }}>
          {/* Analytics strip — from filtered aggregates */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.9fr 0.9fr', gap: 12, marginBottom: 14 }}>
            <Panel title="Holat boʻyicha" sub="filterlangan toʻplam" actions={false}>
              <StackedHorizBar
                segments={[
                  { label: 'Yangi',         value: aggregates.by_status.new        || 0, color: 'var(--accent)' },
                  { label: 'Tasniflandi',   value: aggregates.by_status.classified || 0, color: 'var(--plum)' },
                  { label: 'Yoʻnaltirildi', value: aggregates.by_status.routed     || 0, color: 'var(--amber)' },
                  { label: 'Javob berildi', value: aggregates.by_status.answered   || 0, color: 'var(--ink-4)' },
                  { label: 'Hal etildi',    value: aggregates.by_status.resolved   || 0, color: 'var(--jade)' },
                ]}
              />
            </Panel>

            <Panel title="Prioritet" sub="filterlangan" actions={false}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <Donut
                  size={84}
                  data={[
                    { id: 'urgent', label: 'Shoshilinch', value: aggregates.by_priority.urgent || 0, color: 'var(--rose)' },
                    { id: 'high',   label: 'Yuqori',      value: aggregates.by_priority.high   || 0, color: 'var(--amber)' },
                    { id: 'medium', label: 'Oʻrtacha',    value: aggregates.by_priority.medium || 0, color: 'var(--ink-4)' },
                    { id: 'low',    label: 'Past',        value: aggregates.by_priority.low    || 0, color: 'var(--ink-5)' },
                  ]}
                  label="ta"
                />
                <div style={{ fontSize: 10.5, display: 'flex', flexDirection: 'column', gap: 3 }}>
                  <span><span style={{ width: 6, height: 6, background: 'var(--rose)', display: 'inline-block', marginRight: 4 }} />Shosh {aggregates.by_priority.urgent || 0}</span>
                  <span><span style={{ width: 6, height: 6, background: 'var(--amber)', display: 'inline-block', marginRight: 4 }} />Yuq {aggregates.by_priority.high || 0}</span>
                  <span><span style={{ width: 6, height: 6, background: 'var(--ink-4)', display: 'inline-block', marginRight: 4 }} />Oʻrt {aggregates.by_priority.medium || 0}</span>
                  <span><span style={{ width: 6, height: 6, background: 'var(--ink-5)', display: 'inline-block', marginRight: 4 }} />Past {aggregates.by_priority.low || 0}</span>
                </div>
              </div>
            </Panel>

            <Panel title="Hisoblagich" sub="bu filterlash" actions={false}>
              <div className="mono" style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>
                {formatNum(total)}
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>
                {anyFilterActive(filters) ? 'filtr faol' : 'butun korpus'}
              </div>
              <div style={{ marginTop: 6, fontSize: 10, color: 'var(--ink-4)' }}>
                sahifa {page + 1} / {totalPages}
              </div>
            </Panel>
          </div>

          {/* Bulk action bar */}
          {selection.size > 0 && (
            <div style={{ background: 'var(--ink)', color: 'var(--bg)', padding: '8px 14px', borderRadius: 6, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{selection.size} ta tanlandi</span>
              <span style={{ flex: 1 }} />
              <button className="btn btn-sm" style={{ background: 'transparent', border: '1px solid oklch(0.5 0.012 250)', color: 'var(--bg)' }}>Yoʻnaltirish</button>
              <button className="btn btn-sm" style={{ background: 'transparent', border: '1px solid oklch(0.5 0.012 250)', color: 'var(--bg)' }}>Qayta tasniflash</button>
              <button className="btn btn-sm" style={{ background: 'transparent', color: 'var(--bg)', border: 0 }} onClick={() => setSelection(new Set())}>
                <Icon name="x" size={12} />
              </button>
            </div>
          )}

          {/* Table */}
          <Panel
            title="Murojaatlar jadvali"
            sub={`${formatNum(total)} ta natija · sahifa ${page + 1}/${totalPages}${inq.loading ? ' · yuklanmoqda…' : ''}`}
            actions={
              <>
                <button className="btn btn-ghost btn-sm" title="Ustunlar"><Icon name="grid3" size={12} /></button>
                <button className="btn btn-ghost btn-sm" title="Yuklab olish"><Icon name="download" size={12} /></button>
              </>
            }
            body={false}
          >
            <div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th className="checkbox">
                      <input
                        type="checkbox"
                        checked={selection.size === items.length && items.length > 0}
                        onChange={(e) => {
                          if (e.target.checked) setSelection(new Set(items.map(i => i.id)));
                          else setSelection(new Set());
                        }}
                      />
                    </th>
                    <th onClick={() => sortBy('created_at')} style={{ cursor: 'pointer', width: 64 }}>Vaqt {sortArrow('created_at')}</th>
                    <th style={{ width: 180 }}>Mavzu</th>
                    <th style={{ width: 170 }}>Fermer</th>
                    <th>Savol</th>
                    <th style={{ width: 110 }}>Holat</th>
                    <th style={{ width: 36 }} />
                  </tr>
                </thead>
                <tbody>
                  {items.length === 0 && !inq.loading && (
                    <tr>
                      <td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--ink-4)', fontSize: 12 }}>
                        Murojaatlar topilmadi. {anyFilterActive(filters) ? 'Filtrni tozalab koʻring.' : 'Bot orqali yuborilgach paydo boʻladi.'}
                      </td>
                    </tr>
                  )}
                  {items.map(inq => {
                    const t = inq.topic_id ? TOPIC_BY_ID[inq.topic_id] : null;
                    const region = inq.region_id ? REGION_BY_ID[inq.region_id] : null;
                    const ts = new Date(inq.created_at * 1000);
                    const isExp = expanded === inq.id;
                    return (
                      <React.Fragment key={inq.id}>
                        <tr className={isExp ? 'expanded' : ''}>
                          <td className="checkbox">
                            <input type="checkbox" checked={selection.has(inq.id)} onChange={() => {
                              const s = new Set(selection);
                              s.has(inq.id) ? s.delete(inq.id) : s.add(inq.id);
                              setSelection(s);
                            }} />
                          </td>
                          <td className="num" style={{ fontSize: 10.5 }}>
                            <div style={{ color: 'var(--ink)' }}>{formatRel(ts)}</div>
                            <div style={{ color: 'var(--ink-4)', fontSize: 9.5 }}>
                              {String(ts.getHours()).padStart(2, '0')}:{String(ts.getMinutes()).padStart(2, '0')}
                            </div>
                          </td>
                          <td>
                            {t ? (
                              <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
                                <TopicMark topicId={inq.topic_id} size={16} />
                                <div style={{ minWidth: 0 }}>
                                  <div style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.uz}</div>
                                  {inq.sub_topic && <div style={{ fontSize: 10, color: 'var(--ink-4)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{inq.sub_topic}</div>}
                                </div>
                              </div>
                            ) : (
                              <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>—</span>
                            )}
                          </td>
                          <td>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
                              <Avatar name={inq.farmer_name} size={22} />
                              <div style={{ minWidth: 0 }}>
                                <div style={{ fontSize: 11.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{inq.farmer_name}</div>
                                <div className="num" style={{ fontSize: 9.5, color: 'var(--ink-4)' }}>
                                  {region?.code || '—'} · {inq.id}
                                </div>
                              </div>
                            </div>
                          </td>
                          <td>
                            <div style={{ fontSize: 11.5, lineHeight: 1.4, color: 'var(--ink-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                              {inq.text}
                            </div>
                            <div style={{ display: 'flex', gap: 4, marginTop: 3, alignItems: 'center' }}>
                              {inq.sentiment && (
                                <span title={inq.sentiment} style={{
                                  background: inq.sentiment === 'negative' ? 'var(--rose)' : inq.sentiment === 'positive' ? 'var(--jade)' : 'var(--ink-4)',
                                  display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
                                }} />
                              )}
                              {inq.language && (
                                <span className="chip" style={{ fontSize: 9.5 }}>
                                  {inq.language === 'uz-latn' ? 'UZ-L' : inq.language === 'uz-cyrl' ? 'УЗ-К' : inq.language === 'ru' ? 'RU' : 'MX'}
                                </span>
                              )}
                              {inq.intent && (
                                <span className="chip" style={{ fontSize: 9.5 }}>
                                  {inq.intent === 'question' ? 'savol' : inq.intent === 'complaint' ? 'shikoyat' : inq.intent === 'feedback' ? 'fikr' : 'shovqin'}
                                </span>
                              )}
                              {inq.priority === 'urgent' && <PriorityChip p="urgent" />}
                            </div>
                          </td>
                          <td><StatusChip s={inq.status} /></td>
                          <td>
                            <button className="btn btn-ghost btn-sm" onClick={() => setExpanded(isExp ? null : inq.id)}>
                              {isExp ? '×' : '↧'}
                            </button>
                          </td>
                        </tr>
                        {isExp && (
                          <tr>
                            <td colSpan={7} style={{ padding: 0 }}>
                              <RowExpand inq={inq} region={region} topic={t} />
                            </td>
                          </tr>
                        )}
                      </React.Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* Pagination */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderTop: '1px solid var(--line)', fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>
              <span style={{ color: 'var(--ink-3)' }}>
                {total === 0 ? '0' : `${page * PAGE_SIZE + 1}–${Math.min((page + 1) * PAGE_SIZE, total)}`} / {formatNum(total)}
              </span>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                <button className="btn btn-sm" disabled={page === 0} onClick={() => setPage(0)}>«</button>
                <button className="btn btn-sm" disabled={page === 0} onClick={() => setPage(p => p - 1)}>‹</button>
                <span style={{ padding: '0 6px' }}>{page + 1} / {totalPages}</span>
                <button className="btn btn-sm" disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)}>›</button>
                <button className="btn btn-sm" disabled={page >= totalPages - 1} onClick={() => setPage(totalPages - 1)}>»</button>
              </div>
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Helpers
// ============================================================
function anyFilterActive(f) {
  return (
    f.topics.size || f.statuses.size || f.priorities.size ||
    f.regions.size || f.languages.size || f.sentiment.size ||
    f.keyword.trim()
  );
}

function StackedHorizBar({ segments }) {
  const total = segments.reduce((s, x) => s + x.value, 0) || 1;
  return (
    <div>
      <div style={{ display: 'flex', height: 16, borderRadius: 3, overflow: 'hidden', background: 'var(--bg-sunken)' }}>
        {segments.map((s, i) => (
          <div key={i} style={{ width: `${(s.value / total) * 100}%`, background: s.color }} title={`${s.label}: ${s.value}`} />
        ))}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 10px', marginTop: 8, fontSize: 10.5 }}>
        {segments.map((s, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 7, height: 7, background: s.color }} />
            <span style={{ color: 'var(--ink-2)' }}>{s.label}</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-4)' }}>{formatNum(s.value)}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function RowExpand({ inq, region, topic }) {
  return (
    <div className="row-expand">
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 }}>
        {/* Message + AI rationale */}
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--ink-3)', marginBottom: 6 }}>
            Toʻliq xabar
          </div>
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 4, padding: 12, fontSize: 12.5, lineHeight: 1.55, color: 'var(--ink)' }}>
            {inq.text}
          </div>

          <div style={{ marginTop: 12 }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--ink-3)', marginBottom: 6 }}>
              AI mulohazasi
            </div>
            <div style={{ background: 'var(--bg)', border: '1px dashed var(--line-strong)', borderRadius: 4, padding: 10, fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              {topic ? (
                <>
                  <strong style={{ color: 'var(--accent-ink)' }}>{topic.uz}</strong> deb tasniflandi:
                  <ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
                    {inq.sub_topic && <li>Pastki kategoriya: <span className="mono">{inq.sub_topic}</span></li>}
                    {inq.language && <li>Til: <span className="mono">{inq.language.toUpperCase()}</span></li>}
                    {region && <li>Hudud: <span className="mono">{region.uz}</span></li>}
                    {inq.confidence != null && <li>Ishonchlilik: <span className="mono">{(inq.confidence * 100).toFixed(1)}%</span></li>}
                    {inq.ai_latency_ms && <li>AI kechikish: <span className="mono">{inq.ai_latency_ms} ms</span></li>}
                  </ul>
                </>
              ) : (
                <span style={{ color: 'var(--ink-4)' }}>Hali tasniflanmagan.</span>
              )}
            </div>
          </div>
        </div>

        {/* Metadata + actions */}
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--ink-3)', marginBottom: 6 }}>
            Meta
          </div>
          <div style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 4, padding: 12, fontSize: 11, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            <div><span style={{ color: 'var(--ink-4)' }}>ID:</span> <span className="mono">{inq.id}</span></div>
            <div><span style={{ color: 'var(--ink-4)' }}>Yuboruvchi:</span> {inq.farmer_name}</div>
            <div><span style={{ color: 'var(--ink-4)' }}>Telegram chat:</span> <span className="mono">{inq.tg_chat_id ?? '—'}</span></div>
            <div><span style={{ color: 'var(--ink-4)' }}>Holat:</span> {inq.status}</div>
            <div><span style={{ color: 'var(--ink-4)' }}>Sentiment:</span> {inq.sentiment ?? '—'}</div>
            <div><span style={{ color: 'var(--ink-4)' }}>Prioritet:</span> {inq.priority ?? '—'}</div>
            <div><span style={{ color: 'var(--ink-4)' }}>Niyat:</span> {inq.intent ?? '—'}</div>
          </div>

          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            <button className="btn btn-sm">Qayta yoʻnaltirish</button>
            <button className="btn btn-sm">Qayta tasniflash</button>
            <button className="btn btn-sm">Eskalatsiya</button>
            <button className="btn btn-sm btn-primary">Hal etildi</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenInbox = ScreenInbox;