/* global React, ReactDOM, PILLARS, PHASES, STAGES, computeScores, stageFromScore, recommendationFor, StageScale, HeroHeading, LeadForm, ResultScreen, ImpresoftLogo, ChevronPattern */
const { useState, useMemo, useEffect } = React;

const FLAT_QUESTIONS = PILLARS.flatMap((p) =>
  p.questions.map((q, i) => ({
    pillarId: p.id, pillarName: p.name, pillarN: p.n, pillarShort: p.short,
    idx: i, key: `${p.id}-${i}`, q: q.q, opts: q.opts,
  }))
);

function App() {
  const [phase, setPhase] = useState("intro");
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [lead, setLead] = useState(null);
  const [aiData, setAiData] = useState(null);
  const total = FLAT_QUESTIONS.length;
  const current = FLAT_QUESTIONS[step];
  const progress = ((step + 1) / total) * 100;

  function answer(v) {
    setAnswers((a) => ({ ...a, [current.key]: v }));
    setTimeout(() => {
      if (step < total - 1) setStep(step + 1);
      else setPhase("gate");
    }, 220);
  }

  async function handleGateSubmit(d) {
    setLead(d);
    setPhase("loading");
    try {
      const { pillarScores } = computeScores(answers);
      const scores = {};
      pillarScores.forEach((p) => { scores[p.name] = parseFloat(p.score.toFixed(1)); });
      const res = await fetch("/api/analyze", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ company: d.azienda, role: d.ruolo, scores }),
      });
      if (res.ok) setAiData(await res.json());
    } catch (e) {
      console.error("AI analysis failed", e);
    }
    setPhase("result");
  }

  return (
    <div className="quiz-app">
      <header className="q-header">
        <div className="q-brand" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img src="https://www.impresoftengage.com/hs-fs/hubfs/%5BEngage%5D/Loghi%20Engage/I_BrandEvolution_B+Y.png?width=308&height=120&name=I_BrandEvolution_B+Y.png" alt="Impresoft Engage" style={{ height: 40, width: "auto" }} />
          <div style={{ paddingLeft: 12, borderLeft: "1.5px solid rgba(0,0,0,0.18)", display: "flex", alignItems: "center" }}>
            <span style={{ fontFamily: "Manrope, Arial, Helvetica, sans-serif", fontWeight: 500, fontSize: 8, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.55)" }}>RevOps Diagnostic</span>
          </div>
        </div>
        {phase === "quiz" && (
          <div className="q-progress">
            <span className="q-progress-n">{step + 1} <span style={{opacity:.4}}>/ {total}</span></span>
            <div className="q-bar"><div className="q-fill" style={{ width: `${progress}%` }} /></div>
            <span className="q-pillar-tag">{current.pillarN} · {current.pillarName}</span>
          </div>
        )}
      </header>

      {phase === "intro"   && <Intro onStart={() => setPhase("quiz")} />}
      {phase === "quiz"    && (
        <Question key={current.key} q={current} selected={answers[current.key]}
          onAnswer={answer} onBack={() => step > 0 && setStep(step - 1)} canBack={step > 0} />
      )}
      {phase === "gate"    && <Gate answers={answers} onSubmit={handleGateSubmit} />}
      {phase === "loading" && <Loading company={lead?.azienda} />}
      {phase === "result"  && (
        <ResultScreen answers={answers} lead={lead} aiData={aiData}
          onRestart={() => { setAnswers({}); setStep(0); setLead(null); setAiData(null); setPhase("intro"); }} />
      )}
    </div>
  );
}

function Intro({ onStart }) {
  return (
    <main className="intro">
      <div className="intro-inner">
        <div className="kicker">Diagnostic Tool · Revenue Operations · 7 pillar · ~6 minuti</div>
        <HeroHeading />
        <div className="intro-scale-wrap">
          <StageScale />
        </div>
        <div className="intro-meta">
          <Meta n="35" l="domande oggettive" />
          <Meta n="7"  l="pillar analizzati" />
          <Meta n="6′" l="tempo richiesto" />
          <Meta n="1-10" l="scala di maturità" />
        </div>
        <button className="btn btn-primary intro-cta" onClick={onStart}>
          Inizia la diagnosi &gt;
        </button>
      </div>
    </main>
  );
}

function Loading({ company }) {
  return (
    <main style={{ flex: 1, display: "grid", placeItems: "center", padding: "40px 20px", background: "var(--white)" }}>
      <div style={{ textAlign: "center", maxWidth: 480 }}>
        <div style={{ fontSize: 48, marginBottom: 24 }}>⟳</div>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(24px,3vw,36px)", letterSpacing: "-0.025em", margin: "0 0 16px" }}>
          Analisi in corso…
        </h2>
        <p style={{ fontSize: 16, color: "var(--ink-3)", lineHeight: 1.6 }}>
          Sto elaborando il profilo di <strong>{company}</strong> e calibrando i pesi per il tuo settore. Ci vorranno pochi secondi.
        </p>
      </div>
    </main>
  );
}

function Meta({ n, l }) {
  return (
    <div className="meta-cell">
      <div className="meta-n">{n}</div>
      <div className="meta-l">{l}</div>
    </div>
  );
}

function Question({ q, selected, onAnswer, onBack, canBack }) {
  return (
    <main className="question">
      <div className="q-inner">
        <div className="q-pillar-line">
          <span className="kicker">Pillar {q.pillarN} — {q.pillarName}</span>
          <span className="q-pillar-sub">{q.pillarShort}</span>
        </div>
        <h2 className="q-text display">{q.q}</h2>
        <div className="q-opts">
          {q.opts.map((o, i) => (
            <button key={i} className={`q-opt ${selected === o.v ? "selected" : ""}`} onClick={() => onAnswer(o.v)}>
              <span className="q-opt-letter">{["A", "B", "C", "D"][i]}</span>
              <span className="q-opt-text">{o.t}</span>
              <span className="q-opt-arrow">&gt;</span>
            </button>
          ))}
        </div>
        <div className="q-nav">
          {canBack ? (<button className="q-back" onClick={onBack}>← Domanda precedente</button>) : <span />}
          <span className="q-hint">Seleziona la risposta che descrive meglio la situazione attuale</span>
        </div>
      </div>
    </main>
  );
}

function Gate({ onSubmit, answers }) {
  return (
    <main className="gate">
      <div className="gate-inner">
        <div className="kicker">Diagnosi completata · pronta da sbloccare</div>
        <h2 className="display gate-title">
          Un ultimo passaggio prima di vedere i <span className="hl">risultati</span>.
        </h2>
        <p className="gate-lead">
          Il report include score globale, breakdown sui 7 pillar e raccomandazioni concrete su come passare alla fase successiva del modello Impresoft.
        </p>
        <LeadForm answers={answers} onSubmit={onSubmit} />
      </div>
    </main>
  );
}

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