// ============================================================
// BREED QUIZ — "Past dit ras bij jou?" (per-ras mini-quiz)
// Werkt voor elk van de 200 rassen. Geeft een match-score voor
// DIT ras, een verdict, aandachtspunten, en als het niet past
// een beter passend alternatief.
// ============================================================
const { useState: useBQ } = React;

function BreedQuiz({ breed, onSelectBreed, onNav }) {
  const Q = window.DATA.BREED_QUIZ;
  const [step, setStep] = useBQ(0);
  const [answers, setAnswers] = useBQ({});
  const [done, setDone] = useBQ(false);

  const current = Q[step];
  const progress = (step / Q.length) * 100;

  const select = (v) => {
    const next = { ...answers, [current.id]: v };
    setAnswers(next);
    setTimeout(() => {
      if (step < Q.length - 1) setStep(step + 1);
      else setDone(true);
    }, 220);
  };

  const restart = () => { setAnswers({}); setStep(0); setDone(false); };

  if (done) {
    const score = window.DATA.scoreBreedFit(breed, answers);
    const verdict = window.DATA.fitVerdict(score);
    const alt = (verdict.key !== 'top') ? window.DATA.bestAlternative(breed, answers) : null;
    const showAlt = alt && alt.s >= score + 10;

    return (
      <div className="bq-panel" id="quiz">
        <div className="bq-head">
          <span className="upper" style={{ color: 'var(--terracotta)' }}>Jouw uitslag</span>
          <h3 className="serif" style={{ fontSize: 30, marginTop: 8 }}>Past de {breed.name} bij jou?</h3>
        </div>

        <div className={`bq-result bq-${verdict.key}`}>
          <div className="bq-score-ring" style={{ '--pct': score }}>
            <span className="bq-score-num">{score}<small>%</small></span>
          </div>
          <div className="bq-result-txt">
            <span className={`bq-badge bq-badge-${verdict.key}`}>{verdict.label}</span>
            <p>{verdict.note}</p>
          </div>
        </div>

        <div className="bq-points">
          <div className="bq-point">
            <span className="bq-point-lbl">Past goed bij</span>
            <span>{breed.unique ? breed.unique.perfectFor : breed.short}</span>
          </div>
          <div className="bq-point warn">
            <span className="bq-point-lbl">Let op</span>
            <span>{breed.unique ? breed.unique.notFor : 'Verdiep je in de eigenschappen voordat je beslist.'}</span>
          </div>
        </div>

        {showAlt && (
          <div className="bq-alt" onClick={() => onSelectBreed && onSelectBreed(alt.b)}>
            <div>
              <span className="upper" style={{ color: 'var(--terracotta-soft)' }}>Misschien beter bij jou</span>
              <b className="serif" style={{ fontSize: 22, display: 'block', marginTop: 4 }}>{alt.b.name}</b>
              <span style={{ fontSize: 13, color: 'rgba(246,239,228,.75)' }}>{alt.s}% match · {alt.b.size} · {alt.b.group}</span>
            </div>
            <span className="bq-alt-arrow">→</span>
          </div>
        )}

        <div className="bq-actions">
          <button className="btn btn-ghost btn-sm" onClick={restart}>Opnieuw</button>
          <button className="btn btn-primary btn-sm" onClick={() => onNav && onNav('quiz')}>Doe de volledige match-quiz →</button>
        </div>
      </div>
    );
  }

  return (
    <div className="bq-panel" id="quiz">
      <div className="bq-head">
        <span className="upper" style={{ color: 'var(--terracotta)' }}>Mini-quiz · {Q.length} vragen</span>
        <h3 className="serif" style={{ fontSize: 30, marginTop: 8 }}>Past de {breed.name} bij jou?</h3>
        <p className="muted" style={{ marginTop: 6 }}>Vijf korte vragen, meteen een eerlijk antwoord voor juist dit ras.</p>
      </div>

      <div className="bq-progress">
        <span className="mono">{String(step + 1).padStart(2, '0')} / {String(Q.length).padStart(2, '0')}</span>
        <div className="bq-progress-bar"><div className="bq-progress-fill" style={{ width: progress + '%' }}></div></div>
      </div>

      <div className="bq-q" key={step}>
        <h4 className="serif">{current.q}</h4>
        <div className="bq-opts">
          {current.opts.map((o) => (
            <button key={o.v} className={`bq-opt ${answers[current.id] === o.v ? 'sel' : ''}`} onClick={() => select(o.v)}>
              <span>{o.label}</span>
              <span className="bq-check"></span>
            </button>
          ))}
        </div>
        {step > 0 && <button className="bq-back" onClick={() => setStep(step - 1)}>← Vorige vraag</button>}
      </div>
    </div>
  );
}

window.BreedQuiz = BreedQuiz;