/* ============================================================
   Oziq AI — app chrome: sidebar, topbar, statusbar
   ============================================================ */

const NAV_ITEMS = [
  { id: 'overview',     uz: 'Bosh sahifa',     ru: 'Обзор',           icon: 'home',   shortcut: 'g h' },
  { id: 'inbox',        uz: 'Murojaatlar',     ru: 'Обращения',       icon: 'inbox',  badgeFrom: 'open', shortcut: 'g m' },
  { id: 'topics',       uz: 'Mavzular',        ru: 'Темы',            icon: 'grid3' },
  { id: 'farmers',      uz: 'Fermerlar',       ru: 'Фермеры',         icon: 'user' },
  { id: 'geo',          uz: 'Geografiya',      ru: 'География',       icon: 'map' },
  { id: 'ai',           uz: 'AI tahlil',       ru: 'AI-анализ',       icon: 'cpu' },
  { id: 'analysts',     uz: 'Tahlilchilar',    ru: 'Аналитики',       icon: 'team' },
  { id: 'reports',      uz: 'Hisobotlar',      ru: 'Отчёты',          icon: 'doc' },
  { id: 'alerts',       uz: 'Bildirishnomalar',ru: 'Оповещения',      icon: 'bell',   badgeFrom: 'urgent_open' },
  { id: 'trends',       uz: 'Trendlar',        ru: 'Тренды',          icon: 'trend' },
  { id: 'integrations', uz: 'Integratsiyalar', ru: 'Интеграции',      icon: 'plug' },
  { id: 'settings',     uz: 'Sozlamalar',      ru: 'Настройки',       icon: 'gear' },
];

function Sidebar({ current, onNav }) {
  // Live counts for nav badges
  const overview = useApi('/api/stats/overview', { pollMs: 15000 });
  const counts = overview.data || {};
  const badgeOf = (item) => {
    if (!item.badgeFrom) return null;
    const v = counts[item.badgeFrom];
    return v > 0 ? v : null;
  };
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="brand-row">
          <div className="brand-mark">O</div>
          <div>
            <div className="brand-name">Oziq AI</div>
            <div className="brand-sub">Moliya Vazirligi · UZB</div>
          </div>
        </div>
      </div>
      <nav className="sidebar-nav">
        <div className="nav-section">Asosiy</div>
        {NAV_ITEMS.slice(0, 6).map((n, i) => (
          <a key={n.id} className={`nav-item ${current === n.id ? 'active' : ''}`} onClick={() => onNav(n.id)}>
            <span className="nav-num">{String(i + 1).padStart(2, '0')}</span>
            <Icon name={n.icon} size={14} />
            <span>{n.uz}</span>
            {badgeOf(n) ? <span className="nav-badge">{formatNum(badgeOf(n))}</span> : null}
          </a>
        ))}
        <div className="nav-section">Boshqaruv</div>
        {NAV_ITEMS.slice(6).map((n, i) => (
          <a key={n.id} className={`nav-item ${current === n.id ? 'active' : ''}`} onClick={() => onNav(n.id)}>
            <span className="nav-num">{String(i + 7).padStart(2, '0')}</span>
            <Icon name={n.icon} size={14} />
            <span>{n.uz}</span>
            {badgeOf(n) ? <span className="nav-badge">{formatNum(badgeOf(n))}</span> : null}
          </a>
        ))}
      </nav>
      <div className="sidebar-foot">
        <span className="dot dot-live" />
        <span>Tizim faol</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)' }}>v2.18</span>
      </div>
    </aside>
  );
}

