// prototype-app.jsx — Shell + router. Bruker ekte Supabase-bruker i sidebar.

const NAV_ITEMS = [
  { id: 'home', label: 'Forside', icon: I.home, screen: 'home' },
  { id: 'projects', label: 'Prosjekter', icon: I.folder, screen: 'projects', badge: PROJECTS.filter(p => p.status === 'risk' || p.status === 'delay').length },
  { id: 'vvj', label: 'Verdens Viktigste Jobb', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="7" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>, screen: 'vvj', badge: VVJ_FORSKUDD.filter(f => f.status === 'ventende').length },
  { id: 'ressursbank', label: 'Ressursbank', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>, screen: 'ressursbank' },
  { id: 'protocols', label: 'Møter & protokoller', icon: I.mic, screen: 'protocols', badge: PROTOCOLS.filter(p => p.status === 'draft').length },
  { id: 'tasks', label: 'Tiltakspl.', icon: I.check, screen: 'tasks' },
];
const NAV_ITEMS_ORG = [
  { id: 'organisation', label: 'Organisasjon', icon: I.users, screen: 'organisation' },
  { id: 'agreements', label: 'Avtaler', icon: I.doc, screen: 'agreements' },
  { id: 'arshjul', label: 'Årshjul', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>, screen: 'arshjul' },
  { id: 'styre', label: 'Styreportal', icon: I.shield, screen: 'styre' },
];
const NAV_ITEMS_2 = [
  { id: 'rutiner', label: 'Rutiner & metodikk', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 9-9"/><path d="M3 4v5h5"/><path d="m12 7 0 5 4 2"/></svg>, screen: 'rutiner', badge: RUT_INSTANSER.filter(i => i.status === 'overdue').length },
  { id: 'personalhandbok', label: 'Personalhåndbok', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>, screen: 'personalhandbok' },
  { id: 'lederhandbok', label: 'Lederhåndbok', icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>, screen: 'lederhandbok' },
  { id: 'finance', label: 'Økonomi', icon: I.chart, screen: 'finance' },
  { id: 'budsjett', label: 'Budsjett', icon: I.chart, screen: 'budsjett' },
  { id: 'hr', label: 'HR', icon: I.users, screen: 'hr' },
  { id: 'kvalitet', label: 'Kvalitet (ISO)', icon: I.shield, screen: 'kvalitet' },
  { id: 'intranett', label: 'Intranett', icon: I.msg, screen: 'intranett' },
];

function NotImplemented({ name, modules }) {
  return (
    <div className="ok-content__inner" style={{ maxWidth: 720 }}>
      <Card padded>
        <div style={{ padding: '20px 16px' }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>Modul · ikke i prototype-scope</div>
          <h1 style={{ margin: '6px 0 10px', fontSize: 24, fontWeight: 600 }}>{name}</h1>
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: SK.soft }}>
            Modulen <b style={{ color: SK.ink }}>{name}</b> kobles inn senere — den henter data fra {modules}.
          </div>
        </div>
      </Card>
    </div>
  );
}

