/* ============================================================
   Screen 12 — Sozlamalar (Settings)
   ============================================================ */

function ScreenSettings() {
  const [section, setSection] = useState('users');
  const SECTIONS = [
    { id: 'users',    uz: 'Foydalanuvchilar va rollar', ru: 'Пользователи',  icon: 'team' },
    { id: 'taxonomy', uz: 'Mavzular taksonomi',         ru: 'Таксономия',    icon: 'grid3' },
    { id: 'routing',  uz: 'Yo\'naltirish qoidalari',   ru: 'Маршрутизация',  icon: 'arrow' },
    { id: 'sla',      uz: 'SLA va ish vaqti',           ru: 'SLA / часы',    icon: 'pulse' },
    { id: 'branding', uz: 'Brending va lokalizatsiya',  ru: 'Брендинг',      icon: 'star' },
    { id: 'audit',    uz: 'Audit jurnali',              ru: 'Аудит',         icon: 'doc' },
  ];

  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)' }}>Sozlamalar</span>
            <span>/</span><span style={{ color: 'var(--ink-2)' }}>{SECTIONS.find(s => s.id === section).uz}</span>
          </div>
          <h1 className="page-title">Sozlamalar<span className="ru">Настройки · System settings</span></h1>
        </div>
        <div className="page-actions">
          <span style={{ fontSize: 11, color: 'var(--ink-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <span className="dot dot-live" /> Avto-saqlash yoqilgan
          </span>
          <button className="btn"><Icon name="download" size={12} /> Sozlamalarni eksport</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 16 }}>
        {/* Settings nav */}
        <aside style={{ position: 'sticky', top: 0, alignSelf: 'start' }}>
          <div className="panel" style={{ overflow: 'hidden' }}>
            {SECTIONS.map((s, i) => (
              <div
                key={s.id}
                onClick={() => setSection(s.id)}
                style={{
                  padding: '10px 14px',
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 12.5,
                  borderLeft: `3px solid ${section === s.id ? 'var(--accent)' : 'transparent'}`,
                  borderBottom: i < SECTIONS.length - 1 ? '1px solid var(--line)' : 'none',
                  background: section === s.id ? 'var(--bg-sunken)' : '',
                  cursor: 'pointer',
                  fontWeight: section === s.id ? 600 : 400,
                  color: section === s.id ? 'var(--ink)' : 'var(--ink-2)',
                }}
              >
                <Icon name={s.icon} size={13} />
                <span>{s.uz}</span>
              </div>
            ))}
          </div>
        </aside>

        <div>
          {section === 'users'    && <UsersSection />}
          {section === 'taxonomy' && <TaxonomySection />}
          {section === 'routing'  && <RoutingSection />}
          {section === 'sla'      && <SLASection />}
          {section === 'branding' && <BrandingSection />}
          {section === 'audit'    && <AuditSection />}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Users & roles
