// Single-flow router: landing → onboarding → dashboard → (market | courses | plan).
// Persists progress to localStorage so refresh doesn't wipe the dossier.
// Tweaks panel is gated behind ?tweaks=1 (design-time tool, not for end users).

const JL_STATE_KEY = 'jl-state-v1';
const JL_TWEAKS_KEY = 'jl-tweaks';

function loadState() {
  try { return JSON.parse(localStorage.getItem(JL_STATE_KEY) || 'null'); }
  catch { return null; }
}
function saveState(s) {
  try { localStorage.setItem(JL_STATE_KEY, JSON.stringify(s)); } catch {}
}

// Build a "persona" shape the dashboard/market/courses/plan screens expect,
// using real onboarding answers plus sensible fallbacks.
function buildPersona(answers) {
  const a = answers || {};
  const reasonMap = {
    bebedingt: 'gekündigt (betriebsbedingt)',
    persbedingt: 'gekündigt (personenbedingt)',
    verhbedingt: 'gekündigt (verhaltensbedingt)',
    selbst: 'selbst gekündigt',
    aufhebung: 'Aufhebungsvertrag',
    befristet: 'Vertrag ausgelaufen',
  };
  const endedDefault = new Date();
  endedDefault.setDate(endedDefault.getDate() + 14);
  return {
    id: 'self',
    name: a.name || '',
    age: a.age ?? 38,
    city: a.region || 'Deutschland',
    region: a.region || 'Deutschland',
    job: a.job || 'Ihr letzter Beruf',
    lastEmployer: '—',
    branche: a.branche && MARKET[a.branche] ? a.branche : 'IT / Software',
    years: a.years ?? 6,
    ended: endedDefault.toLocaleDateString('de-DE'),
    reason: reasonMap[a.status] || 'gekündigt (betriebsbedingt)',
    salary: a.salary ?? 65000,
    children: a.children ?? 0,
    steuerklasse: 1,
    hasAbfindung: 0,
    goal: a.goal || 'same',
  };
}

function App() {
  // tweaks (theme + font)
  const [tweaks, setTweaks] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(JL_TWEAKS_KEY) || 'null') || { theme: 'sand', font: 'newsreader', paper: true }; }
    catch { return { theme: 'sand', font: 'newsreader', paper: true }; }
  });
  React.useEffect(() => { localStorage.setItem(JL_TWEAKS_KEY, JSON.stringify(tweaks)); }, [tweaks]);
  const t = THEMES[tweaks.theme] || THEMES.sand;
  const f = FONTS[tweaks.font] || FONTS.newsreader;
  const ctx = { t, f, paper: tweaks.paper };

  // app state
  const initial = loadState();
  const [screen, setScreen] = React.useState(initial?.screen || 'landing');
  const [answers, setAnswers] = React.useState(initial?.answers || null);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // show tweaks panel when ?tweaks=1 is present
  const showTweaksButton = React.useMemo(() => {
    return new URLSearchParams(window.location.search).get('tweaks') === '1';
  }, []);

  React.useEffect(() => { saveState({ screen, answers }); }, [screen, answers]);

  // toggle paper texture globally
  React.useEffect(() => {
    document.body.classList.toggle('no-grain', !tweaks.paper);
  }, [tweaks.paper]);

  const persona = buildPersona(answers);

  const onboardingInitial = answers ? { ...persona, city: persona.region } : null;

  function handleOnboardingDone(a) {
    setAnswers(a);
    // optional: fire-and-forget save to backend
    try {
      fetch('/api/dossier', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(a),
      }).catch(() => {});
    } catch {}
    setScreen('dashboard');
  }

  function restart() {
    setAnswers(null);
    setScreen('landing');
  }

  return (
    <ThemeContext.Provider value={ctx}>
      <div style={{ background: t.paper, minHeight: '100vh' }}>
        {screen === 'landing' && <Landing onStart={() => setScreen('onboarding')} />}

        {screen === 'onboarding' && (
          <Onboarding
            initialProfile={onboardingInitial}
            onDone={handleOnboardingDone}
            onBack={() => setScreen('landing')}
          />
        )}

        {screen === 'dashboard' && <Dashboard persona={persona} onNav={setScreen} />}
        {screen === 'market' && <MarketView persona={persona} onNav={setScreen} />}
        {screen === 'courses' && <CoursesView persona={persona} onNav={setScreen} />}
        {screen === 'plan' && <PlanView persona={persona} onNav={setScreen} />}

        {/* tiny footer reset link when in a logged-in-ish screen */}
        {(screen === 'dashboard' || screen === 'market' || screen === 'courses' || screen === 'plan') && (
          <div style={{ padding: '24px 48px 48px', textAlign: 'center' }}>
            <button onClick={restart} style={{
              border: 0, background: 'transparent', color: t.muted, fontSize: 11,
              fontFamily: f.mono, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3,
            }}>Dossier zurücksetzen</button>
          </div>
        )}
      </div>

      {showTweaksButton && !tweaksOpen && (
        <button onClick={() => setTweaksOpen(true)} style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 999,
          padding: '10px 14px', border: `1px solid ${t.rule}`,
          background: '#fff', fontFamily: f.mono, fontSize: 11,
          letterSpacing: '0.04em', color: t.ink, cursor: 'pointer',
          boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
        }}>Tweaks</button>
      )}
      {showTweaksButton && tweaksOpen && (
        <TweaksPanel state={tweaks} setState={setTweaks} onClose={() => setTweaksOpen(false)} />
      )}
    </ThemeContext.Provider>
  );
}

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