function App() {
  const [route, setRoute]   = React.useState({ screen: 'home' });
  const [bruker, setBruker] = React.useState(null);
  const { begrenset } = useEffektivTilgang();

  // Filtrer nav-elementer: skjul moduler den aktive (evt. simulerte) brukeren mangler tilgang til.
  // Kun aktivt under "se som"-begrensning, så vanlig drift er uendret.
  const synligNav = React.useCallback((items) => {
    if (!begrenset) return items;
    return items.filter(it => window._effektivTilgang.harScreen(it.screen));
  }, [begrenset]);

  const go = React.useCallback((r) => {
    setRoute(r);
    const c = document.querySelector('.ok-content');
    if (c) c.scrollTop = 0;
  }, []);

  // Hent innlogget bruker fra Supabase
  React.useEffect(() => {
    window._sb.auth.getUser().then(({ data: { user } }) => {
      if (!user) return;
      // Hent evt. utvidet profil fra profiles-tabellen
      window._sb.from('profiles').select('*, roller(nokkel,navn,farge)').eq('id', user.id).single()
        .then(({ data }) => {
          setBruker(data
            ? { ...data, epost: user.email }
            : { epost: user.email, navn: user.user_metadata?.full_name || user.email }
          );
          // Registrer ekte bruker i global visning-state
          if (window._visningState) {
            window._visningState.settEkte(data
              ? { ...data, epost: user.email }
              : { epost: user.email, navn: user.user_metadata?.full_name || user.email });
          }
        })
        .catch(() => {
          setBruker({ epost: user.email, navn: user.user_metadata?.full_name || user.email });
        });
    });
  }, []);

  const loggUt = () => window._sb.auth.signOut();

  // Initialer fra navn eller e-post
  const initialer = bruker?.navn
    ? bruker.navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase()
    : (bruker?.epost?.[0] || '?').toUpperCase();

  const visNavn = bruker?.navn || bruker?.epost || '…';
  const visRolle = bruker?.rolle || bruker?.avdeling
    ? [bruker?.rolle, bruker?.avdeling].filter(Boolean).join(' · ')
    : bruker?.epost || '';

  // Brødsmuler
  const crumbs = (() => {
    if (route.screen === 'home') return [{ label: 'Forside', now: true }];
    if (route.screen === 'projects') return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Prosjekter', now: true }];
    if (route.screen === 'project') {
      const p = PROJECTS.find(x => x.id === route.id);
      return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Prosjekter', go: () => go({ screen: 'projects' }) }, { label: p?.name || 'Prosjekt', now: true }];
    }
    if (route.screen === 'vvj')          return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Verdens Viktigste Jobb', now: true }];
    if (route.screen === 'protocols')    return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Protokoller', now: true }];
    if (route.screen === 'new-protocol') return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Protokoller', go: () => go({ screen: 'protocols' }) }, { label: 'Ny protokoll', now: true }];
    if (route.screen === 'series') {
      const s = MEETING_SERIES.find(x => x.id === route.id);
      return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Protokoller', go: () => go({ screen: 'protocols' }) }, { label: s?.name || 'Møteserie', now: true }];
    }
    if (route.screen === 'protocol') {
      const pr = PROTOCOLS.find(x => x.id === route.id);
      const s = pr ? MEETING_SERIES.find(x => x.id === pr.seriesId) : null;
      const c = [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Protokoller', go: () => go({ screen: 'protocols' }) }];
      if (s) c.push({ label: s.name, go: () => go({ screen: 'series', id: s.id }) });
      c.push({ label: pr?.title || 'Protokoll', now: true });
      return c;
    }
    if (route.screen === 'tasks')          return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Tiltaksplan', now: true }];
    if (route.screen === 'ressursbank')    return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Ressursbank', now: true }];
    if (route.screen === 'rutiner')        return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Rutiner & metodikk', now: true }];
    if (route.screen === 'organisation')   return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Organisasjon', now: true }];
    if (route.screen === 'agreements')     return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Avtaler', now: true }];
    if (route.screen === 'finance')        return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Økonomi', now: true }];
    if (route.screen === 'budsjett')       return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Budsjett', now: true }];
    if (route.screen === 'hr')             return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'HR & personal', now: true }];
    if (route.screen === 'arshjul')        return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Årshjul 2026', now: true }];
    if (route.screen === 'personalhandbok')return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Personalhåndbok', now: true }];
    if (route.screen === 'lederhandbok')   return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Lederhåndbok', now: true }];
    if (route.screen === 'kvalitet')       return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Kvalitet (ISO)', now: true }];
    if (route.screen === 'styre')          return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Styreportal', now: true }];
    if (route.screen === 'settings')       return [{ label: 'Forside', go: () => go({ screen: 'home' }) }, { label: 'Tilganger & innstillinger', now: true }];
    return [{ label: route.screen, now: true }];
  })();

  const activeNav = route.screen === 'project' ? 'projects'
    : (route.screen === 'protocol' || route.screen === 'series' || route.screen === 'new-protocol') ? 'protocols'
    : route.screen;

  return (
    <div className="ok-shell">
      <aside className="ok-side">
        <div className="ok-side__brand">
          <OkLogo size={28} />
          <div style={{ flex: 1 }}>
            <div className="ok-side__brand-text">OsloKollega</div>
            <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,.55)', marginTop: 1 }}>Totalsystem</div>
          </div>
        </div>
        <nav className="ok-side__nav">
          <div className="ok-side__sectlbl">Arbeid</div>
          {synligNav(NAV_ITEMS).map(item => (
            <button key={item.id} className={`ok-side__item ${activeNav === item.id ? 'ok-side__item--active' : ''}`} onClick={() => go({ screen: item.screen })}>
              <span className="ok-side__item-icon">{item.icon}</span>
              <span>{item.label}</span>
              {item.badge ? <span className="ok-side__badge">{item.badge}</span> : null}
            </button>
          ))}
          <div className="ok-side__sectlbl">Organisasjon</div>
          {synligNav(NAV_ITEMS_ORG).map(item => (
            <button key={item.id} className={`ok-side__item ${activeNav === item.id ? 'ok-side__item--active' : ''}`} onClick={() => go({ screen: item.screen })}>
              <span className="ok-side__item-icon">{item.icon}</span>
              <span>{item.label}</span>
            </button>
          ))}
          <div className="ok-side__sectlbl">Drift</div>
          {synligNav(NAV_ITEMS_2).map(item => (
            <button key={item.id} className={`ok-side__item ${activeNav === item.id ? 'ok-side__item--active' : ''}`} onClick={() => go({ screen: item.screen })}>
              <span className="ok-side__item-icon">{item.icon}</span>
              <span>{item.label}</span>
              {item.badge ? <span className="ok-side__badge">{item.badge}</span> : null}
            </button>
          ))}
          <div className="ok-side__sectlbl">Administrasjon</div>
          <button className={`ok-side__item ${activeNav === 'settings' ? 'ok-side__item--active' : ''}`} onClick={() => go({ screen: 'settings' })}>
            <span className="ok-side__item-icon">{I.cog}</span>
            <span>Tilganger</span>
          </button>
        </nav>

        {/* Sidebar-bruker: ekte data fra Supabase */}
        <div className="ok-side__user" style={{ cursor: 'pointer' }} onClick={loggUt} title="Klikk for å logge ut">
          <div className="ok-side__user-avatar">{initialer}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="ok-side__user-name" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {visNavn}
            </div>
            <div className="ok-side__user-role" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {visRolle || 'Klikk for å logge ut'}
            </div>
          </div>
        </div>
      </aside>

      <main className="ok-main">
        <SimuleringsBanner />
        <div className="ok-topbar">
          <div className="ok-topbar__crumbs">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ color: 'rgba(17,24,61,.3)' }}>{I.chevron}</span>}
                {c.now ? <span className="now">{c.label}</span> : <button onClick={c.go}>{c.label}</button>}
              </React.Fragment>
            ))}
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
            <GlobalSokFelt go={go} />
            <VarselKlokke go={go} />
          </div>
        </div>
        <div className="ok-content">
          {begrenset && !window._effektivTilgang.harScreen(route.screen) ? (
            <div className="ok-content__inner" style={{ maxWidth: 640 }}>
              <Card padded>
                <div style={{ padding: '28px 20px', textAlign: 'center' }}>
                  <div style={{ fontSize: 30, marginBottom: 12 }}>🔒</div>
                  <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 8 }}>Ingen tilgang i denne visningen</div>
                  <div style={{ fontSize: 13, color: SK.soft, lineHeight: 1.6, marginBottom: 16 }}>
                    Brukeren du ser systemet som har ikke tilgang til denne modulen.
                    Du ser kun det denne brukeren selv ville sett.
                  </div>
                  <Button onClick={() => go({ screen: 'home' })}>Til forsiden</Button>
                </div>
              </Card>
            </div>
          ) : (
          <React.Fragment>
          {route.screen === 'home'           && <Forside go={go} bruker={bruker} />}
          {route.screen === 'projects'       && <ProjectList go={go} />}
          {route.screen === 'project'        && <ProjectDetail id={route.id} go={go} />}
          {route.screen === 'vvj'            && <VVJWorkspace go={go} deeplink={route.tab} />}
          {route.screen === 'rutiner'        && <RutinerWorkspace go={go} />}
          {route.screen === 'ressursbank'    && <RessursbankWorkspace go={go} />}
          {route.screen === 'protocols'      && <ProtocolHub go={go} />}
          {route.screen === 'series'         && <MeetingSeriesDetail id={route.id} go={go} />}
          {route.screen === 'protocol'       && <Protocol id={route.id} go={go} />}
          {route.screen === 'new-protocol'   && <NewProtocol go={go} />}
          {route.screen === 'tasks'          && <TaskBoard go={go} />}
          {route.screen === 'organisation'   && <Organisation go={go} />}
          {route.screen === 'agreements'     && <Agreements go={go} />}
          {route.screen === 'arshjul'        && <ÅrshjulWorkspace go={go} />}
          {route.screen === 'personalhandbok'&& <Personalhandbok go={go} />}
          {route.screen === 'lederhandbok'   && <Lederhandbok go={go} />}
          {route.screen === 'finance'        && <OkonomiWorkspace go={go} />}
          {route.screen === 'budsjett'       && <BudsjettWorkspace go={go} />}
          {route.screen === 'hr'             && <HRWorkspace go={go} initialTab={route.tab} initialInitials={route.initials} />}
          {route.screen === 'kvalitet'       && <KvalitetWorkspace go={go} initialTab={route.tab} />}
          {route.screen === 'intranett'      && <IntranettWorkspace go={go} />}
          {route.screen === 'styre'          && <StyreWorkspace go={go} initialTab={route.tab} />}
          {route.screen === 'settings'       && <TilgangWorkspace go={go} />}
          </React.Fragment>
          )}
        </div>
      </main>
    </div>
  );
}

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