// Main app — Google SSO + client login + admin

const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [route, setRoute] = useStateApp(() => {
    const stored = localStorage.getItem('ser-route');
    return stored ? JSON.parse(stored) : { page: 'login' };
  });
  const [user, setUser] = useStateApp(() => {
    const stored = localStorage.getItem('ser-user');
    return stored ? JSON.parse(stored) : null;
  });

  useEffectApp(() => { localStorage.setItem('ser-route', JSON.stringify(route)); }, [route]);
  useEffectApp(() => { localStorage.setItem('ser-user', JSON.stringify(user)); }, [user]);

  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "teal",
    "density": "comfortable"
  }/*EDITMODE-END*/);

  useEffectApp(() => {
    document.body.className = tweaks.density === 'compact' ? 'density-compact' : '';
  }, [tweaks.density]);

  useEffectApp(() => {
    const root = document.documentElement;
    if (tweaks.accent === 'gold') {
      root.style.setProperty('--ser-teal', '#f5a523');
      root.style.setProperty('--ser-teal-600', '#dc8e0e');
      root.style.setProperty('--ser-teal-50', '#fff5e0');
      root.style.setProperty('--spec-seo', '#f5a523');
    } else if (tweaks.accent === 'navy') {
      root.style.setProperty('--ser-teal', '#3b3b8c');
      root.style.setProperty('--ser-teal-600', '#28286b');
      root.style.setProperty('--ser-teal-50', '#e6e6f5');
      root.style.setProperty('--spec-seo', '#3b3b8c');
    } else {
      root.style.setProperty('--ser-teal', '#00b4a0');
      root.style.setProperty('--ser-teal-600', '#00a092');
      root.style.setProperty('--ser-teal-50', '#e6f7f5');
      root.style.setProperty('--spec-seo', '#00b4a0');
    }
  }, [tweaks.accent]);

  const handleLogin = (u) => { setUser(u); setRoute({ page: 'home' }); };
  const goHome = () => setRoute({ page: 'home' });
  const openTool = (id) => setRoute({ page: 'tool', toolId: id });
  const goAdmin = () => setRoute({ page: 'admin' });
  const logout = () => { setUser(null); setRoute({ page: 'login' }); };

  if (route.page === 'login' || !user) {
    return <LoginPage onLogin={handleLogin} />;
  }

  // Determine which tools the user can access
  const isStaff = user.kind === 'staff';
  const allowedToolIds = isStaff
    ? null // null = all
    : (window.SER_CLIENTS.find(c => c.id === user.clientId)?.tools || []);

  return (
    <div className="app">
      <TopNav route={route} user={user} isStaff={isStaff} onHome={goHome} onAdmin={goAdmin} onLogout={logout} />
      {route.page === 'home'  && <HomePage onOpenTool={openTool} user={user} allowedToolIds={allowedToolIds} />}
      {route.page === 'tool'  && <ToolDetailPage toolId={route.toolId} onBack={goHome} />}
      {route.page === 'admin' && isStaff && <AdminPage onBack={goHome} />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent kleur">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'teal', label: 'Teal' },
              { value: 'gold', label: 'Gold' },
              { value: 'navy', label: 'Navy' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Densiteit">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'comfortable', label: 'Ruim' },
              { value: 'compact', label: 'Compact' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Demo: switch user">
          <TweakButton onClick={() => handleLogin({ kind:'staff', email:'joost@searchengineresults.nl', name:'Joost van Dijk' })}>Joost (SER staff)</TweakButton>
          <TweakButton onClick={() => handleLogin({ kind:'client', clientId:'intratuin', name:'Intratuin' })}>Intratuin (klant)</TweakButton>
          <TweakButton onClick={() => handleLogin({ kind:'client', clientId:'klantx', name:'Klant X' })}>Klant X (klant)</TweakButton>
        </TweakSection>
        <TweakSection title="Snelle navigatie">
          <TweakButton onClick={goHome}>Home</TweakButton>
          {isStaff && <TweakButton onClick={goAdmin}>Admin (klantbeheer)</TweakButton>}
          <TweakButton onClick={() => openTool('seo-ab')}>SEO A/B Platform</TweakButton>
          <TweakButton onClick={() => openTool('alt-tekst')}>Alt-tekst Generator</TweakButton>
          <TweakButton onClick={logout}>Uitloggen</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function TopNav({ route, user, isStaff, onHome, onAdmin, onLogout }) {
  const tool = route.page === 'tool' ? window.SER_DATA.TOOLS.find(t => t.id === route.toolId) : null;
  const initials = (user?.name || '??').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase();

  return (
    <div className="topnav" data-screen-label="TopNav">
      <div className="topnav-left">
        <a className="topnav-logo" onClick={onHome} style={{cursor:'pointer', textDecoration:'none'}}>
          <img src="assets/logo-blue.svg" alt="SER" style={{width:34, height:'auto', display:'block'}} />
          <div className="brand-stack">
            <span>SER Automation</span>
            <span className="brand-sub">searchengineresults.nl</span>
          </div>
        </a>
        <div className="topnav-crumbs">
          <a onClick={onHome}>Hub</a>
          {route.page === 'admin' && <><span className="sep">/</span><span className="current">Klantbeheer</span></>}
          {tool && <><span className="sep">/</span><span className="current">{tool.name}</span></>}
        </div>
      </div>
      <div className="topnav-right">
        {!isStaff && (
          <span className="pill pill-warn" style={{padding:'4px 10px'}}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Klant
          </span>
        )}
        <div className="topnav-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          <input placeholder="Zoek tools…"/>
          <span className="kbd">⌘K</span>
        </div>
        {isStaff && (
          <button className="icon-btn" title="Klantbeheer" onClick={onAdmin}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </button>
        )}
        <button className="icon-btn" title="Notificaties">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        </button>
        <button className="icon-btn" title="Uitloggen" onClick={onLogout}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>
        </button>
        <div className="avatar" title={user?.name || ''}>{initials}</div>
      </div>
    </div>
  );
}

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