function Topbar({ lang, onLang, onSearch }) {
  const [showNotif, setShowNotif] = useState(false);
  const notifRef = useRef(null);
  const { data: ov } = useApi('/api/stats/overview', { pollMs: 15000 });
  const tgMembers = ov?.farmers ?? 0;
  const tgTodayDelta = ov?.today ?? 0;
  useEffect(() => {
    if (!showNotif) return;
    const handler = (e) => {
      if (notifRef.current && !notifRef.current.contains(e.target)) {
        setShowNotif(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [showNotif]);
  return (
    <header className="topbar">
      <div className="top-section">
        <div className="top-title">Vazirlik Boshqaruv Paneli</div>
        <span className="top-tag">Beta</span>
      </div>
      <div className="top-divider" />
      <div className="top-metric">
        <div className="top-metric-k">Telegram aʼzolari</div>
        <div className="top-metric-v">
          {tgMembers.toLocaleString('en-US').replace(/,/g, ' ')}
          {tgTodayDelta > 0 && <span className="delta-up" style={{ fontSize: 10.5 }}>↑ {tgTodayDelta}</span>}
        </div>
      </div>
      <div className="top-divider" />
      <div className="top-metric">
        <div className="top-metric-k">{WEEKDAY_UZ}</div>
        <div className="top-metric-v" style={{ fontSize: 12 }}>
          {DATE_UZ}
        </div>
      </div>

      <div className="top-search">
        <span className="search-icon"><Icon name="search" size={14} /></span>
        <input placeholder="Qidirish: murojaat, fermer, mavzu..." onChange={e => onSearch && onSearch(e.target.value)} />
        <span className="search-kbd">/</span>
      </div>

      <div className="top-right">
        <div className="lang-switch">
          <button className={lang === 'uz-latn' ? 'on' : ''} onClick={() => onLang('uz-latn')}>UZ</button>
          <button className={lang === 'uz-cyrl' ? 'on' : ''} onClick={() => onLang('uz-cyrl')}>УЗ</button>
          <button className={lang === 'ru' ? 'on' : ''} onClick={() => onLang('ru')}>RU</button>
        </div>
        <div ref={notifRef} style={{ position: 'relative' }}>
          <button className="icon-btn" onClick={() => setShowNotif(!showNotif)}>
            <Icon name="bell" size={14} />
            <span className="bell-dot" />
          </button>
          {showNotif && (
            <div className="dropdown">
              <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontWeight: 600, fontSize: 12 }}>Ogohlantirishlar</span>
                <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--ink-4)' }}>{NOTIFICATIONS.length} yangi</span>
              </div>
              {NOTIFICATIONS.map((n, i) => (
                <div key={i} style={{ padding: '10px 14px', borderBottom: i < NOTIFICATIONS.length - 1 ? '1px solid var(--line)' : 'none', display: 'flex', gap: 10 }}>
                  <span className="dot" style={{
                    marginTop: 5,
                    background: n.kind === 'urgent' ? 'var(--rose)' : n.kind === 'anomaly' ? 'var(--amber)' : n.kind === 'system' ? 'var(--accent)' : 'var(--ink-4)'
                  }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11.5, color: 'var(--ink)' }}>{n.uz}</div>
                    <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--ink-4)', marginTop: 2 }}>{n.mins} daq oldin</div>
                  </div>
                </div>
              ))}
              <div style={{ padding: '8px 14px', textAlign: 'center', borderTop: '1px solid var(--line)' }}>
                <a style={{ fontSize: 11, color: 'var(--accent-ink)', textDecoration: 'none' }}>Hammasini koʻrish →</a>
              </div>
            </div>
          )}
        </div>
        <button className="icon-btn" title="Tungi rejim" onClick={() => {
          const cur = document.documentElement.getAttribute('data-theme');
          document.documentElement.setAttribute('data-theme', cur === 'dark' ? '' : 'dark');
        }}>
          <Icon name="moon" size={14} />
        </button>
        <div className="user-chip">
          <span className="user-avatar">FT</span>
          <div>
            <div className="user-name">F. Tojiyeva</div>
            <div className="user-role">Boʻlim boshligʻi</div>
          </div>
        </div>
      </div>
    </header>
  );
}

function StatusBar() {
  // synthesize a sparkline of api latency (live-ish)
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 5000);
    return () => clearInterval(t);
  }, []);
  const lat = useMemo(() => {
    const arr = [];
    let v = 142;
    for (let i = 0; i < 24; i++) {
      v = Math.max(80, Math.min(220, v + (rand() - 0.5) * 40));
      arr.push(Math.round(v));
    }
    return arr;
  }, [tick]);

  return (
    <footer className="statusbar">
      <div className="status-cell">
        <span className="dot dot-live" />
        <span className="k">AI:</span><span className="v">FAOL</span>
      </div>
      <div className="status-cell">
        <span className="k">oxirgi tekshiruv:</span><span className="v">2s oldin</span>
      </div>
      <div className="status-cell">
        <span className="k">API kechikish:</span>
        <Sparkline data={lat} width={70} height={14} color="oklch(0.92 0.005 90)" strokeWidth={1} />
        <span className="v">{lat[lat.length - 1]}ms</span>
      </div>
      <div className="status-cell">
        <span className="k">navbatda:</span><span className="v">{14 + (tick % 7)}</span>
      </div>
      <div className="status-cell">
        <span className="k">qabul:</span><span className="v">{(2.4 + ((tick % 5) * 0.1)).toFixed(1)} msg/min</span>
      </div>
      <div className="status-spacer" />
      <div className="status-cell">
        <span className="k">UTC+5</span><span className="v">14:30:{(28 + tick % 30).toString().padStart(2,'0')}</span>
      </div>
      <div className="status-cell">
        <span className="k">build:</span><span className="v">2.18.4-prod</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Sidebar, Topbar, StatusBar, NAV_ITEMS });