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

const DEFAULT_DARK = {
  '--c-bg': '#0A1628', '--c-bg2': '#0c1a2f', '--c-card': '#1C2A3A',
  '--c-border': '#2A3A4A', '--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);
}

function parseInitialRoute() {
  const p = window.location.pathname;
  if (p === '/portal' || p.startsWith('/dashboard')) return { route: 'dashboard', view: 'dashboard' };
  if (p === '/login' || p.includes('intranet')) return { route: 'login', view: 'dashboard' };
  if (p.includes('bewerbung')) return { route: 'bewerbung', view: 'dashboard' };
  if (p.includes('beschwerde')) return { route: 'beschwerde', view: 'dashboard' };
  const q = new URLSearchParams(window.location.search);
  const err = q.get('error');
  if (err === 'auth_failed' || err === 'no_lsmd' || err === 'no_rank' || err === 'not_in_guild') {
    return { route: 'login', view: 'dashboard' };
  }
  return { route: 'home', view: 'dashboard' };
}

function AppRoot() {
  const initial = parseInitialRoute();
  const [ready, setReady] = useState(false);
  const [route, setRoute] = useState(initial.route);
  const [view, setView] = useState(initial.view);
  const [sbOpen, setSbOpen] = useState(false);
  const [studioOpen, setStudioOpen] = useState(false);
  const [dark, setDark] = useState(true);
  const [accent, setAccent] = useState('#CC2233');
  const [themeId, setThemeId] = useState('dark-red');
  const [sessionUser, setSessionUser] = useState(null);

  useEffect(() => {
    if (route === 'dashboard') {
      window.LSMD_NAV = (v) => setView(v);
      return () => { delete window.LSMD_NAV; };
    }
  }, [route]);

  useEffect(() => {
    (async () => {
      try {
        if (!window.LSMD) {
          console.error('[LSMD] bridge.jsx nicht geladen');
          setReady(true);
          return;
        }
        await window.LSMD.loadSite();
        const me = await window.LSMD.loadMe();
        if (me?.user) {
          setSessionUser(me.user);
          if (initial.route === 'dashboard' || window.location.pathname === '/portal') {
            setRoute('dashboard');
          }
        } else if (initial.route === 'dashboard') {
          setRoute('login');
        }
      } catch (e) {
        console.error('[LSMD] Init', e);
      } finally {
        setReady(true);
      }
    })();
  }, []);

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

  const go = (target) => {
    if (target === 'dashboard') {
      window.location.href = '/auth/discord';
      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({}, '', '/bewerbung');
    if (target === 'beschwerde') window.history.pushState({}, '', '/beschwerde');
  };

  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">LSMD wird geladen …</p>
        </div>
      </div>
    );
  }

  if (route === 'home') return <HomePage go={go} site={window.LSMD.site} />;
  if (route === 'bewerbung') return <BewerbungPage go={go} />;
  if (route === 'beschwerde') return <BeschwerdePage go={go} />;
  if (route === 'login') return <LoginPage go={go} />;

  if (!sessionUser && route === 'dashboard') {
    return <LoginPage go={go} />;
  }

  const renderView = () => {
    switch (view) {
      case 'dashboard': return <DashboardOverview user={sessionUser} setView={setView} />;
      case 'rechner': return <Rechner />;
      case 'personal-statistik': return <PersonalStatistik />;
      case 'verwaltung': return <PersonalVerwaltung />;
      case 'versicherungen': return <Versicherungen />;
      case 'versicherungssuche': return <VersicherungsSuche />;
      case 'profil': return <Profil user={sessionUser} />;
      case 'akten': return <Aktensystem />;
      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 />;
      default: return <DashboardOverview user={sessionUser} />;
    }
  };

  return (
    <div className="min-h-screen flex">
      <Sidebar view={view} setView={(v) => { setView(v); setSbOpen(false); }} go={go} dark={dark} setDark={setDark} open={sbOpen} setOpen={setSbOpen} user={sessionUser} />
      <div className="flex-1 min-w-0 flex flex-col dotgrid">
        <Topbar onStudio={() => setStudioOpen(true)} setOpen={setSbOpen} dark={dark} setDark={setDark} user={sessionUser} onProfile={() => setView('profil')} />
        <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} />
    </div>
  );
}

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