// Typeform-style onboarding — one question per screen, big.

const QUESTIONS = [
  { id: 'status', kind: 'choice', q: 'Was ist passiert?', sub: 'Diese Antwort ändert, was Ihnen zusteht — und was nicht.',
    options: [
      { v: 'bebedingt', label: 'Betriebsbedingt gekündigt', sub: 'Stellenabbau, Insolvenz, Umstrukturierung' },
      { v: 'persbedingt', label: 'Personenbedingt gekündigt', sub: 'Krankheit, Eignung' },
      { v: 'verhbedingt', label: 'Verhaltensbedingt gekündigt', sub: 'Kann zu Sperrzeit führen' },
      { v: 'selbst', label: 'Selbst gekündigt', sub: 'Meist 12 Wochen Sperrzeit' },
      { v: 'aufhebung', label: 'Aufhebungsvertrag unterschrieben', sub: 'Sperrzeit möglich' },
      { v: 'befristet', label: 'Befristeter Vertrag lief aus', sub: 'Keine Sperrzeit' },
    ]
  },
  { id: 'job', kind: 'text', q: 'Was war Ihr letzter Beruf?', sub: 'Die genaue Berufsbezeichnung reicht.', placeholder: 'z. B. Senior Produktmanager*in' },
  { id: 'branche', kind: 'choice', q: 'In welcher Branche?', sub: 'Das bestimmt, welche Arbeitsmarktdaten wir laden.',
    options: [
      { v: 'IT / Software', label: 'IT / Software', sub: '48.310 offene Stellen' },
      { v: 'Metall & Industrie', label: 'Metall & Industrie', sub: '14.220 offene Stellen' },
      { v: 'Kreativ & Design', label: 'Kreativ & Design', sub: '6.840 offene Stellen' },
      { v: 'Handel', label: 'Handel', sub: '22.140 offene Stellen' },
      { v: 'sonst', label: 'Etwas anderes', sub: 'Gleich genauer' },
    ]
  },
  { id: 'years', kind: 'slider', q: 'Wie lange waren Sie beschäftigt?', sub: 'Sozialversicherungspflichtig, in den letzten 5 Jahren.',
    min: 0.5, max: 30, step: 0.5, default: 6, fmt: (v) => `${v} Jahre` },
  { id: 'salary', kind: 'slider', q: 'Ihr letztes Brutto-Jahresgehalt?', sub: 'Brutto inkl. festem Bonus. Niemand außer Ihnen sieht das.',
    min: 20000, max: 180000, step: 1000, default: 65000, fmt: (v) => fmtEUR(v) },
  { id: 'age', kind: 'slider', q: 'Wie alt sind Sie?', sub: 'Das Alter beeinflusst die Bezugsdauer Ihres ALG1.',
    min: 18, max: 67, step: 1, default: 38, fmt: (v) => `${v} Jahre` },
  { id: 'children', kind: 'choice', q: 'Kinder im Haushalt?', sub: 'Mit Kind: 67 % statt 60 % vom Leistungsentgelt.',
    options: [
      { v: 0, label: 'Keine', sub: 'Satz: 60 %' },
      { v: 1, label: '1 Kind', sub: 'Satz: 67 %' },
      { v: 2, label: '2 Kinder', sub: 'Satz: 67 %' },
      { v: 3, label: '3 oder mehr', sub: 'Satz: 67 %' },
    ]
  },
  { id: 'region', kind: 'text', q: 'In welcher Region wohnen Sie?', sub: 'PLZ oder Stadt — für regionale Marktdaten.', placeholder: 'z. B. Berlin oder 10115' },
  { id: 'goal', kind: 'choice', q: 'Was möchten Sie als Nächstes?', sub: 'Sie können sich später anders entscheiden.',
    options: [
      { v: 'same', label: 'Den gleichen Beruf, neue Firma', sub: 'Wir zeigen offene Stellen & Gehaltsbänder' },
      { v: 'adjacent', label: 'Angrenzender Beruf', sub: 'Ähnliche Skills, bessere Marktlage' },
      { v: 'reskill', label: 'Umschulen / neu orientieren', sub: 'Mit Bildungsgutschein' },
      { v: 'break', label: 'Erstmal eine Pause', sub: 'Kein Druck. Wir halten das Dossier offen.' },
    ]
  },
];

