// ============================================================
// LSPD — App Router + Theme Provider
// ============================================================

const DEFAULT_DARK = {
  '--c-bg': '#0A1628', '--c-bg2': '#0c1a2f', '--c-card': '#16243c',
  '--c-border': '#27395a', '--c-ink': '#FFFFFF', '--c-muted': '#8899AA',
};
const LIGHT_VARS = {
  '--c-bg': '#EEF1F5', '--c-bg2': '#E4E9F0', '--c-card': '#FFFFFF',
  '--c-border': '#D5DCE6', '--c-ink': '#0A1628', '--c-muted': '#5A6B7E',
};

function hexToSoft(hex, a = 0.16) {
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
  const r = parseInt(n.slice(0, 2), 16), g = parseInt(n.slice(2, 4), 16), b = parseInt(n.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

function applyTheme({ themeId, dark, accent }) {
  const tpl = THEME_TEMPLATES.find(t => t.id === themeId);
  const baseDark = tpl ? { ...DEFAULT_DARK, ...tpl.vars } : DEFAULT_DARK;
  const base = dark ? baseDark : LIGHT_VARS;
  const root = document.documentElement;
  Object.entries(base).forEach(([k, v]) => root.style.setProperty(k, v));
  root.style.setProperty('--c-accent', accent);
  root.style.setProperty('--c-accent-soft', hexToSoft(accent, dark ? 0.16 : 0.1));
  root.classList.toggle('light', !dark);
}

// ---- Epilepsie-Warnung vor Aktivierung des Alarms ----
function EpilepsyWarning({ open, onCancel, onConfirm }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[200] grid place-items-center p-4">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onCancel} />
      <div className="relative w-full max-w-md rounded-lg border-2 border-danger bg-card p-6 shadow-glass fadeup">
        <div className="flex items-center gap-3">
          <div className="grid place-items-center h-11 w-11 rounded-md bg-danger text-white shrink-0" style={{ animation: 'pulse-ring 1.4s infinite' }}>
            <Icon name="TriangleAlert" size={24} />
          </div>
          <div>
            <div className="text-[11px] uplabel text-danger">Achtung</div>
            <h3 className="text-lg font-extrabold leading-tight">Epilepsie-Warnung</h3>
          </div>
        </div>
        <p className="mt-4 text-sm text-muted leading-relaxed">
          Der <b className="text-ink">Police-Alarm-Modus</b> zeigt im Hintergrund ein
          <b className="text-ink"> blinkendes blau-rotes Sirenenlicht</b>. Dies kann bei Personen mit
          photosensitiver Epilepsie Anfälle auslösen. Aktiviere den Modus nur, wenn du dir sicher bist.
        </p>
        <div className="mt-6 flex justify-end gap-2">
          <Btn variant="ghost" onClick={onCancel}>Abbrechen</Btn>
          <Btn variant="danger" icon="Siren" onClick={onConfirm}>Verstanden — Alarm aktivieren</Btn>
        </div>
      </div>
    </div>
  );
}

function parseInitialRoute() {
  const p = window.location.pathname;
  if (p === '/panel' || p.startsWith('/dashboard')) return { route: 'dashboard', view: 'dashboard' };
  if (p === '/login') return { route: 'login', view: 'dashboard' };
  if (p.includes('bewerb')) return { route: 'bewerbung', view: 'dashboard' };
  if (p.includes('beschwerde') || p.includes('ticket')) return { route: 'tickets', view: 'dashboard' };
  return { route: 'home', view: 'dashboard' };
}

function App() {
  const initial = parseInitialRoute();
  const [ready, setReady] = useState(false);
  const [route, setRoute] = useState(initial.route);
  const [view, setView] = useState(initial.view);
  const [site, setSite] = useState(null);
  const [sessionUser, setSessionUser] = useState(null);
  const [sbOpen, setSbOpen] = useState(false);
  const [studioOpen, setStudioOpen] = useState(false);
  const [dark, setDark] = useState(true);
  const [accent, setAccent] = useState('#2A6FDB');
  const [themeId, setThemeId] = useState('staatlich');
  const [alarm, setAlarm] = useState(false);
  const [warnOpen, setWarnOpen] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        if (!window.LSPD) {
          console.error('[LSPD] bridge.jsx nicht geladen');
          setReady(true);
          return;
        }
        const siteData = await window.LSPD.loadSite();
        setSite(siteData);
        const me = await window.LSPD.loadMe();
        if (me?.user) {
          setSessionUser(me.user);
          if (initial.route === 'dashboard') setRoute('dashboard');
        } else if (initial.route === 'dashboard') {
          window.location.href = window.LSPD.loginUrl('staff', '/panel');
          return;
        }
      } catch (e) {
        console.error('[LSPD] Init', e);
      } finally {
        setReady(true);
      }
    })();
  }, []);

  useEffect(() => { applyTheme({ themeId, dark, accent }); }, [themeId, dark, accent]);

  // Alarm anfordern: beim Einschalten zuerst Epilepsie-Warnung
  const requestAlarm = () => { if (alarm) setAlarm(false); else setWarnOpen(true); };
  const confirmAlarm = () => { setWarnOpen(false); setAlarm(true); };

  const go = (target) => {
    if (target === 'dashboard') {
      if (sessionUser) {
        setRoute('dashboard');
        window.history.pushState({}, '', '/panel');
      } else {
        window.location.href = window.LSPD?.loginUrl('staff', '/panel') || '/auth/discord?mode=staff';
      }
      return;
    }
    if (target === 'login') {
      setRoute('login');
      window.history.pushState({}, '', '/login');
      return;
    }
    if (target.includes('#')) {
      const [r, anchor] = target.split('#');
      setRoute(r || 'home');
      setTimeout(() => { const el = document.getElementById(anchor); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); }, 60);
      return;
    }
    setRoute(target);
    setView('dashboard');
    window.scrollTo(0, 0);
    if (target === 'home') window.history.pushState({}, '', '/');
    if (target === 'bewerbung') window.history.pushState({}, '', '/bewerben');
    if (target === 'tickets') window.history.pushState({}, '', '/ticket');
  };

  // global chrome (siren overlay + epilepsy modal) — auf ALLEN Seiten inkl. Startseite
  const globalChrome = (
    <>
      {alarm && <AlarmOverlay />}
      <EpilepsyWarning open={warnOpen} onCancel={() => setWarnOpen(false)} onConfirm={confirmAlarm} />
    </>
  );

  if (!ready) {
    return (
      <div className="min-h-screen grid place-items-center dotgrid">
        <div className="flex flex-col items-center gap-4 fadeup">
          <Crest size={72} />
          <div className="h-1 w-32 rounded-full bg-line overflow-hidden">
            <div className="h-full bg-accent animate-pulse" style={{ width: '60%' }} />
          </div>
          <p className="text-sm text-muted uplabel">LSPD wird geladen …</p>
        </div>
      </div>
    );
  }

  if (route === 'home') return <><HomePage go={go} alarm={alarm} onAlarm={requestAlarm} site={site} />{globalChrome}</>;
  if (route === 'bewerbung') return <><BewerbungPage go={go} alarm={alarm} onAlarm={requestAlarm} site={site} />{globalChrome}</>;
  if (route === 'tickets') return <><IcTicketPublicPage go={go} alarm={alarm} onAlarm={requestAlarm} />{globalChrome}</>;
  if (route === 'login') return <><LoginPage go={go} />{globalChrome}</>;

  // ---- Dashboard ----
  const renderView = () => {
    switch (view) {
      case 'dashboard': return <DashboardOverview />;
      case 'verwaltung': return <PersonalVerwaltung />;
      case 'fahndungen': return <Versicherungen />;
      case 'personensuche': return <VersicherungsSuche />;
      case 'profil': return <Profil />;
      case 'akten': return <Aktensystem />;
      case 'fahrzeuge': return <Fahrzeugregister go={go} />;
      case 'news': return <NewsVerwaltung />;
      case 'admin': return <Admin />;
      case 'wiki': return <WikiPage />;
      case 'logbuch': return <Logbuch />;
      case 'dna': return <DnaTest />;
      case 'abteilungen': return <Abteilungen />;
      case 'verknuepfungen': return <Verknuepfungen />;
      case 'urlaub': return <Urlaub />;
      case 'verfuegbarkeit': return <Verfuegbarkeit />;
      case 'bonus': return <Bonus />;
      case 'dienstzeiten': return <Dienstzeiten />;
      case 'boards': return <Boards />;
      case 'profil-bonus': return <ComingSoon title="Profil · Bonus" icon="Coins" />;
      case 'profil-abwesenheit': return <ComingSoon title="Profil · Abwesenheit" icon="CalendarOff" />;
      case 'profil-dienstzeiten': return <ComingSoon title="Profil · Dienstzeiten" icon="Clock" />;
      case 'profil-akte': return <ComingSoon title="Profil · Personalakte" icon="FileText" />;
      default: return <DashboardOverview />;
    }
  };

  return (
    <div className="min-h-screen flex relative">
      <Sidebar view={view} setView={(v) => { setView(v); setSbOpen(false); }} go={go} dark={dark} setDark={setDark} open={sbOpen} setOpen={setSbOpen} />
      <div className="flex-1 min-w-0 flex flex-col dotgrid relative z-[2]">
        <Topbar onStudio={() => setStudioOpen(true)} setOpen={setSbOpen} dark={dark} setDark={setDark} alarm={alarm} onAlarm={requestAlarm} />
        <main className="flex-1 p-4 lg:p-6 max-w-[1500px] w-full mx-auto">
          {renderView()}
        </main>
      </div>
      <Studio open={studioOpen} onClose={() => setStudioOpen(false)} accent={accent} setAccent={setAccent} themeId={themeId} setThemeId={setThemeId} />
      {globalChrome}
    </div>
  );
}

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