/* global React, UI */
const { useState } = React;

function Logo({ size = 32 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--bronze)' }}>
        <rect x="8" y="8" width="48" height="48" rx="2"/>
        <rect x="13" y="13" width="38" height="38" rx="1"/>
        <path d="M22 22 L22 42"/><path d="M22 26 L30 26"/><path d="M22 34 L30 34"/>
        <path d="M36 22 L42 22 L42 42 L36 42"/><path d="M36 32 L42 32"/>
      </svg>
      <span style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 600, color: 'var(--ink)', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>陛下信箱</span>
    </span>
  );
}

function ThemeToggle({ variant }) {
  const [theme, setTheme] = useState(typeof window !== 'undefined' && window.bxGetTheme ? window.bxGetTheme() : 'light');
  const isDark = theme === 'dark';
  const toggle = () => setTheme(window.bxToggleTheme ? window.bxToggleTheme() : (isDark ? 'light' : 'dark'));
  const icon = isDark ? (
    /* sun → 切到日间 */
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5 5l1.8 1.8M17.2 17.2L19 19M19 5l-1.8 1.8M6.8 17.2L5 19"/></svg>
  ) : (
    /* moon → 切到夜间 */
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13.5A8 8 0 1 1 10.5 4a6.2 6.2 0 0 0 9.5 9.5z"/></svg>
  );
  const label = isDark ? '切换到日间 · 白昼朝堂' : '切换到夜间 · 暗夜朝堂';
  if (variant === 'drawer') {
    return <button className="bx-nav__drawer-item" onClick={toggle}>{isDark ? '☀ 日间模式' : '☾ 夜间模式'}</button>;
  }
  return <button className="bx-nav__iconbtn bx-nav__iconbtn--theme" onClick={toggle} aria-label={label} title={label}>{icon}</button>;
}

function Nav({ active, onNav, user, onLogin, onLogout, onSearch, onBell, notifCount }) {
  const items = [
    { id: 'home', label: '首页' },
    { id: 'compose', label: '呈递奏折' },
    { id: 'feed', label: '御批精选' },
    { id: 'rank', label: '爱卿榜' },
    { id: 'track', label: '查询进度' },
  ];
  const [open, setOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <header className="bx-nav">
      <div className="bx-nav__inner">
        <button className="bx-nav__logo" onClick={() => onNav('home')}><Logo /></button>
        <nav className="bx-nav__links">
          {items.map(i => (
            <button key={i.id} className={`bx-nav__link ${active === i.id ? 'is-active' : ''}`} onClick={() => onNav(i.id)}>{i.label}</button>
          ))}
        </nav>
        <div className="bx-nav__right">
          <ThemeToggle />
          <button className="bx-nav__iconbtn bx-nav__iconbtn--search" onClick={onSearch} aria-label="搜索" title="搜索 · ⌘K">{UI && UI.search}</button>
          {user && <button className="bx-nav__iconbtn bx-nav__iconbtn--bell" onClick={onBell} aria-label="通知">
            {UI && UI.bell}
            {notifCount > 0 && <span className="bx-nav__iconbtn-dot">{notifCount}</span>}
          </button>}
          {!user ? (
            <button className="bx-btn bx-btn--secondary bx-btn--sm" onClick={onLogin}>登入朝堂</button>
          ) : (
            <div className="bx-user" onClick={() => setMenuOpen(!menuOpen)}>
              <div className="bx-user__avatar">
                <svg viewBox="0 0 80 80" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="40" cy="44" r="18"/>
                  <rect x="24" y="20" width="32" height="6" rx="1"/>
                  <circle cx="34" cy="44" r="1.4" fill="currentColor"/><circle cx="46" cy="44" r="1.4" fill="currentColor"/>
                  <path d="M36 50 Q 40 53, 44 50"/>
                </svg>
              </div>
              <span className="bx-user__name">{user.name}</span>
              <span className="bx-user__chev">▾</span>
              {menuOpen && (
                <div className="bx-user__menu">
                  <button onClick={() => { onNav('me'); setMenuOpen(false); }}>我的奏折</button>
                  <button onClick={() => { onNav('me'); setMenuOpen(false); }}>个人中心</button>
                  <div className="bx-user__sep"/>
                  <button onClick={() => { onLogout(); setMenuOpen(false); }}>退出朝堂</button>
                </div>
              )}
            </div>
          )}
          <button className="bx-nav__burger" onClick={() => setOpen(!open)} aria-label="menu">
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {open && (
        <div className="bx-nav__drawer">
          {items.map(i => (
            <button key={i.id} className={'bx-nav__drawer-item ' + (active === i.id ? 'is-active' : '')} onClick={() => { onNav(i.id); setOpen(false); }}>{i.label}</button>
          ))}
          <button className="bx-nav__drawer-item" onClick={() => { onSearch && onSearch(); setOpen(false); }}>搜索</button>
          <ThemeToggle variant="drawer" />
          {!user ? (
            <button className="bx-btn bx-btn--primary" onClick={() => { onLogin(); setOpen(false); }}>登入朝堂</button>
          ) : (
            <>
              <button className={'bx-nav__drawer-item ' + (active === 'me' ? 'is-active' : '')} onClick={() => { onNav('me'); setOpen(false); }}>我的奏折</button>
              <button className="bx-btn bx-btn--secondary" onClick={() => { onLogout(); setOpen(false); }}>退出朝堂</button>
            </>
          )}
        </div>
      )}
    </header>
  );
}

