/* ============================================================
   Considered · Recipient quiz  (window.GGQuiz)
   Anniversary wizard removed for MVP.
   ============================================================ */
const { useState: useSQ } = React;
const QC  = window.GGComp;
const QU  = window.GGUtil;
const QD  = window.GG;
const QIc = window.GGIcons;
const QRes = window.GGResults;
const { SectionHead: QSectionHead } = window.GGHome;

/* ---- Progress dots ---- */
const Steps = ({ total, current }) => (
  <div className="gg-steps" style={{ maxWidth:420 }}>
    {Array.from({ length: total }).map((_, i) => (
      <div key={i} className={`gg-step-dot${i < current ? ' done' : i === current ? ' cur' : ''}`} />
    ))}
  </div>
);

/* ---- Wizard shell ---- */
const WizardShell = ({ stepLabel, title, help, onBack, children, footer }) => (
  <div className="gg-narrow gg-section gg-enter" key={title}>
    <div className="gg-spread" style={{ marginBottom:8 }}>
      <span className="gg-meta gg-meta-mono" style={{ textTransform:'uppercase', letterSpacing:'0.1em' }}>{stepLabel}</span>
      {onBack && <button className="gg-btn gg-btn-ghost gg-btn-sm" onClick={onBack} style={{ padding:'4px 8px' }}><QIc.ArrowL size={16} /> Back</button>}
    </div>
    <h1 className="gg-display" style={{ fontSize:'clamp(28px,4.4vw,46px)', margin:'4px 0 6px' }}>{title}</h1>
    {help && <p className="gg-meta" style={{ fontSize:15, marginBottom:24, maxWidth:'50ch' }}>{help}</p>}
    {children}
    {footer}
  </div>
);

/* ============================================================
   RECIPIENT QUIZ — 4 steps
   ============================================================ */
const QUIZ_STEPS = ['relationship', 'occasion', 'interest', 'budget'];

const QuizScreen = ({ params = {} }) => {
  const nav = QC.useNav();
  const seed = params.seed || {};
  const [step, setStep] = useSQ(params.step || 0);
  const [answers, setAnswers] = useSQ({ relationship:null, occasion:null, interest:null, budget:null, ...seed });

  const key = QUIZ_STEPS[step];
  const cfg = QD.QUIZ[key];

  const choose = (id) => {
    const next = { ...answers, [key]: id };
    setAnswers(next);
    setTimeout(() => advance(next), 140);
  };
  const skip = () => advance({ ...answers, [key]: null });
  const advance = (ans) => {
    if (step < QUIZ_STEPS.length - 1) setStep(step + 1);
    else nav.go('quizresults', { answers: ans });
  };

  const recap = QUIZ_STEPS.slice(0, step).map(k => {
    const v = answers[k];
    if (!v) return { k, label: 'Any ' + k };
    const opt = QD.QUIZ[k].options.find(o => o.id === v);
    return { k, label: opt ? opt.label : v };
  });

  return (
    <WizardShell
      stepLabel={`Step ${step + 1} of 4`}
      title={cfg.label}
      help={cfg.help}
      onBack={step > 0 ? () => setStep(step - 1) : () => nav.go('home')}
      footer={
        <div style={{ marginTop:26 }}>
          <button className="gg-btn gg-btn-ghost" onClick={skip}>
            Skip — show me anything <QIc.ArrowR size={16} />
          </button>
        </div>
      }
    >
      <Steps total={4} current={step} />
      {recap.length > 0 && (
        <div className="gg-wrap" style={{ margin:'18px 0 4px' }}>
          {recap.map((r, i) => (
            <button key={r.k} className="gg-chip gg-chip-btn b-sky" onClick={() => setStep(i)} title="Edit this answer">
              {r.label}
            </button>
          ))}
        </div>
      )}
      <div className="gg-optgrid" style={{ marginTop:22 }}>
        {cfg.options.map(o => (
          <button key={o.id} className={`gg-opt${answers[key] === o.id ? ' sel' : ''}`} onClick={() => choose(o.id)}>
            {o.label}
            <QIc.ArrowR size={16} style={{ opacity:0.4 }} />
          </button>
        ))}
      </div>
    </WizardShell>
  );
};

/* ---- Recap line for results header ---- */
const recapText = (answers) => {
  const parts = [];
  const rel  = answers.relationship && QD.QUIZ.relationship.options.find(o => o.id === answers.relationship);
  const occ  = answers.occasion    && QD.QUIZ.occasion.options.find(o => o.id === answers.occasion);
  const intr = answers.interest    && QD.QUIZ.interest.options.find(o => o.id === answers.interest);
  const bud  = answers.budget      && QD.PRICE[answers.budget];
  if (rel)  parts.push(`for a ${rel.label.toLowerCase()}`);
  if (occ)  parts.push(occ.label.toLowerCase());
  if (intr) parts.push(`who's into ${intr.label.toLowerCase()}`);
  if (bud)  parts.push(bud.label.toLowerCase());
  return parts.length ? parts.join(' · ') : 'across the whole directory';
};

const QuizResults = ({ params }) => {
  const nav = QC.useNav();
  const answers = params.answers || {};
  const brands = QU.matchRecipient(answers);
  const editChips = QUIZ_STEPS.map(k => {
    const v = answers[k];
    const opt = v && QD.QUIZ[k].options.find(o => o.id === v);
    return { k, label: opt ? opt.label : 'Any ' + k };
  });
  return (
    <div className="gg-container gg-section">
      <button className="gg-btn gg-btn-ghost gg-btn-sm" onClick={() => nav.go('quiz')} style={{ padding:'4px 8px', marginBottom:12 }}>
        <QIc.ArrowL size={16} /> Tweak the quiz
      </button>
      <QC.Eyebrow>Your shortlist</QC.Eyebrow>
      <h1 className="gg-display gg-h2" style={{ margin:'10px 0 8px' }}>
        Considered gifts {recapText(answers)}.
      </h1>
      <div className="gg-wrap" style={{ marginBottom:24 }}>
        {editChips.map(c => (
          <button key={c.k} className="gg-chip gg-chip-btn b-sky" onClick={() => nav.go('quiz')}>{c.label}</button>
        ))}
      </div>
      <QRes.ResultsView brands={brands} defaultSort="relevance" />
      <div className="gg-card t-coral" style={{ padding:'22px 24px', marginTop:36, textAlign:'center' }}>
        <h3 className="gg-display gg-h3">Not quite it?</h3>
        <p className="gg-meta" style={{ fontSize:15, margin:'6px 0 16px' }}>Loosen a step, or browse the full directory.</p>
        <div className="gg-wrap" style={{ justifyContent:'center' }}>
          <QC.Btn variant="dark" onClick={() => nav.go('quiz')}>Adjust answers</QC.Btn>
          <QC.Btn variant="secondary" onClick={() => nav.go('browse')}>Browse categories</QC.Btn>
        </div>
      </div>
    </div>
  );
};

window.GGQuiz = { QuizScreen, QuizResults };