/* Brand Lens — app shell + navigation.
   The chrome matches the published Proper Sky Brand Guide pages (Imagery.html
   et al.): shared sidebar nav, topbar crumb, page hero, underline tab strip.
   All workflow views (Library / Review / Scoreboard / StyleGuide / Playbook)
   are untouched — this file is presentation only. */
function App() {
  const [recs, setRecs] = useState(null);
  const [tab, setTab] = useState('library');
  const [layout, setLayoutState] = useState(() => localStorage.getItem('lens-layout') || 'focus');
  const [navOpen, setNavOpen] = useState(false);

  const reload = useCallback(async () => {
    const all = await window.LensDB.getAll();
    setRecs(all);
  }, []);
  useEffect(() => { reload(); }, [reload]);

  const setLayout = (l) => { setLayoutState(l); localStorage.setItem('lens-layout', l); };

  // navigate + refresh from DB so every tab sees the latest verdicts
  const go = useCallback((t) => { reload(); setTab(t); }, [reload]);

  // mobile drawer (same behavior as mobile-nav.js on the published pages,
  // but React-owned so it survives re-renders)
  useEffect(() => {
    document.body.classList.toggle('mnav-open', navOpen);
    return () => document.body.classList.remove('mnav-open');
  }, [navOpen]);
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setNavOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  if (recs === null) {
    return <div style={{ display: 'flex', height: '100vh', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-3)', gap: 12 }}><Spinner size={22} /> Loading your library…</div>;
  }

  const unrev = recs.filter((r) => !r.user).length;
  const reviewed = recs.filter((r) => r.user && r.ai).length;

  const tabs = [
    { k: 'library', label: 'Repository', icon: 'cards', badge: recs.length || null },
    { k: 'review', label: 'Calibrate', icon: 'scale', badge: unrev || null },
    { k: 'scoreboard', label: 'Scoreboard', icon: 'scale', badge: null },
    { k: 'guide', label: 'Style guide', icon: 'sparkle', badge: null },
    { k: 'playbook', label: 'Social playbook', icon: 'share', badge: null },
  ];

  return (
    <div>
      {/* mobile app bar + scrim (hidden on desktop via guide-shell.css) */}
      <div className="mnav">
        <button className="mnav__logo" type="button" aria-label="Back to top"
          onClick={() => { setNavOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <img src="assets/logo-blue-ink-ol.svg" alt="Proper Sky" />
          <span className="pg">Brand Lens</span>
        </button>
        <button className="mnav__menu" type="button" aria-label="Open navigation" aria-expanded={navOpen}
          onClick={() => setNavOpen(true)}>
          <span className="bars"><i></i><i></i><i></i></span>Menu
        </button>
      </div>
      <div className="mnav-scrim" aria-hidden="true" onClick={() => setNavOpen(false)}></div>

      <div className="guide">
        <aside className="side" id="guide-nav">
          <button className="side__close" type="button" aria-label="Close navigation" onClick={() => setNavOpen(false)}>✕</button>
          <div className="side__brand">
            <a href="index.html"><img className="brand-lockup" src="assets/logo-blue-ink-ol.svg" alt="Proper Sky" /></a>
          </div>
          <nav className="nav">
      <div className="nav__group">
        <p className="nav__label">Brand Foundations</p>
        <a className="nav__item" href="overview.html"><span className="nav__dot"></span>Overview</a>
        <a className="nav__item" href="mission-and-voice.html"><span className="nav__dot"></span>Mission &amp; Voice</a>
      </div>
      <div className="nav__group">
        <p className="nav__label">Design Elements</p>
        <a className="nav__item" href="logo.html"><span className="nav__dot"></span>Logo</a>
        <a className="nav__item" href="color.html"><span className="nav__dot"></span>Color</a>
        <a className="nav__item" href="gradients.html"><span className="nav__dot"></span>Gradients</a>
        <a className="nav__item" href="typography.html"><span className="nav__dot"></span>Typography</a>
        <a className="nav__item" href="iconography.html"><span className="nav__dot"></span>Iconography</a>
        <a className="nav__item" href="the-swell.html"><span className="nav__dot"></span>The Swell</a>
        <a className="nav__item" href="imagery.html"><span className="nav__dot"></span>Imagery</a>
      </div>
      <div className="nav__group">
        <p className="nav__label">In Practice</p>
        <a className="nav__item is-active" href="brand-lens.html"><span className="nav__dot"></span>Brand Lens</a>
        <a className="nav__item" href="design-principles.html"><span className="nav__dot"></span>Design Principles</a>
      </div>
    </nav>
          <div className="side__foot">
            <b>Proper Sky Brand Guide</b><br />
            IT the Proper Way™<br />
            v0.1 · Brand Lens<br />
            <span style={{ opacity: 0.8 }}>Images &amp; feedback stored in this browser — back up from the Repository tab.</span>
          </div>
        </aside>

        <div className="main">
          <header className="topbar">
            <div className="crumb">In Practice <span className="sep">/</span> <b>Brand Lens</b></div>
            <div className="topbar__actions">
              <span style={{ fontSize: 13, color: 'var(--fg-3)' }}>
                <b style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{reviewed}</b> reviewed · {unrev} to go
              </span>
              <a className="btn-ghost" href="imagery.html" style={{ textDecoration: 'none' }}>Imagery guidelines</a>
            </div>
          </header>

          <div className="wrap wrap--narrow" data-screen-label="Brand Lens">
            <div className="phero" style={{ padding: '44px 0 0' }}>
              <p className="eyebrow">In Practice · Imagery &amp; Social</p>
              <h1>Brand Lens</h1>
              <p className="lede" style={{ fontSize: 17, margin: '16px 0 0' }}>
                The judge that learns our eye. The AI calls each image first — <strong>you agree or disagree and say why</strong>. Your comments re-teach it between rounds, until its calls match ours.
              </p>
            </div>

            <nav className="lens-tabs" aria-label="Brand Lens sections">
              {tabs.map((n) => (
                <button key={n.k} type="button" onClick={() => go(n.k)}
                  className={'lens-tab' + (tab === n.k ? ' is-on' : '')}>
                  <Icon name={n.icon} size={15} />
                  <span>{n.label}</span>
                  {n.badge != null && <span className="ct">{n.badge}</span>}
                </button>
              ))}
            </nav>

            {tab === 'library' && <Library recs={recs} reload={reload} goReview={() => go('review')} />}
            {tab === 'review' && <Review recs={recs} reload={reload} layout={layout} setLayout={setLayout}
              goLibrary={() => go('library')} goScore={() => go('scoreboard')} />}
            {tab === 'scoreboard' && <Scoreboard recs={recs} goReview={() => go('review')} goGuide={() => go('guide')} />}
            {tab === 'guide' && <StyleGuide recs={recs} goReview={() => go('review')} />}
            {tab === 'playbook' && <Playbook recs={recs} goReview={() => go('review')} />}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);