/* global React */
// Shared chrome: top nav, side nav, footer, tweaks panel

const { useState, useEffect } = React;

const NAV_ITEMS = [
  { path: '/',             label: 'Profile',     short: '01' },
  { path: '/philosophy',   label: 'Philosophy',  short: '02' },
  { path: '/recognition',  label: 'Recognition', short: '03' },
  { path: '/planning',     label: 'Planning',    short: '04' },
  { path: '/curriculum',   label: 'Curriculum',  short: '05' },
  { path: '/data',         label: 'Data',        short: '06' },
  { path: '/resume',       label: 'Resume',      short: '07' },
  { path: '/letters',      label: 'Letters',     short: '08' },
  { path: '/contact',      label: 'Contact',     short: '09' },
];

function Brand({ onNav }) {
  return (
    <a href="#/" className="brand" onClick={(e) => { e.preventDefault(); onNav('/'); }}>
      <span className="dot" />
      Kade Bennett
    </a>
  );
}

function MobileMenu({ open, onToggle }) {
  return (
    <button
      className={'mobile-menu-btn' + (open ? ' open' : '')}
      onClick={onToggle}
      aria-label="Toggle menu"
    >
      <span />
    </button>
  );
}

function MobileBackdrop({ onClick }) {
  return <div className="mobile-backdrop" onClick={onClick} />;
}

function TopNav({ path, onNav }) {
  return (
    <nav className="topnav">
      <div className="topnav-inner">
        <Brand onNav={onNav} />
        <div className="nav">
          {NAV_ITEMS.map(item => (
            <a
              key={item.path}
              href={`#${item.path}`}
              onClick={(e) => { e.preventDefault(); onNav(item.path); }}
              className={path === item.path ? 'active' : ''}
            >
              {item.label}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

function SideNav({ path, onNav }) {
  return (
    <aside className="sidenav">
      <Brand onNav={onNav} />
      <div className="nav">
        {NAV_ITEMS.map((item, i) => (
          <a
            key={item.path}
            href={`#${item.path}`}
            onClick={(e) => { e.preventDefault(); onNav(item.path); }}
            className={path === item.path ? 'active' : ''}
          >
            <span style={{
              fontSize: 10,
              letterSpacing: '0.22em',
              color: '#6b6b6b',
              marginRight: 10
            }}>{item.short}</span>
            {item.label}
          </a>
        ))}
      </div>
    </aside>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="site-foot">
      <div className="foot-grid">
        <div>
          <h4>Kade Bennett</h4>
          <p style={{ fontSize: 14, color: '#3a3a3a', maxWidth: '42ch' }}>
            English teacher at ITW David Speer Academy in the Noble Network of Charter Schools, Chicago.
          </p>
        </div>
        <div>
          <h4>Sections</h4>
          {NAV_ITEMS.slice(0, 4).map(i => (
            <a key={i.path} href={`#${i.path}`} onClick={(e)=>{e.preventDefault();onNav(i.path);}}>{i.label}</a>
          ))}
        </div>
        <div>
          <h4>More</h4>
          {NAV_ITEMS.slice(4).map(i => (
            <a key={i.path} href={`#${i.path}`} onClick={(e)=>{e.preventDefault();onNav(i.path);}}>{i.label}</a>
          ))}
        </div>
        <div>
          <h4>Contact</h4>
          <span style={{fontSize:14, display:'block', padding:'4px 0', color:'#3a3a3a'}}>kade.matthew.bennett@gmail.com</span>
          <a href="#/contact" onClick={(e)=>{e.preventDefault();onNav('/contact');}}>Send a message →</a>
        </div>
      </div>
      <div className="foot-signature">
        <span>© {new Date().getFullYear()} Kade Bennett</span>
        <span>Teaching Portfolio · Chicago, IL</span>
      </div>
    </footer>
  );
}

function TweaksPanel({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  return (
    <div id="tweaks" className={open ? 'open' : ''}>
      <header>
        <span>Tweaks</span>
        <span style={{cursor:'pointer', opacity:0.7}} onClick={() => setOpen(false)}>×</span>
      </header>
      <div className="content">
        <h5>Homepage Hero</h5>
        <div className="opt-row">
          {['a','b','c'].map(v => (
            <button key={v}
              className={'opt ' + (tweaks.hero === v ? 'active' : '')}
              onClick={() => update('hero', v)}
            >Hero {v.toUpperCase()}</button>
          ))}
        </div>
        <h5>Navigation</h5>
        <div className="opt-row two">
          {[['top','Top Bar'],['sidebar','Side Rail']].map(([v,label]) => (
            <button key={v}
              className={'opt ' + (tweaks.nav === v ? 'active' : '')}
              onClick={() => update('nav', v)}
            >{label}</button>
          ))}
        </div>
        <h5>Title hover color</h5>
        <div className="opt-row two">
          {[['#F4C430','Yellow'],['#0A2540','Navy']].map(([v,label]) => (
            <button key={v}
              className={'opt ' + (tweaks.hoverColor === v ? 'active' : '')}
              onClick={() => update('hoverColor', v)}
            >{label}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NAV_ITEMS, TopNav, SideNav, Footer, TweaksPanel, Brand, MobileMenu, MobileBackdrop });