function Onboarding({ initialProfile, onDone, onBack }) {
  const { t, f } = useTheme();
  const [i, setI] = React.useState(0);
  const [a, setA] = React.useState(() => ({
    status: 'bebedingt',
    job: initialProfile?.job || '',
    branche: initialProfile?.branche || 'IT / Software',
    years: initialProfile?.years || 6,
    salary: initialProfile?.salary || 65000,
    age: initialProfile?.age || 38,
    children: initialProfile?.children ?? 0,
    region: initialProfile?.city || '',
    goal: 'same',
  }));
  const q = QUESTIONS[i];
  const progress = ((i + 1) / QUESTIONS.length) * 100;

  const next = () => {
    if (i < QUESTIONS.length - 1) setI(i + 1);
    else onDone && onDone(a);
  };
  const prev = () => {
    if (i > 0) setI(i - 1);
    else onBack && onBack();
  };

  const setVal = (v) => setA({ ...a, [q.id]: v });

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Enter') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  return (
    <div className="paper-grain" style={{
      width: '100%', height: '100%', background: t.paper, color: t.ink,
      fontFamily: f.sans, position: 'relative', display: 'flex', flexDirection: 'column',
    }}>
      {/* top bar */}
      <div style={{ padding: '22px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${t.rule}`, position: 'relative', zIndex: 2 }}>
        <div style={{ fontFamily: f.display, fontSize: 20, fontWeight: f.displayWeight, letterSpacing: f.displayTracking }}>
          jobless<span style={{ color: t.accent }}>.</span>team
        </div>
        <Mono size={11}>Frage {String(i + 1).padStart(2, '0')} / {String(QUESTIONS.length).padStart(2, '0')} · {q.id}</Mono>
      </div>

      {/* progress rule */}
      <div style={{ height: 2, background: t.rule, position: 'relative', zIndex: 2 }}>
        <div style={{ width: `${progress}%`, height: '100%', background: t.accent, transition: 'width .35s' }} />
      </div>

      {/* content — centered */}
      <div key={i} className="dc-fade" style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', padding: '64px 96px', gap: 80, position: 'relative', zIndex: 2, overflow: 'auto' }}>
        {/* left: question */}
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>
            <span style={{ fontFamily: f.mono }}>№{String(i + 1).padStart(2, '0')}</span>
            &nbsp;— von zehn
          </Eyebrow>
          <Display size={52} style={{ marginBottom: 14 }}>{q.q}</Display>
          <Body size={16} style={{ maxWidth: 460 }}>{q.sub}</Body>
          <Mono size={10} style={{ marginTop: 28, display: 'block' }}>
            ↵ Enter · ← → zum Navigieren
          </Mono>
        </div>

        {/* right: input */}
        <div style={{ alignSelf: 'center' }}>
          {q.kind === 'choice' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {q.options.map((o, oi) => {
                const selected = a[q.id] === o.v;
                return (
                  <button key={oi} onClick={() => { setVal(o.v); setTimeout(next, 220); }} style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                    textAlign: 'left', padding: '16px 20px',
                    background: selected ? t.ink : t.paper2,
                    color: selected ? t.paper : t.ink,
                    border: `1px solid ${selected ? t.ink : t.rule}`,
                    transition: 'all .15s',
                    cursor: 'pointer',
                  }}
                  onMouseEnter={e => { if (!selected) { e.currentTarget.style.borderColor = t.ink; } }}
                  onMouseLeave={e => { if (!selected) { e.currentTarget.style.borderColor = t.rule; } }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                      <span style={{
                        fontFamily: f.mono, fontSize: 11,
                        padding: '2px 8px', border: `1px solid ${selected ? t.paper : t.rule}`,
                        color: selected ? t.paper : t.muted,
                      }}>{String.fromCharCode(65 + oi)}</span>
                      <div>
                        <div style={{ fontFamily: f.sans, fontSize: 16, fontWeight: 500 }}>{o.label}</div>
                        <div style={{ fontFamily: f.sans, fontSize: 12, marginTop: 2, color: selected ? 'rgba(255,255,255,.6)' : t.muted }}>{o.sub}</div>
                      </div>
                    </div>
                    {selected && <span style={{ fontSize: 18 }}>→</span>}
                  </button>
                );
              })}
            </div>
          )}

          {q.kind === 'text' && (
            <div>
              <input
                autoFocus
                value={a[q.id]}
                onChange={e => setVal(e.target.value)}
                placeholder={q.placeholder}
                style={{
                  width: '100%', border: 0, borderBottom: `2px solid ${t.ink}`,
                  padding: '8px 0', background: 'transparent',
                  fontFamily: f.display, fontSize: 40, fontWeight: f.displayWeight,
                  color: t.ink, outline: 'none',
                }}
              />
              <Btn variant="primary" style={{ marginTop: 24 }} onClick={next}>Weiter →</Btn>
            </div>
          )}

          {q.kind === 'slider' && (
            <div>
              <div style={{
                fontFamily: f.display, fontSize: 88, fontWeight: f.displayWeight, letterSpacing: f.displayTracking,
                color: t.accent, lineHeight: 1,
              }}>{q.fmt(a[q.id])}</div>
              <input type="range" min={q.min} max={q.max} step={q.step}
                value={a[q.id]} onChange={e => setVal(parseFloat(e.target.value))}
                style={{ width: '100%', marginTop: 32, accentColor: t.accent }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <Mono size={10}>{q.fmt(q.min)}</Mono>
                <Mono size={10}>{q.fmt(q.max)}</Mono>
              </div>
              <Btn variant="primary" style={{ marginTop: 24 }} onClick={next}>Weiter →</Btn>
            </div>
          )}
        </div>
      </div>

      {/* footer nav */}
      <div style={{ padding: '18px 48px', borderTop: `1px solid ${t.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <button onClick={prev} style={{ border: 0, background: 'transparent', fontFamily: f.sans, fontSize: 13, color: t.muted, cursor: 'pointer' }}>← zurück</button>
        <Mono size={10}>Keine Rechtsberatung. Eine Orientierung.</Mono>
        <Mono size={10}>speichert automatisch</Mono>
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding, QUESTIONS });