/* ============================================================
   Screen 8 — Hisobotlar (Reports & Exports)
   ============================================================ */

function ScreenReports() {
  const [sections, setSections] = useState({
    kpi: true, topics: true, regional: true, ai: true, team: true, inquiries: false,
  });
  const [dateFrom, setDateFrom] = useState('2026-04-14');
  const [dateTo, setDateTo] = useState('2026-05-14');
  const [reportLang, setReportLang] = useState('uz-latn');
  const [format, setFormat] = useState('pdf');
  const [includeRaw, setIncludeRaw] = useState(false);

  const SECTIONS = [
    { id: 'kpi',       uz: 'Asosiy ko\'rsatkichlar', ru: 'KPI',           pages: 2 },
    { id: 'topics',    uz: 'Mavzular tahlili',        ru: 'Темы',          pages: 4 },
    { id: 'regional',  uz: 'Hududiy tahlil',          ru: 'Регионы',       pages: 3 },
    { id: 'ai',        uz: 'AI ishlashi',             ru: 'AI-анализ',     pages: 3 },
    { id: 'team',      uz: 'Tahlilchilar jamoasi',    ru: 'Аналитики',     pages: 2 },
    { id: 'inquiries', uz: 'To\'liq murojaatlar',     ru: 'Все обращения', pages: 24 },
  ];

  const totalPages = SECTIONS.filter(s => sections[s.id]).reduce((a, s) => a + s.pages, 0) + (includeRaw ? 8 : 0);

  // Quick reports
  const QUICK = [
    { id: 'today',   uz: 'Bugun',          range: 'Bugun',                metric: TODAY_COUNT, label: 'ta murojaat' },
    { id: 'week',    uz: 'Bu hafta',       range: 'So\'nggi 7 kun',       metric: INQUIRIES.filter(i => i.dayOffset < 7).length, label: 'ta murojaat' },
    { id: 'month',   uz: 'Bu oy',          range: 'May 2026',             metric: INQUIRIES.filter(i => i.dayOffset < 30).length, label: 'ta murojaat' },
    { id: 'quarter', uz: 'Chorak hisoboti',range: 'Q2 2026',              metric: INQUIRIES.filter(i => i.dayOffset < 90).length, label: 'ta murojaat' },
  ];

  // Scheduled
  const SCHEDULED = [
    { id: 'sch1', name: 'Vazir uchun haftalik xulosa',   freq: 'Har dushanba · 08:00', recipients: ['minister@mof.uz', 'oziq.deputy@mof.uz'], sections: ['kpi', 'topics', 'regional'], next: 'Dushanba · 08:00', lang: 'UZ-L', fmt: 'PDF', active: true },
    { id: 'sch2', name: 'Bo\'lim boshliqlari kunlik',     freq: 'Har kuni · 18:00',     recipients: ['heads@mof.uz'], sections: ['kpi', 'inquiries'], next: 'Bugun · 18:00', lang: 'UZ-L', fmt: 'XLSX', active: true },
    { id: 'sch3', name: 'AI nazorat haftalik',            freq: 'Har juma · 12:00',     recipients: ['ai-team@mof.uz', 'f.tojiyeva@mof.uz'], sections: ['ai', 'team'], next: 'Juma · 12:00', lang: 'UZ-L', fmt: 'PDF', active: true },
    { id: 'sch4', name: 'Hududiy hokimlikka', freq: 'Har oy · 1-kun · 09:00', recipients: ['hokim@samarkand.uz', 'hokim@fergana.uz', '+12'], sections: ['regional'], next: '01.06.2026', lang: 'UZ-L', fmt: 'PDF', active: true },
    { id: 'sch5', name: 'Statistika qo\'mitasi', freq: 'Har chorak', recipients: ['stat@gov.uz'], sections: ['kpi', 'regional'], next: '01.07.2026', lang: 'RU', fmt: 'XLSX', active: false },
  ];

  // Archive
  const ARCHIVE = [
    { name: 'Haftalik xulosa · 19-hafta', date: '13.05.2026 · 08:00', pages: 12, size: '3.4 MB', kind: 'pdf', gen: 'Tizim', dl: 47 },
    { name: 'Kunlik hisobot', date: '13.05.2026 · 18:00', pages: 6, size: '1.8 MB', kind: 'xlsx', gen: 'Tizim', dl: 12 },
    { name: 'AI tahlil haftalik', date: '10.05.2026 · 12:00', pages: 9, size: '2.7 MB', kind: 'pdf', gen: 'Tizim', dl: 23 },
    { name: 'Mol go\'shti narx kuzatuvi', date: '08.05.2026 · 14:22', pages: 4, size: '1.1 MB', kind: 'pdf', gen: 'D. Yusupova', dl: 8 },
    { name: 'Logistika muammolari brifingi', date: '06.05.2026 · 09:45', pages: 7, size: '2.3 MB', kind: 'pdf', gen: 'S. Mirzayeva', dl: 18 },
    { name: 'Haftalik xulosa · 18-hafta', date: '06.05.2026 · 08:00', pages: 12, size: '3.5 MB', kind: 'pdf', gen: 'Tizim', dl: 41 },
    { name: 'Aprel oylik hisoboti', date: '01.05.2026 · 09:00', pages: 28, size: '8.9 MB', kind: 'pdf', gen: 'Tizim', dl: 89 },
    { name: 'Aprel oylik hisoboti (RU)', date: '01.05.2026 · 09:00', pages: 28, size: '9.1 MB', kind: 'pdf', gen: 'Tizim', dl: 34 },
    { name: 'Piyoz narx anomaliyasi', date: '28.04.2026 · 16:12', pages: 3, size: '0.8 MB', kind: 'pdf', gen: 'A. Karimov', dl: 11 },
  ];

  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)' }}>Hisobotlar</span>
          </div>
          <h1 className="page-title">Hisobotlar<span className="ru">Отчёты · Reports & exports</span></h1>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="doc" size={12} /> Shablonlar</button>
          <button className="btn btn-primary"><Icon name="plus" size={12} /> Yangi shablon</button>
        </div>
      </div>

      {/* Quick reports */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <h2 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 500 }}>Tezkor hisobotlar</h2>
          <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>bir bosishda PDF / XLSX yuklash</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {QUICK.map(q => (
            <div key={q.id} className="panel interactive" style={{ padding: 18, cursor: 'pointer' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{q.range}</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, marginTop: 4, letterSpacing: '-0.02em' }}>{q.uz}</div>
                </div>
                <Icon name="doc" size={20} stroke={1.2} />
              </div>
              <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>{formatNum(q.metric)}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{q.label}</div>
              </div>
              <div style={{ display: 'flex', gap: 4, marginTop: 12 }}>
                <button className="btn btn-sm" style={{ flex: 1 }}><Icon name="download" size={11} /> PDF</button>
                <button className="btn btn-sm" style={{ flex: 1 }}><Icon name="download" size={11} /> XLSX</button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Builder */}
      <div className="grid-2 mb-12">
        <Panel title="Hisobot konstruktori" sub="boʻlimlarni tanlang · oldindan koʻrish" num="01" body={false} style={{ display: 'flex', flexDirection: 'column' }}>
         <div style={{ padding: 14, display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {/* Sections */}
            <div>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Bo'limlar</div>
              {SECTIONS.map(s => (
                <label key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderBottom: '1px dotted var(--line)', fontSize: 11.5, cursor: 'pointer' }}>
                  <input type="checkbox" checked={sections[s.id]} onChange={e => setSections(prev => ({ ...prev, [s.id]: e.target.checked }))} />
                  <span style={{ flex: 1 }}>{s.uz}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--ink-4)' }}>~{s.pages} bet</span>
                </label>
              ))}
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', fontSize: 11.5, cursor: 'pointer', borderBottom: '1px dotted var(--line)' }}>
                <input type="checkbox" checked={includeRaw} onChange={e => setIncludeRaw(e.target.checked)} />
                <span style={{ flex: 1 }}>Xom ma'lumotlar ilovasi</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, color: 'var(--ink-4)' }}>~8 bet</span>
              </label>
            </div>

            {/* Settings */}
            <div>
              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Sozlamalar</div>
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginBottom: 3 }}>Sana oraligi</div>
                <div style={{ display: 'flex', gap: 4 }}>
                  <input type="date" className="input" value={dateFrom} onChange={e => setDateFrom(e.target.value)} />
                  <input type="date" className="input" value={dateTo} onChange={e => setDateTo(e.target.value)} />
                </div>
              </div>
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginBottom: 3 }}>Til</div>
                <Seg
                  value={reportLang}
                  onChange={setReportLang}
                  options={[{ value: 'uz-latn', label: 'UZ' }, { value: 'uz-cyrl', label: 'УЗ' }, { value: 'ru', label: 'RU' }]}
                />
              </div>
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginBottom: 3 }}>Format</div>
                <Seg
                  value={format}
                  onChange={setFormat}
                  options={[{ value: 'pdf', label: 'PDF' }, { value: 'xlsx', label: 'XLSX' }, { value: 'pptx', label: 'PPTX' }, { value: 'csv', label: 'CSV' }]}
                />
              </div>
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginBottom: 3 }}>Belgi (watermark)</div>
                <select className="select">
                  <option>Cheklangan tarqatish</option>
                  <option>Ichki foydalanish uchun</option>
                  <option>Vazir oldida ko'rib chiqilgan</option>
                  <option>Yo'q</option>
                </select>
              </div>
            </div>
          </div>

          {/* Summary + Generate */}
          <div style={{ marginTop: 'auto', paddingTop: 14, padding: 12, background: 'var(--bg-sunken)', borderRadius: 4, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div>
              <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Taxminiy hajm</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 500 }}>{totalPages} <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>bet · ~{(totalPages * 0.3).toFixed(1)} MB</span></div>
            </div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Hisoblanadigan kun</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 500 }}>{Math.ceil((new Date(dateTo) - new Date(dateFrom)) / (1000 * 60 * 60 * 24))} kun</div>
            </div>
            <div style={{ flex: 1 }} />
            <button className="btn">Saqlash shabloni</button>
            <button className="btn btn-primary"><Icon name="download" size={12} /> Yaratish va yuklash</button>
          </div>
         </div>
        </Panel>

        {/* Preview */}
        <Panel title="Ko'rinish" sub="A4 oldindan ko'rish · birinchi bet" num="02">
          <ReportPreview sections={Object.entries(sections).filter(([_, v]) => v).map(([k]) => k)} dateFrom={dateFrom} dateTo={dateTo} pages={totalPages} format={format} />
        </Panel>
      </div>

      {/* Scheduled */}
      <Panel title="Rejalashtirilgan hisobotlar" sub={`${SCHEDULED.filter(s => s.active).length} ta faol · keyingi ishga tushish vaqti`} num="03" body={false} className="mb-12">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 38 }}></th>
              <th>Nom</th>
              <th>Davriyligi</th>
              <th>Qabul qiluvchilar</th>
              <th>Bo'limlar</th>
              <th>Til / format</th>
              <th>Keyingi</th>
              <th>—</th>
            </tr>
          </thead>
          <tbody>
            {SCHEDULED.map(s => (
              <tr key={s.id}>
                <td>
                  <span className={`toggle ${s.active ? 'on' : ''}`} style={{ display: 'inline-block' }} />
                </td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="doc" size={14} />
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500 }}>{s.name}</div>
                      <div style={{ fontSize: 9.5, fontFamily: 'var(--font-mono)', color: 'var(--ink-4)' }}>{s.id.toUpperCase()}</div>
                    </div>
                  </div>
                </td>
                <td style={{ fontSize: 11 }}>{s.freq}</td>
                <td>
                  <div style={{ display: 'flex', gap: 3, alignItems: 'center', flexWrap: 'wrap', maxWidth: 240 }}>
                    {s.recipients.slice(0, 2).map((r, i) => (
                      <span key={i} className="chip" style={{ fontSize: 10 }}>{r}</span>
                    ))}
                    {s.recipients.length > 2 && <span className="chip chip-" style={{ fontSize: 10 }}>+{s.recipients.length - 2}</span>}
                  </div>
                </td>
                <td>
                  <div style={{ display: 'flex', gap: 3 }}>
                    {s.sections.map(sec => (
                      <span key={sec} className="chip" style={{ fontSize: 9.5 }}>{SECTIONS.find(x => x.id === sec)?.uz?.split(' ')[0]}</span>
                    ))}
                  </div>
                </td>
                <td><span className="mono" style={{ fontSize: 10.5 }}>{s.lang} · {s.fmt}</span></td>
                <td style={{ fontSize: 11 }}>
                  {s.active ? <span className="chip chip-accent">{s.next}</span> : <span style={{ color: 'var(--ink-4)' }}>—</span>}
                </td>
                <td>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button className="btn btn-ghost btn-sm" title="Tahrirlash"><Icon name="gear" size={11} /></button>
                    <button className="btn btn-ghost btn-sm" title="Hozir ishga tushirish"><Icon name="refresh" size={11} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>

      {/* Archive */}
      <Panel title="Arxiv" sub={`${ARCHIVE.length} ta yaratilgan hisobot · oxirgi 30 kun`} num="04" body={false}
        actions={
          <>
            <input className="input" placeholder="Qidirish..." style={{ width: 200, fontSize: 11, padding: '3px 8px' }} />
            <Seg
              value="all"
              onChange={() => {}}
              options={[{ value: 'all', label: 'Hammasi' }, { value: 'pdf', label: 'PDF' }, { value: 'xlsx', label: 'XLSX' }]}
            />
          </>
        }>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 30 }}></th>
              <th>Hisobot nomi</th>
              <th>Yaratilgan</th>
              <th>Yaratuvchi</th>
              <th>Hajmi</th>
              <th>Yuklab olishlar</th>
              <th>—</th>
            </tr>
          </thead>
          <tbody>
            {ARCHIVE.map((r, i) => (
              <tr key={i}>
                <td>
                  <span className="mono" style={{ fontSize: 9, color: 'var(--ink-2)', background: r.kind === 'pdf' ? 'var(--rose-soft)' : 'var(--jade-soft)', padding: '2px 4px', borderRadius: 2, textTransform: 'uppercase' }}>{r.kind}</span>
                </td>
                <td style={{ fontSize: 12, fontWeight: 500 }}>{r.name}</td>
                <td className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{r.date}</td>
                <td style={{ fontSize: 11.5 }}>
                  {r.gen === 'Tizim'
                    ? <span style={{ color: 'var(--ink-4)' }}>{r.gen}</span>
                    : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Avatar name={r.gen} size={18} />{r.gen}</span>}
                </td>
                <td className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.pages} bet · {r.size}</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 80 }}><MiniBar value={r.dl} max={Math.max(...ARCHIVE.map(x => x.dl))} color="var(--accent)" height={4} /></div>
                    <span className="mono" style={{ fontSize: 11, width: 26, textAlign: 'right' }}>{r.dl}</span>
                  </div>
                </td>
                <td>
                  <div style={{ display: 'flex', gap: 4 }}>
                    <button className="btn btn-ghost btn-sm" title="Ko'rish"><Icon name="eye" size={11} /></button>
                    <button className="btn btn-ghost btn-sm" title="Yuklash"><Icon name="download" size={11} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>
    </div>
  );
}

