/* Shared atomic components */

const { useState, useEffect, useMemo, useRef } = React;

function useTheme() {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  return [theme, setTheme];
}

function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem('cellar-lang') || 'both');
  useEffect(() => {
    document.documentElement.setAttribute('data-lang', lang);
    localStorage.setItem('cellar-lang', lang);
  }, [lang]);
  return [lang, setLang];
}

function useHashRoute() {
  const [hash, setHash] = useState(() => window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => { setHash(window.location.hash || '#/'); window.scrollTo(0, 0); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return hash;
}

function L({ en, cn, lang }) {
  if (lang === 'cn') return cn || en;
  if (lang === 'en') return en;
  return (
    <React.Fragment>
      <span>{en}</span>
      {cn && <span className="font-serif-cn" style={{ marginLeft: 10, color: 'var(--muted)' }}>· {cn}</span>}
    </React.Fragment>
  );
}

function Topbar({ lang, setLang, theme, setTheme, route }) {
  const items = [
    ['#/',          'home'],
    ['#/notes',     'notes'],
    ['#/cellar',    'cellar'],
    ['#/articles',  'reading'],
    ['#/analytics', 'analytics'],
    ['#/about',     'about'],
  ];
  const isActive = (href) => href === '#/' ? (route === '#/' || route === '') : route.startsWith(href);
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#/" className="brand">
          <span className="brand-wordmark">Michael, in wine</span>
        </a>
        <nav className="nav">
          {items.map(([href, key]) => (
            <a key={href} href={href} className={isActive(href) ? 'active' : ''}>
              {lang === 'cn' ? STR.nav[key].cn : STR.nav[key].en}
            </a>
          ))}
        </nav>
        <div className="toggles">
          <button className={`tog ${lang === 'en' ? 'active' : ''}`} onClick={() => setLang('en')}>EN</button>
          <button className={`tog ${lang === 'cn' ? 'active' : ''}`} onClick={() => setLang('cn')}>中</button>
          <button className={`tog ${lang === 'both' ? 'active' : ''}`} onClick={() => setLang('both')}>双</button>
          <span style={{ width: 14 }} />
          <button className="tog" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
            {theme === 'dark' ? '☾  Night' : '☀  Day'}
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ lang }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <div className="footer-quote">
            "Wine is a private thing — the site should feel like a bottle opened alone, late at night."
          </div>
          <div className="footer-quote-cn">
            饮酒是一件私人的事 — 网站的氛围应该像夜深了一个人开瓶。
          </div>
        </div>
        <div>
          <h4>Sections</h4>
          <ul>
            <li><a href="#/notes">Tasting Notes · 酒评</a></li>
            <li><a href="#/cellar">Cellar · 酒柜</a></li>
            <li><a href="#/analytics">Analytics · 数据</a></li>
            <li><a href="#/about">About · 关于</a></li>
          </ul>
        </div>
        <div>
          <h4>Index</h4>
          <ul>
            <li><a href="#/notes?sort=loved">Loved bottles</a></li>
            <li><a href="#/notes?sort=high">Highest rated</a></li>
            <li><a href="#/cellar">Drinking now</a></li>
            <li><a href="#/random">Random pour</a></li>
          </ul>
        </div>
        <div>
          <h4>Colophon</h4>
          <ul>
            <li>Cormorant + Noto Serif</li>
            <li>JetBrains Mono</li>
            <li>Static · No tracking</li>
            <li>Updated · 2026 · 04</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>Wine · Words · Lives in between</span>
        <span>© 2026 — A personal cellar log</span>
      </div>
    </footer>
  );
}

function BottleSVG({ accent = 'var(--wine)', className }) {
  // Simple silhouette: claret bottle. Subtle, no fake label art.
  return (
    <svg className={className} viewBox="0 0 32 100" fill="none">
      <path d="M12 2 H20 V18 C20 20 22 22 22 26 V32 C26 34 28 38 28 44 V92 C28 95 26 97 24 97 H8 C6 97 4 95 4 92 V44 C4 38 6 34 10 32 V26 C10 22 12 20 12 18 Z"
        fill="var(--surface)" stroke="var(--rule-strong)" strokeWidth="0.6" />
      <rect x="9" y="50" width="14" height="22" fill={accent} opacity="0.85" />
      <rect x="11" y="55" width="10" height="0.4" fill="var(--cream)" opacity="0.5" />
      <rect x="11" y="58" width="6" height="0.3" fill="var(--cream)" opacity="0.4" />
      <rect x="13" y="3" width="6" height="14" fill="var(--rule-strong)" opacity="0.5" />
    </svg>
  );
}

function RatingPill({ value, lang }) {
  if (value == null || value === 0) return <span className="rating-pill" style={{ color: 'var(--muted-2)', fontSize: 14 }}>—</span>;
  return (
    <span className="rating-pill">
      {value}
      <span className="small">/100</span>
    </span>
  );
}

function ScoreBar({ value, max = 100 }) {
  const pct = Math.max(0, Math.min(1, (value || 0) / max));
  return (
    <div className="score-bar">
      <div className="score-bar-fill" style={{ width: `${pct * 100}%` }} />
    </div>
  );
}

window.useTheme = useTheme;
window.useLang = useLang;
window.useHashRoute = useHashRoute;
window.L = L;
window.Topbar = Topbar;
window.Footer = Footer;
window.BottleSVG = BottleSVG;
window.RatingPill = RatingPill;
window.ScoreBar = ScoreBar;