// ============================================================
function UsersSection() {
  const ROLES = [
    { id: 'minister',  name: 'Vazir',                permissions: 12, count: 1, color: 'var(--rose)' },
    { id: 'deputy',    name: 'Vazir o‘rinbosari',    permissions: 11, count: 2, color: 'var(--rose)' },
    { id: 'dept_head', name: 'Bo\'lim boshlig\'i',   permissions: 9,  count: 4, color: 'var(--amber)' },
    { id: 'analyst',   name: 'Tahlilchi',            permissions: 6,  count: 8, color: 'var(--accent)' },
    { id: 'viewer',    name: 'Faqat ko‘rish',        permissions: 2,  count: 3, color: 'var(--ink-4)' },
  ];

  const USERS = [
    { name: 'A. Yusupov',        role: 'minister',  email: 'minister@mof.uz',       last: 'bugun · 09:14', mfa: true,  active: true },
    { name: 'M. Saidov',         role: 'deputy',    email: 'm.saidov@mof.uz',       last: 'bugun · 13:42', mfa: true,  active: true },
    { name: 'F. Tojiyeva',       role: 'dept_head', email: 'f.tojiyeva@mof.uz',     last: 'hozir',          mfa: true,  active: true },
    { name: 'O. Bozorov',        role: 'dept_head', email: 'o.bozorov@mof.uz',      last: '2 soat',         mfa: true,  active: true },
    { name: 'A. Karimov',        role: 'analyst',   email: 'a.karimov@mof.uz',      last: 'hozir',          mfa: true,  active: true },
    { name: 'D. Yusupova',       role: 'analyst',   email: 'd.yusupova@mof.uz',     last: 'hozir',          mfa: true,  active: true },
    { name: 'R. Ismoilov',       role: 'analyst',   email: 'r.ismoilov@mof.uz',     last: '1 kun',          mfa: false, active: true },
    { name: 'S. Mirzayeva',      role: 'analyst',   email: 's.mirzayeva@mof.uz',    last: 'hozir',          mfa: true,  active: true },
    { name: 'B. Rashidov',       role: 'analyst',   email: 'b.rashidov@mof.uz',     last: 'hozir',          mfa: true,  active: true },
    { name: 'I. Maxmudov (stat.kom)', role: 'viewer', email: 'stat@gov.uz',         last: '7 kun',          mfa: true,  active: true },
    { name: 'K. Olimov',         role: 'analyst',   email: 'k.olimov@mof.uz',       last: '12 kun',         mfa: false, active: false },
  ];

  return (
    <div className="stack">
      {/* Roles overview */}
      <Panel title="Rollar va ruxsatlar" sub={`${ROLES.length} ta rol · ${ROLES.reduce((s, r) => s + r.count, 0)} ta foydalanuvchi`} num="01">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--line)', borderRadius: 4, overflow: 'hidden' }}>
          {ROLES.map(r => (
            <div key={r.id} style={{ background: 'var(--panel)', padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: r.color }} />
                <span style={{ fontWeight: 600, fontSize: 12 }}>{r.name}</span>
              </div>
              <div className="mono" style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{r.count}</div>
              <div style={{ fontSize: 10, color: 'var(--ink-4)' }}>foydalanuvchi · {r.permissions} ruxsat</div>
            </div>
          ))}
        </div>
      </Panel>

      {/* Users table */}
      <Panel title="Foydalanuvchilar" sub={`${USERS.length} ta · ${USERS.filter(u => u.active).length} aktiv`} num="02" body={false}
        actions={
          <>
            <input className="input" placeholder="Qidirish..." style={{ width: 180, fontSize: 11, padding: '3px 8px' }} />
            <button className="btn btn-sm btn-primary"><Icon name="plus" size={11} /> Yangi foydalanuvchi</button>
          </>
        }>
        <table className="tbl">
          <thead>
            <tr>
              <th>Foydalanuvchi</th>
              <th>Email</th>
              <th>Rol</th>
              <th>2FA</th>
              <th>Oxirgi kirish</th>
              <th>Holat</th>
              <th>—</th>
            </tr>
          </thead>
          <tbody>
            {USERS.map(u => {
              const role = ROLES.find(r => r.id === u.role);
              return (
                <tr key={u.email} style={{ opacity: u.active ? 1 : 0.55 }}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Avatar name={u.name} size={26} />
                      <span style={{ fontSize: 12, fontWeight: 500 }}>{u.name}</span>
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{u.email}</td>
                  <td><span className="chip" style={{ background: role.color, color: 'white', borderColor: 'transparent', fontSize: 10 }}>{role.name}</span></td>
                  <td>{u.mfa ? <span className="chip chip-jade" style={{ fontSize: 10 }}>✓ TOTP</span> : <span className="chip chip-rose" style={{ fontSize: 10 }}>yo'q</span>}</td>
                  <td className="mono" style={{ fontSize: 11, color: u.last === 'hozir' ? 'var(--jade)' : 'var(--ink-2)' }}>{u.last}</td>
                  <td>{u.active ? <span className="chip chip-jade" style={{ fontSize: 10 }}>faol</span> : <span className="chip" style={{ fontSize: 10 }}>arxiv</span>}</td>
                  <td>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button className="btn btn-ghost btn-sm"><Icon name="gear" size={11} /></button>
                      <button className="btn btn-ghost btn-sm"><Icon name="x" size={11} /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Panel>
    </div>
  );
}

// ============================================================
// Taxonomy editor
// ============================================================
function TaxonomySection() {
  const [expanded, setExpanded] = useState(new Set(['onion', 'logistic']));

  const toggle = (id) => {
    const s = new Set(expanded);
    s.has(id) ? s.delete(id) : s.add(id);
    setExpanded(s);
  };

  return (
    <div className="stack">
      <Panel title="Mavzular taksonomi" sub={`12 ta asosiy mavzu · ${TOPICS.reduce((s, t) => s + t.subs.length, 0)} ta pastki kategoriya`} num="01"
        actions={
          <>
            <button className="btn btn-sm"><Icon name="plus" size={11} /> Asosiy mavzu</button>
            <button className="btn btn-sm"><Icon name="download" size={11} /> JSON eksport</button>
          </>
        }>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {TOPICS.map(t => {
            const b = BY_TOPIC[t.id];
            return (
              <div key={t.id} style={{ border: '1px solid var(--line)', borderRadius: 4, overflow: 'hidden', background: 'var(--panel)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderLeft: `3px solid ${t.color}` }}>
                  <TopicMark topicId={t.id} size={20} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600 }}>{t.uz}</div>
                    <div style={{ fontSize: 10, color: 'var(--ink-4)', fontFamily: 'var(--font-mono)' }}>{t.id} · {t.ru} · {t.en}</div>
                  </div>
                  <span className="chip" style={{ fontSize: 10 }}>{t.subs.length} pastki</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{formatNum(b.total)}</span>
                </div>
                <div style={{ padding: '4px 12px 10px 32px', borderTop: '1px solid var(--line)' }}>
                  {t.subs.map((sub, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 11.5, borderBottom: i < t.subs.length - 1 ? '1px dotted var(--line)' : 'none' }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.color }} />
                      <span style={{ flex: 1 }}>{sub}</span>
                      <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{Math.round(b.total / t.subs.length + (rand() - 0.5) * 40)} murojaat</span>
                      <button className="btn btn-ghost btn-sm" style={{ padding: '0 4px' }}><Icon name="gear" size={10} /></button>
                    </div>
                  ))}
                  <button className="btn btn-sm" style={{ marginTop: 6, fontSize: 10 }}><Icon name="plus" size={10} /> Pastki kategoriya qo'shish</button>
                </div>
              </div>
            );
          })}
        </div>
      </Panel>

      <Panel title="Sinonim va kalit so'zlar" sub="AI yorliqlashda yordam beradi" num="02">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 12 }}>
          {[
            { topic: 'onion', words: ['piyoz', 'luk', 'лук', 'pioz', 'sogʻan', 'sogan', 'kepak piyoz'] },
            { topic: 'beef', words: ['mol go\'shti', 'molgoʻshti', 'говядина', 'qoʻy go\'shti', 'baranina', 'qassoblik', 'soyish'] },
            { topic: 'logistic', words: ['logistika', 'tashish', 'transport', 'yuk mashinasi', 'bojxona', 'tamoʻjnya', 'fura'] },
            { topic: 'flour', words: ['un', 'мука', 'tegirmon', 'don tegirmoni', 'navlari', 'oliy nav', 'birinchi nav'] },
            { topic: 'sugar', words: ['shakar', 'qand', 'сахар', 'rafinad', 'rafinatsiya', 'kvota', 'importi'] },
          ].map(row => {
            const t = TOPIC_BY_ID[row.topic];
            return (
              <React.Fragment key={row.topic}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: '1px solid var(--line)' }}>
                  <TopicMark topicId={row.topic} size={14} />
                  <span style={{ fontSize: 11.5, fontWeight: 500 }}>{t.uz}</span>
                </div>
                <div style={{ padding: '8px 0', borderBottom: '1px solid var(--line)', display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                  {row.words.map(w => (
                    <span key={w} className="chip" style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)' }}>{w} <span style={{ color: 'var(--ink-4)', marginLeft: 3 }}>×</span></span>
                  ))}
                  <button className="btn btn-sm" style={{ fontSize: 10, padding: '1px 6px' }}><Icon name="plus" size={9} /></button>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </Panel>
    </div>
  );
}

// ============================================================
// Routing rules
// ============================================================
function RoutingSection() {
  const RULES = [
    { id: 'rt1',  topic: 'onion',     region: 'sam', priority: '*',        assign: 'A. Karimov',   sla: '4 soat',  active: true },
    { id: 'rt2',  topic: 'beef',      region: '*',   priority: 'urgent',   assign: 'F. Tojiyeva',  sla: '1 soat',  active: true },
    { id: 'rt3',  topic: 'logistic',  region: 'qsh', priority: '*',        assign: 'S. Mirzayeva', sla: '2 soat',  active: true },
    { id: 'rt4',  topic: 'logistic',  region: '*',   priority: '*',        assign: 'S. Mirzayeva', sla: '6 soat',  active: true },
    { id: 'rt5',  topic: 'rice',      region: 'xor', priority: '*',        assign: 'D. Yusupova',  sla: '4 soat',  active: true },
    { id: 'rt6',  topic: 'rice',      region: '*',   priority: '*',        assign: 'D. Yusupova',  sla: '8 soat',  active: true },
    { id: 'rt7',  topic: 'breeding',  region: '*',   priority: '*',        assign: 'R. Ismoilov',  sla: '6 soat',  active: true },
    { id: 'rt8',  topic: 'flour',     region: '*',   priority: '*',        assign: 'B. Rashidov',  sla: '4 soat',  active: true },
    { id: 'rt9',  topic: 'sugar',     region: '*',   priority: '*',        assign: 'B. Rashidov',  sla: '4 soat',  active: true },
    { id: 'rt10', topic: '*',         region: '*',   priority: 'urgent',   assign: 'F. Tojiyeva',  sla: '1 soat',  active: true },
    { id: 'rt11', topic: '*',         region: '*',   priority: '*',        assign: 'navbatchi',    sla: '24 soat', active: true },
  ];

  return (
    <div className="stack">
      <Panel title="Yo'naltirish qoidalari" sub="yuqoridan pastga qarab qo'llaniladi · birinchi mos kelgan g'olib" num="01" body={false}
        actions={
          <>
            <button className="btn btn-sm"><Icon name="download" size={11} /> CSV</button>
            <button className="btn btn-sm btn-primary"><Icon name="plus" size={11} /> Qoida qo'shish</button>
          </>
        }>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 30, textAlign: 'right' }}>#</th>
              <th style={{ width: 56 }}>Faol</th>
              <th>Agar mavzu</th>
              <th>VA hudud</th>
              <th>VA prioritet</th>
              <th style={{ width: 32 }}>→</th>
              <th>Tahlilchiga yo'naltir</th>
              <th>SLA</th>
              <th>—</th>
            </tr>
          </thead>
          <tbody>
            {RULES.map((r, i) => (
              <tr key={r.id}>
                <td style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--ink-4)', fontSize: 10 }}>{i + 1}</td>
                <td><span className={`toggle ${r.active ? 'on' : ''}`} /></td>
                <td>
                  {r.topic === '*'
                    ? <span style={{ color: 'var(--ink-4)', fontStyle: 'italic' }}>har qanday</span>
                    : <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                        <TopicMark topicId={r.topic} size={14} />
                        <span style={{ fontSize: 11.5 }}>{TOPIC_BY_ID[r.topic].uz}</span>
                      </div>}
                </td>
                <td>
                  {r.region === '*'
                    ? <span style={{ color: 'var(--ink-4)', fontStyle: 'italic' }}>har qanday</span>
                    : <span style={{ fontSize: 11.5 }}>{REGION_BY_ID[r.region].uz}</span>}
                </td>
                <td>
                  {r.priority === '*'
                    ? <span style={{ color: 'var(--ink-4)', fontStyle: 'italic' }}>har qanday</span>
                    : <PriorityChip p={r.priority} />}
                </td>
                <td style={{ color: 'var(--accent-ink)', fontWeight: 600 }}>→</td>
                <td>
                  {r.assign === 'navbatchi'
                    ? <span style={{ fontSize: 11.5, fontStyle: 'italic', color: 'var(--ink-3)' }}>navbatchi tahlilchi (smena)</span>
                    : <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <Avatar name={r.assign} size={20} />
                        <span style={{ fontSize: 11.5 }}>{r.assign}</span>
                      </div>}
                </td>
                <td><span className="chip" style={{ fontSize: 10 }}>{r.sla}</span></td>
                <td>
                  <div style={{ display: 'flex', gap: 2 }}>
                    <button className="btn btn-ghost btn-sm" title="↑">↑</button>
                    <button className="btn btn-ghost btn-sm" title="↓">↓</button>
                    <button className="btn btn-ghost btn-sm" title="Tahrirlash"><Icon name="gear" size={11} /></button>
                    <button className="btn btn-ghost btn-sm" title="O'chirish"><Icon name="x" size={11} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>

      <div style={{ background: 'var(--bg-sunken)', padding: 14, borderRadius: 4, fontSize: 11.5, color: 'var(--ink-2)', display: 'flex', gap: 14, alignItems: 'center' }}>
        <Icon name="check" size={16} />
        <div style={{ flex: 1 }}>
          <strong style={{ color: 'var(--ink)' }}>Misol natija:</strong> Murojaat <span className="mono">Logistika + Qashqadaryo + shoshilinch</span> bo'lsa — qoida #3 ishlaydi — <strong>S. Mirzayeva</strong>ga 2 soat SLA bilan yuboriladi.
        </div>
      </div>
    </div>
  );
}


// ============================================================
// SLA & working hours
// ============================================================
function SLASection() {
  return (
    <div className="stack">
      <Panel title="SLA · prioritet bo'yicha" sub="dastlabki javob va to'liq hal qilish vaqti" num="01">
        <table className="tbl">
          <thead>
            <tr>
              <th>Prioritet</th>
              <th>Dastlabki javob</th>
              <th>To'liq hal qilish</th>
              <th>Ish vaqtidan tashqari?</th>
              <th>Eskalatsiya</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><PriorityChip p="urgent" /></td>
              <td><input className="input" defaultValue="15 daqiqa" style={{ width: 120 }} /></td>
              <td><input className="input" defaultValue="1 soat" style={{ width: 120 }} /></td>
              <td><Seg value="yes" onChange={() => {}} options={[{ value: 'yes', label: 'Ha' }, { value: 'no', label: 'Yo\'q' }]} /></td>
              <td><span className="chip chip-rose" style={{ fontSize: 10 }}>L1 + L2 + L3</span></td>
            </tr>
            <tr>
              <td><PriorityChip p="high" /></td>
              <td><input className="input" defaultValue="30 daqiqa" style={{ width: 120 }} /></td>
              <td><input className="input" defaultValue="4 soat" style={{ width: 120 }} /></td>
              <td><Seg value="yes" onChange={() => {}} options={[{ value: 'yes', label: 'Ha' }, { value: 'no', label: 'Yo\'q' }]} /></td>
              <td><span className="chip chip-amber" style={{ fontSize: 10 }}>L1 + L2</span></td>
            </tr>
            <tr>
              <td><PriorityChip p="medium" /></td>
              <td><input className="input" defaultValue="2 soat" style={{ width: 120 }} /></td>
              <td><input className="input" defaultValue="24 soat" style={{ width: 120 }} /></td>
              <td><Seg value="no" onChange={() => {}} options={[{ value: 'yes', label: 'Ha' }, { value: 'no', label: 'Yo\'q' }]} /></td>
              <td><span className="chip chip-" style={{ fontSize: 10 }}>L1</span></td>
            </tr>
            <tr>
              <td><PriorityChip p="low" /></td>
              <td><input className="input" defaultValue="4 soat" style={{ width: 120 }} /></td>
              <td><input className="input" defaultValue="3 ish kuni" style={{ width: 120 }} /></td>
              <td><Seg value="no" onChange={() => {}} options={[{ value: 'yes', label: 'Ha' }, { value: 'no', label: 'Yo\'q' }]} /></td>
              <td><span className="chip chip-" style={{ fontSize: 10 }}>—</span></td>
            </tr>
          </tbody>
        </table>
      </Panel>

      <Panel title="Ish vaqti va dam olish" sub="O'zbekiston standartlari · UTC+5" num="02">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Hafta jadvali</div>
            {['Dushanba', 'Seshanba', 'Chorshanba', 'Payshanba', 'Juma', 'Shanba', 'Yakshanba'].map((d, i) => (
              <div key={d} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: i < 6 ? '1px dotted var(--line)' : 'none' }}>
                <span style={{ fontSize: 11.5, width: 100 }}>{d}</span>
                {i < 5 ? (
                  <>
                    <input className="input" defaultValue="09:00" style={{ width: 70 }} />
                    <span style={{ color: 'var(--ink-4)' }}>—</span>
                    <input className="input" defaultValue={i === 4 ? '16:00' : '18:00'} style={{ width: 70 }} />
                  </>
                ) : (
                  <span style={{ fontSize: 11, color: 'var(--ink-4)', fontStyle: 'italic' }}>dam olish</span>
                )}
                {i < 5 && <span className="toggle on" style={{ marginLeft: 'auto' }} />}
              </div>
            ))}
          </div>

          <div>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>2026 dam olish kunlari</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { d: '01.01', n: 'Yangi yil' },
                { d: '08.03', n: 'Xotin-qizlar kuni' },
                { d: '21.03', n: 'Navro\'z bayrami' },
                { d: '09.05', n: 'Xotira va qadrlash kuni' },
                { d: '01.09', n: 'Mustaqillik kuni' },
                { d: '01.10', n: 'O\'qituvchi va murabbiylar kuni' },
                { d: '08.12', n: 'Konstitutsiya kuni' },
              ].map(h => (
                <div key={h.d} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11.5, padding: '4px 0', borderBottom: '1px dotted var(--line)' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', fontWeight: 600 }}>{h.d}</span>
                  <span style={{ flex: 1 }}>{h.n}</span>
                  <span className="toggle on" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </Panel>
    </div>
  );
}

// ============================================================
// Branding
// ============================================================
function BrandingSection() {
  return (
    <div className="stack">
      <Panel title="Brending va lokalizatsiya" num="01">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Identifikatsiya</div>
            <RuleField label="Tashkilot nomi"><input className="input" defaultValue="O'zbekiston Respublikasi Moliya Vazirligi" /></RuleField>
            <RuleField label="Bo'lim"><input className="input" defaultValue="Oziq-ovqat ta'minoti monitoringi" /></RuleField>
            <RuleField label="Mahsulot nomi"><input className="input" defaultValue="Oziq AI" /></RuleField>
            <RuleField label="Slogan"><input className="input" defaultValue="Fermerlar ovozini eshitish" /></RuleField>
            <RuleField label="Standart til">
              <Seg value="uz-latn" onChange={() => {}} options={[
                { value: 'uz-latn', label: 'UZ-L' },
                { value: 'uz-cyrl', label: 'УЗ-К' },
                { value: 'ru', label: 'RU' },
              ]} />
            </RuleField>
            <RuleField label="Vaqt mintaqasi"><span className="mono" style={{ fontSize: 11 }}>UTC+5 · Asia/Tashkent</span></RuleField>
            <RuleField label="Sana formati"><Seg value="dmy" onChange={() => {}} options={[{ value: 'dmy', label: 'DD.MM.YYYY' }, { value: 'ymd', label: 'YYYY-MM-DD' }]} /></RuleField>
          </div>

          <div>
            <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>Vizual</div>
            <div style={{ background: 'var(--bg-sunken)', padding: 16, borderRadius: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <div style={{ width: 56, height: 56, border: '1.5px solid var(--ink)', borderRadius: 6, display: 'grid', placeItems: 'center', background: 'var(--panel)', fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 28, letterSpacing: '-0.02em' }}>O</div>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.02em' }}>Oziq AI</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Moliya Vazirligi · UZB</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                {[
                  { color: 'var(--ink)', name: 'Asosiy' },
                  { color: 'var(--accent)', name: 'Aksent' },
                  { color: 'var(--jade)', name: 'Muvaffaqiyat' },
                  { color: 'var(--amber)', name: 'Ogohlik' },
                  { color: 'var(--rose)', name: 'Xato' },
                ].map(c => (
                  <div key={c.name} style={{ flex: 1, textAlign: 'center' }}>
                    <div style={{ height: 32, background: c.color, borderRadius: 3, marginBottom: 4 }} />
                    <div style={{ fontSize: 9, color: 'var(--ink-4)' }}>{c.name}</div>
                  </div>
                ))}
              </div>
            </div>

            <RuleField label="Tungi rejim"><Seg value="auto" onChange={() => {}} options={[{ value: 'light', label: 'Yorug\'' }, { value: 'dark', label: 'Tungi' }, { value: 'auto', label: 'Auto' }]} /></RuleField>
            <RuleField label="Sarlavha fonti"><span className="mono" style={{ fontSize: 11 }}>IBM Plex Serif</span></RuleField>
            <RuleField label="Asosiy font"><span className="mono" style={{ fontSize: 11 }}>IBM Plex Sans</span></RuleField>
            <RuleField label="Mono font"><span className="mono" style={{ fontSize: 11 }}>IBM Plex Mono</span></RuleField>
          </div>
        </div>
      </Panel>
    </div>
  );
}

// ============================================================
// Audit log
// ============================================================
function AuditSection() {
  const LOG = [
    { t: '14:28:14', user: 'F. Tojiyeva',  action: 'AI chegarasini o\'zgartirdi', detail: 'auto-accept: 82% → 85%', kind: 'config' },
    { t: '14:12:42', user: 'A. Karimov',   action: 'Murojaatni qayta tasnif qildi', detail: 'MUR-005842 · breeding → poultry', kind: 'data' },
    { t: '13:54:08', user: 'S. Mirzayeva', action: 'SLA buzilishini tasdiqladi',  detail: 'AL-2026-0414', kind: 'alert' },
    { t: '13:41:22', user: 'Tizim',         action: 'Avto eskalatsiya', detail: 'AL-2026-0418 → 2-daraja', kind: 'system' },
    { t: '13:12:55', user: 'F. Tojiyeva',  action: 'Yangi yo\'naltirish qoidasini qo\'shdi',  detail: 'rt9 · sugar → B. Rashidov', kind: 'config' },
    { t: '12:48:30', user: 'D. Yusupova',  action: 'Murojaatlarni eksport qildi', detail: '42 ta · CSV', kind: 'data' },
    { t: '12:14:08', user: 'M. Saidov',    action: 'Hisobotni yukladi', detail: 'Haftalik xulosa · PDF', kind: 'data' },
    { t: '11:55:12', user: 'A. Karimov',   action: 'Tahlilchi qo\'shdi', detail: 'O. Nazarov · analyst rol', kind: 'users' },
    { t: '11:30:00', user: 'Tizim',        action: 'Model qayta o\'rgatildi', detail: 'v2.18.3 → v2.18.4 · F1 +0.4%', kind: 'system' },
    { t: '10:48:22', user: 'B. Rashidov',  action: 'Filtr presetni saqladi', detail: 'Fargʻona · shoshilinch · 7 kun', kind: 'config' },
    { t: '10:22:14', user: 'F. Tojiyeva',  action: 'Foydalanuvchi MFA-ni yoqdi', detail: 'r.ismoilov@mof.uz', kind: 'users' },
    { t: '09:14:00', user: 'A. Yusupov',   action: 'Tizimga kirdi', detail: 'IP 213.230.***  · vazir.mof.uz', kind: 'auth' },
  ];

  const kindColors = {
    config: 'var(--accent)',
    data: 'var(--ink-3)',
    alert: 'var(--amber)',
    system: 'var(--plum)',
    users: 'var(--jade)',
    auth: 'var(--rose)',
  };

  return (
    <Panel title="Audit jurnali" sub="barcha o'zgarishlar va kirishlar · oxirgi 24 soat" num="01" body={false}
      actions={
        <>
          <Seg value="all" onChange={() => {}} options={[
            { value: 'all', label: 'Hammasi' },
            { value: 'config', label: 'Konfig' },
            { value: 'users', label: 'Foyd.' },
            { value: 'system', label: 'Tizim' },
          ]} />
          <input className="input" placeholder="Qidirish..." style={{ width: 180, fontSize: 11, padding: '3px 8px' }} />
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={12} /></button>
        </>
      }>
      <table className="tbl">
        <thead>
          <tr>
            <th style={{ width: 80 }}>Vaqt</th>
            <th style={{ width: 80 }}>Tur</th>
            <th>Foydalanuvchi</th>
            <th>Harakat</th>
            <th>Tafsilot</th>
          </tr>
        </thead>
        <tbody>
          {LOG.map((l, i) => (
            <tr key={i}>
              <td className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{l.t}</td>
              <td>
                <span className="chip" style={{ background: kindColors[l.kind], color: 'white', borderColor: 'transparent', fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                  {l.kind}
                </span>
              </td>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  {l.user === 'Tizim' ? <Icon name="cpu" size={14} /> : <Avatar name={l.user} size={20} />}
                  <span style={{ fontSize: 11.5 }}>{l.user}</span>
                </div>
              </td>
              <td style={{ fontSize: 11.5 }}>{l.action}</td>
              <td className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{l.detail}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Panel>
  );
}

window.ScreenSettings = ScreenSettings;