// ============================================================
// Mini A4 preview
// ============================================================
function ReportPreview({ sections, dateFrom, dateTo, pages, format }) {
  // Stylized first-page preview
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 12, background: 'var(--bg-sunken)', borderRadius: 4 }}>
      <div style={{ width: 260, height: 368, background: 'var(--panel)', boxShadow: '0 4px 24px -8px oklch(0.20 0.012 250 / 0.25), 0 1px 0 var(--line-strong)', padding: 14, position: 'relative', fontSize: 5.5, lineHeight: 1.25, color: 'var(--ink)', overflow: 'hidden', boxSizing: 'border-box' }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '1px solid var(--line-strong)', paddingBottom: 8, marginBottom: 10 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 9, letterSpacing: '-0.01em' }}>OZIQ AI</div>
            <div style={{ fontSize: 5, color: 'var(--ink-3)', marginTop: 1, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Moliya Vazirligi · O'zbekiston</div>
          </div>
          <div style={{ width: 16, height: 16, border: '1px solid var(--ink)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-serif)', fontSize: 9, fontWeight: 600 }}>O</div>
        </div>

        {/* Title */}
        <div style={{ marginBottom: 8 }}>
          <div style={{ fontSize: 4.5, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>HISOBOT · {format.toUpperCase()}</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 13, lineHeight: 1.1, letterSpacing: '-0.02em', marginTop: 2 }}>Oziq-ovqat ta'minoti monitoringi</div>
          <div style={{ fontSize: 5.5, color: 'var(--ink-3)', marginTop: 2 }}>{dateFrom} — {dateTo} · {pages} bet</div>
        </div>

        {/* Section preview boxes */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 3, marginBottom: 8 }}>
          {[0, 1, 2, 3].map(i => (
            <div key={i} style={{ background: 'var(--bg-sunken)', padding: 4, borderRadius: 2 }}>
              <div style={{ fontSize: 3.5, color: 'var(--ink-4)', textTransform: 'uppercase' }}>KPI {i + 1}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 7, fontWeight: 500 }}>{formatNum(Math.round(2000 + rand() * 4000))}</div>
            </div>
          ))}
        </div>

        {/* Chart placeholder */}
        <div style={{ height: 38, background: 'var(--bg-sunken)', borderRadius: 2, position: 'relative', marginBottom: 6 }}>
          <svg width="100%" height="100%" viewBox="0 0 100 38" preserveAspectRatio="none" style={{ position: 'absolute' }}>
            <path d="M 0 30 Q 20 18 35 22 T 65 12 T 100 8" stroke="var(--accent)" strokeWidth="1.2" fill="none" />
            <path d="M 0 30 Q 20 18 35 22 T 65 12 T 100 8 L 100 38 L 0 38 Z" fill="var(--accent)" opacity="0.13" />
          </svg>
        </div>

        <div style={{ fontSize: 4.5, fontFamily: 'var(--font-mono)', color: 'var(--ink-4)', marginBottom: 4, textTransform: 'uppercase' }}>Asosiy xulosalar</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
          {[
            'Mavzular hajmi 4.2% ga oshdi, asosan logistika.',
            'Sentiment Fargʻona vodiysida salbiy tomonga siljidi.',
            'AI aniqligi 91.3% ga yetdi, maqsad 90% dan yuqori.',
            'Eng faol viloyat — Toshkent (18% jami hajm).',
          ].map((line, i) => (
            <div key={i} style={{ fontSize: 5.5, lineHeight: 1.35, color: 'var(--ink-2)', display: 'flex', gap: 3 }}>
              <span style={{ color: 'var(--accent-ink)' }}>▸</span>
              <span>{line}</span>
            </div>
          ))}
        </div>

        {/* Mini chart row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, marginTop: 8 }}>
          <div style={{ background: 'var(--bg-sunken)', height: 28, borderRadius: 2, padding: 3 }}>
            <div style={{ fontSize: 4, color: 'var(--ink-4)', textTransform: 'uppercase' }}>Mavzular</div>
            <div style={{ display: 'flex', gap: 1.5, alignItems: 'flex-end', height: 18, marginTop: 1 }}>
              {[8, 14, 10, 5, 12, 17, 6, 9, 13, 11, 4, 7].map((h, i) => (
                <div key={i} style={{ flex: 1, height: `${h * 3}%`, background: TOPICS[i].color, opacity: 0.9 }} />
              ))}
            </div>
          </div>
          <div style={{ background: 'var(--bg-sunken)', height: 28, borderRadius: 2, padding: 3 }}>
            <div style={{ fontSize: 4, color: 'var(--ink-4)', textTransform: 'uppercase' }}>Hududlar</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0.5, marginTop: 1 }}>
              {[14, 11, 9, 8].map((w, i) => (
                <div key={i} style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                  <div style={{ width: 6, fontSize: 3.5, color: 'var(--ink-4)' }}>{REGIONS[i].code}</div>
                  <div style={{ height: 3, background: 'var(--accent)', width: `${w * 5}%`, opacity: 0.8 }} />
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Watermark */}
        <div style={{ position: 'absolute', bottom: 16, left: 22, right: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 4, color: 'var(--ink-4)' }}>CHEKLANGAN TARQATISH · 1 / {pages}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 4, color: 'var(--ink-4)' }}>14.05.2026</div>
        </div>
      </div>
    </div>
  );
}

window.ScreenReports = ScreenReports;