/* GA-Coach · Kompetenz-Check — Assessment (Intro + Fragen)
   Controlled: Zustand (answers/step) lebt in der App und wird persistiert. */

function KCFactItem({ icon, big, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 42, height: 42, borderRadius: 11, background: 'var(--ga-primary-050)', color: 'var(--ga-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={20} strokeWidth={1.9} />
      </div>
      <div>
        <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--ga-text)', lineHeight: 1 }}>{big}</div>
        <div style={{ fontSize: 12, color: 'var(--ga-muted)', marginTop: 3, fontWeight: 600 }}>{label}</div>
      </div>
    </div>
  );
}

function KCAssessmentIntro({ total, onStart }) {
  useLucide([]);
  return (
    <div className="ob-narrow ob-screen">
      <div className="ob-center">
        <div className="ob-eyebrow"><Icon name="clipboard-list" size={13} /> Kompetenz-Check</div>
        <h1 className="ob-title">Gleich geht's los —<br /><span className="accent">5 Minuten für deinen Lernplan</span></h1>
      </div>
      <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start', marginTop: 26 }}>
        <img src="assets/coach-photo.png" className="ob-coach-avatar ob-pop" width="72" height="72" alt="Dennis" style={{ flexShrink: 0 }} />
        <div className="ob-bubble ob-rise" style={{ animationDelay: '.1s' }}>
          <div className="ob-coach-tag"><Icon name="message-circle" size={13} /> Dennis, dein Coach</div>
          Ich schätze dein aktuelles Wissen kurz ein — <b>ausschließlich</b>, um deinen Lernpfad optimal anzupassen. Es gibt <b>kein Bestehen oder Durchfallen</b>. Antworte einfach ehrlich.
        </div>
      </div>
      <div className="ob-assess-card ob-rise" style={{ marginTop: 22, animationDelay: '.2s', padding: '22px 24px' }}>
        <div style={{ display: 'flex', gap: 26, flexWrap: 'wrap' }}>
          <KCFactItem icon="list-checks" big={total} label="kurze Fragen" />
          <KCFactItem icon="clock" big="5" label="Minuten" />
          <KCFactItem icon="route" big="1" label="persönlicher Lernpfad" />
          <KCFactItem icon="shield-check" big="0" label="Druck — versprochen" />
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 30 }}>
        <button className="ob-cta lg" onClick={onStart}>Los geht's <Icon name="arrow-right" size={18} /></button>
      </div>
    </div>
  );
}

function KCAssessmentQuestion({ q, qi, total, chosen, onChoose, onNext, onBack }) {
  useLucide([qi, chosen]);
  const hasAnswer = chosen !== undefined;
  return (
    <div className="ob-narrow ob-screen" key={'q' + qi}>
      {qi === 0 && (
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 18, maxWidth: 760 }}>
          <img src="assets/coach-photo.png" width="40" height="40" alt="Dennis" style={{ borderRadius: 999, objectFit: 'cover', flexShrink: 0, border: '2px solid #fff', boxShadow: 'var(--ga-shadow-1)' }} />
          <div style={{ fontSize: 13.5, color: 'var(--ga-muted)', lineHeight: 1.5 }}>Ganz entspannt — es gibt keine falschen Antworten. Wähle, was am ehesten passt.</div>
        </div>
      )}
      <div className="ob-assess-card">
        <div className="ob-q-progress">
          <div className="num">Frage {qi + 1} / {total}</div>
          <div className="bar"><div style={{ width: ((qi + (hasAnswer ? 1 : 0)) / total * 100) + '%' }}></div></div>
          <div className="num" style={{ color: 'var(--ga-primary)' }}>{Math.round((qi / total) * 100)}%</div>
        </div>
        <h2 className="ob-q-text">{q.q}</h2>
        {q.hint && <p className="ob-q-hint">{q.hint}</p>}
        <div className="ob-opts">
          {q.options.map((o, i) => (
            <button key={i} className={'ob-opt' + (chosen === o.p ? ' selected' : '')} onClick={() => onChoose(o.p)}>
              <span className="ob-opt-mark"><Icon name="check" size={13} /></span>
              {o.t}
            </button>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 24 }}>
        <button className="ob-back" onClick={onBack}><Icon name="arrow-left" size={16} /> Zurück</button>
        <button className="ob-cta" disabled={!hasAnswer} onClick={onNext}>
          {qi < total - 1 ? 'Weiter' : 'Auswerten'} <Icon name="arrow-right" size={18} />
        </button>
      </div>
    </div>
  );
}

/* Orchestriert Intro ↔ Fragen anhand des App-Zustands. */
function KCAssessment({ step, setStep, answers, setAnswers, onExit, onComplete }) {
  const QUESTIONS = window.GA_ASSESSMENT.questions;
  const total = QUESTIONS.length;

  if (step === 'intro') {
    return <KCAssessmentIntro total={total} onStart={() => setStep(0)} />;
  }

  const qi = step;
  const q = QUESTIONS[qi];
  const chosen = answers[q.id];

  function choose(p) { setAnswers({ ...answers, [q.id]: p }); }
  function next() { if (qi < total - 1) setStep(qi + 1); else onComplete(); }
  function back() { if (qi === 0) setStep('intro'); else setStep(qi - 1); }

  return (
    <KCAssessmentQuestion
      q={q} qi={qi} total={total} chosen={chosen}
      onChoose={choose} onNext={next} onBack={back}
    />
  );
}

Object.assign(window, { KCAssessment, KCFactItem });