function Footer({ onNav }) {
  const go = (r) => (e) => { e.preventDefault(); onNav && onNav(r); };
  return (
    <footer className="bx-footer">
      <div className="bx-footer__inner">
        <div className="bx-footer__col">
          <Logo size={28}/>
          <p className="bx-footer__tag">爱卿有事,不妨上奏</p>
        </div>
        <div className="bx-footer__col">
          <h5>快捷</h5>
          <a href="#" onClick={go('about')}>关于陛下</a>
          <a href="#" onClick={go('rules')}>投稿须知</a>
          <a href="#" onClick={go('faq')}>常见问题</a>
          <a href="#" onClick={go('404')}>联系小秘书</a>
        </div>
        <div className="bx-footer__col">
          <h5>朝会</h5>
          <a>抖音 · 陛下</a>
          <a>抖音 · 陛下ovo</a>
          <p className="bx-footer__small">朝会不定时开播 · 以抖音预告为准</p>
        </div>
      </div>
      <div className="bx-footer__bar">
        <span>© 2026 陛下信箱 · 此非抖音官方,仅为粉丝互动所设</span>
        <a className="bx-footer__icp" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">闽ICP备2026023643号-1</a>
      </div>
    </footer>
  );
}

function Button({ variant = 'primary', size, children, icon, onClick, type, disabled, title }) {
  const cls = `bx-btn bx-btn--${variant}${size ? ' bx-btn--' + size : ''}`;
  return <button type={type} className={cls} onClick={onClick} disabled={disabled} title={title}>{icon}<span>{children}</span></button>;
}

function SealIcon({ size = 14, color = 'var(--bronze)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" style={{ color }}>
      <rect x="4" y="4" width="24" height="24" rx="1" fill="currentColor"/>
      <g stroke="#FAF7F2" strokeWidth="1.5" strokeLinecap="round" fill="none">
        <path d="M11 11 L11 21"/><path d="M11 13 L15 13"/><path d="M11 17 L15 17"/>
        <path d="M19 11 L22 11 L22 21 L19 21"/><path d="M19 16 L22 16"/>
      </g>
    </svg>
  );
}

function CloudDivider() {
  return (
    <svg className="bx-divider" viewBox="0 0 400 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" style={{ color: 'var(--bronze-line)' }}>
      <line x1="0" y1="12" x2="160" y2="12" strokeDasharray="1 3" opacity="0.6"/>
      <g transform="translate(200 12)">
        <path d="M-16 0 Q -12 -6, -6 -5 Q -2 -4, -2 0 Q -2 4, -6 4 Q -10 4, -10 0"/>
        <path d="M0 -4 L4 0 L0 4 L-4 0 Z" strokeWidth="0.75"/>
        <path d="M16 0 Q 12 -6, 6 -5 Q 2 -4, 2 0 Q 2 4, 6 4 Q 10 4, 10 0"/>
      </g>
      <line x1="240" y1="12" x2="400" y2="12" strokeDasharray="1 3" opacity="0.6"/>
    </svg>
  );
}

Object.assign(window, { Logo, Nav, Footer, Button, SealIcon, CloudDivider });