/* Sanio Hi-Fi · App Shell
 * Top navigation with 4 surfaces. Each view fills the rest of the viewport.
 */

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

function Wordmark({ size = 22, dark = false }) {
  return (
    <div className="row middle gap-8" style={{ userSelect: 'none' }}>
      <span
        style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: size + 6, height: size + 6,
          borderRadius: 7,
          background: 'var(--accent)',
          color: 'white',
          fontWeight: 700, fontSize: size * 0.62,
          letterSpacing: '-0.02em',
        }}
      >S</span>
      <span style={{
        fontSize: size * 0.82,
        fontWeight: 600,
        letterSpacing: '-0.018em',
        color: dark ? 'white' : 'var(--ink)',
      }}>
        Sanio
      </span>
    </div>
  );
}

function TopNav({ active, onNavigate }) {
  const items = [
    { id: 'overview', label: 'Übersicht' },
    { id: 'mobile',   label: 'Mobile App' },
    { id: 'dashboard',label: 'Berater-Dashboard' },
    { id: 'emails',   label: 'E-Mails' },
  ];
  return (
    <header style={{
      height: 60, flexShrink: 0,
      borderBottom: '1px solid var(--line)',
      background: 'rgba(255,255,255,0.85)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center',
      padding: '0 24px',
    }}>
      <button onClick={() => onNavigate('overview')} style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer' }}>
        <Wordmark size={20} />
      </button>

      <nav className="row middle" style={{ marginLeft: 36, gap: 2 }}>
        {items.map((i) => (
          <button
            key={i.id}
            onClick={() => onNavigate(i.id)}
            className={active === i.id ? 'active' : ''}
            style={{
              height: 34, padding: '0 12px',
              borderRadius: 8,
              fontSize: 13.5,
              fontWeight: active === i.id ? 600 : 500,
              color: active === i.id ? 'var(--ink)' : 'var(--ink-soft)',
              background: active === i.id ? 'var(--surface-3)' : 'transparent',
              transition: 'background .12s ease, color .12s ease',
              whiteSpace: 'nowrap',
              flexShrink: 0,
            }}
            onMouseEnter={(e) => { if (active !== i.id) e.currentTarget.style.background = 'var(--surface-2)'; }}
            onMouseLeave={(e) => { if (active !== i.id) e.currentTarget.style.background = 'transparent'; }}
          >
            {i.label}
          </button>
        ))}
      </nav>

      <div className="grow" />

      <div className="row middle gap-8" style={{ flexShrink: 0 }}>
        <div className="pill">
          <span className="dot green" />
          Klickbarer Prototyp · v1
        </div>
        <button className="btn sm subtle" title="Auf GitHub">
          <Icon name="external" size={13} /> Quelltext
        </button>
      </div>
    </header>
  );
}

/* Minimal route hash-binding so refresh keeps the view */
function useHashRoute(initial = 'overview') {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace('#', '');
    return h || initial;
  });
  useEffect(() => {
    const fn = () => setRoute(window.location.hash.replace('#', '') || initial);
    window.addEventListener('hashchange', fn);
    return () => window.removeEventListener('hashchange', fn);
  }, [initial]);
  const go = useCallback((id) => {
    window.location.hash = id;
    setRoute(id);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);
  return [route, go];
}

window.Wordmark = Wordmark;
window.TopNav = TopNav;
window.useHashRoute = useHashRoute;