/* global React, ReactDOM, PILLARS, PHASES, STAGES, computeScores, stageFromScore, recommendationFor, StageScale, HeroHeading, LeadForm, ResultScreen, ImpresoftLogo, ChevronPattern, submitEmailCapture */
const { useState, useMemo, useEffect, useRef } = 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,
  }))
);

const TRANS_MS = 320;

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 [exitQ, setExitQ] = useState(null);
  const [exitAnswers, setExitAnswers] = useState({});
  const [transitioning, setTransitioning] = useState(false);
  const [showEmailModal, setShowEmailModal] = useState(false);
  const dirRef = useRef("forward");

  const total = FLAT_QUESTIONS.length;
  const current = FLAT_QUESTIONS[step];
  const progress = ((step + 1) / total) * 100;

  function runTransition(nextStep, dir) {
    dirRef.current = dir;
    setExitQ(FLAT_QUESTIONS[step]);
    setExitAnswers({ ...answers });
    setTransitioning(true);
    setStep(nextStep);
    setTimeout(() => { setTransitioning(false); setExitQ(null); }, TRANS_MS);
  }

  function answer(v) {
    const newAnswers = { ...answers, [current.key]: v };
    setAnswers(newAnswers);
    if (step >= total - 1) { setTimeout(() => setPhase("gate"), 150); return; }
    // piccolo delay: l'utente vede la selezione evidenziata prima che parta la slide
    setTimeout(() => {
      dirRef.current = "forward";
      setExitQ(FLAT_QUESTIONS[step]);
      setExitAnswers(newAnswers);
      setTransitioning(true);
      setStep(step + 1);
      setTimeout(() => { setTransitioning(false); setExitQ(null); }, TRANS_MS);
    }, 100);
  }

  function goBack() {
    if (step > 0) runTransition(step - 1, "back");
  }

  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-header-row">
          <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 Assessment</span>
            </div>
          </div>
          {phase === "quiz" && (
            <>
              {/* Desktop: step + bar + pillar tag */}
              <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>
              {/* Mobile: solo x/25 */}
              <span className="q-step-mobile">{step + 1}<span style={{opacity:.4}}> / {total}</span></span>
            </>
          )}
        </div>
        {/* Barra avanzamento slim — visibile su tutti i dispositivi durante il quiz */}
        {phase === "quiz" && (
          <div className="q-progress-line">
            <div className="q-fill" style={{ width: `${progress}%` }} />
          </div>
        )}
      </header>

      {phase === "intro"   && <Intro onStart={() => setPhase("quiz")} onEmailCapture={() => setShowEmailModal(true)} />}
      {showEmailModal && <EmailCaptureModal onClose={() => setShowEmailModal(false)} />}
      {phase === "quiz"    && (
        <div className="q-viewport">
          {transitioning && exitQ && (
            <Question
              key={`exit-${exitQ.key}`}
              q={exitQ}
              selected={exitAnswers[exitQ.key]}
              animClass={dirRef.current === "forward" ? "q-exit-left" : "q-exit-right"}
              onAnswer={() => {}} onBack={() => {}} canBack={false}
            />
          )}
          <Question
            key={current.key}
            q={current}
            selected={answers[current.key]}
            animClass={transitioning ? (dirRef.current === "forward" ? "q-enter-right" : "q-enter-left") : ""}
            onAnswer={answer} onBack={goBack} canBack={step > 0}
          />
        </div>
      )}
      {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"); }} />
      )}
      <Footer />
    </div>
  );
}

function Intro({ onStart, onEmailCapture }) {
  return (
    <main className="intro">
      <div className="intro-inner">
        <div className="kicker">Assessment Tool · Revenue Operations · 5 pillar · ~5 minuti</div>
        <HeroHeading />
        <div className="intro-scale-wrap">
          <StageScale />
        </div>
        <div className="intro-meta">
          <Meta n="25" l="domande oggettive" />
          <Meta n="5"  l="pillar analizzati" />
          <Meta n="5′" l="tempo richiesto" />
          <Meta n="1-10" l="scala di maturità" />
        </div>
        <div className="intro-cta-group">
          <button className="btn btn-primary intro-cta" onClick={onStart}>
            Inizia la diagnosi ora &gt;
          </button>
          <button className="btn btn-outline intro-cta-secondary" onClick={onEmailCapture}>
            Ricevila via email
          </button>
        </div>
      </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, animClass }) {
  return (
    <main className={`question${animClass ? ` ${animClass}` : ""}`}>
      <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 5 pillar, il tuo archetipo RevOps e le 3 azioni prioritarie per passare alla fase successiva.
        </p>
        <LeadForm answers={answers} onSubmit={onSubmit} />
      </div>
    </main>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      {/* Social icons — solo mobile */}
      <div className="footer-social">
        <a href="https://www.linkedin.com/company/impresoft-engage/" rel="noopener" target="_blank">
          <img src="https://www.impresoftengage.com/hs-fs/hubfs/%5BEngage%5D/Loghi%20Engage/Icone%20e%20loghi%20firma%20email%20Engage/I_BrandEvolution_Linkedin.png?width=20&height=20&name=I_BrandEvolution_Linkedin.png" width="20" height="20" loading="lazy" alt="LinkedIn" />
        </a>
        <a href="https://www.youtube.com/@impresoftengage" rel="noopener" target="_blank">
          <img src="https://www.impresoftengage.com/hs-fs/hubfs/%5BEngage%5D/Loghi%20Engage/Icone%20e%20loghi%20firma%20email%20Engage/I_BrandEvolution_Youtube.png?width=20&height=20&name=I_BrandEvolution_Youtube.png" width="20" height="20" loading="lazy" alt="YouTube" />
        </a>
      </div>

      {/* Testo legale */}
      <div className="footer-legal">
        Impresoft Engage Srl Società a Socio Unico<br />
        Sede Legale e Amministrativa: Via Vecchia Ferriera, 5 36100 Vicenza (VI)<br />
        P. IVA IT03184500241 - R.E.A. Reg. Imp. di Vi n. 305343 - pec: impresoftengage@pec.it - SDI: A4707H7 - Capitale Sociale € 10.000 i.v.<br />
        Società soggetta all'attività di Direzione e Coordinamento di Impresoft S.p.A. - Copyright © 2026 Impresoft Engage. Tutti i diritti riservati.
      </div>

      {/* Link legali */}
      <div className="footer-links">
        <a href="https://www.impresoftengage.com/privacy-policy" rel="noopener" target="_blank">Privacy Policy</a>
        <a href="https://www.iubenda.com/privacy-policy/65536289/cookie-policy" rel="noopener" target="_blank">Cookie Policy</a>
        <a href="#" className="iubenda-cs-preferences-link" rel="noopener">Cookie settings</a>
        <a href="https://www.impresoftengage.com/whistleblowing" rel="noopener" target="_blank">Whistleblowing</a>
      </div>
    </footer>
  );
}

function EmailCaptureModal({ onClose }) {
  const [data, setData] = useState({ nome: "", cognome: "", email: "", marketing: false, marketing2: false });
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [err, setErr] = useState(null);

  // Read source from URL at submit time
  const getSource = () => new URLSearchParams(window.location.search).get("engage__source_submission") || "";

  // marketing checkbox 1 is required to submit
  const valid = data.nome && data.cognome && data.email && data.marketing;

  // ESC to close
  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  async function handleSubmit(e) {
    e.preventDefault();
    if (!valid || submitting) return;
    setSubmitting(true);
    setErr(null);
    const res = await submitEmailCapture({ ...data, source: getSource() });
    setSubmitting(false);
    if (!res.ok) {
      setErr("Errore nell'invio. Riprova tra qualche secondo.");
    } else {
      setSuccess(true);
    }
  }

  return (
    <div className="ecm-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="ecm-box" role="dialog" aria-modal="true" aria-labelledby="ecm-title">
        <button className="ecm-close" onClick={onClose} aria-label="Chiudi">×</button>

        {success ? (
          <div className="ecm-success">
            <div style={{ fontSize: 48, marginBottom: 16, color: "var(--black)" }}>✓</div>
            <h2 id="ecm-title" className="ecm-title">Link in arrivo!</h2>
            <p className="ecm-lead">
              Abbiamo registrato la tua richiesta. Riceverai il link all'assessment via email così potrai completarlo con calma dal tuo ufficio.
            </p>
            <button className="btn btn-outline" onClick={onClose} style={{ marginTop: 8 }}>Chiudi</button>
          </div>
        ) : (
          <>
            <div className="kicker" style={{ marginBottom: 14 }}>Ricevi l'assessment via email</div>
            <h2 id="ecm-title" className="ecm-title">Ricevi il link via email</h2>
            <p className="ecm-lead">
              Nessun tempo adesso? Nessun problema. Inserisci la tua email e ti mandiamo il link: completerai l'assessment con calma dal tuo ufficio.
            </p>

            <form onSubmit={handleSubmit}>
              <div className="ecm-grid">
                <label>
                  <span>Nome *</span>
                  <input required value={data.nome} onChange={(e) => setData({ ...data, nome: e.target.value })} placeholder="Mario" />
                </label>
                <label>
                  <span>Cognome *</span>
                  <input required value={data.cognome} onChange={(e) => setData({ ...data, cognome: e.target.value })} placeholder="Rossi" />
                </label>
                <label className="ecm-full">
                  <span>Email business *</span>
                  <input required type="email" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} placeholder="m.rossi@azienda.com" />
                </label>
              </div>

              <label className="ecm-check">
                <input type="checkbox" checked={data.marketing} onChange={(e) => setData({ ...data, marketing: e.target.checked })} />
                <span>
                  Acconsento al trattamento dei dati per finalità di marketing da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 8 dell'informativa privacy, nonché per la ricezione di newsletter di marketing. <em>(obbligatorio per ricevere il link)</em>
                </span>
              </label>
              <label className="ecm-check">
                <input type="checkbox" checked={data.marketing2} onChange={(e) => setData({ ...data, marketing2: e.target.checked })} />
                <span>
                  Acconsento alla comunicazione dei dati alle Società del Gruppo per finalità di marketing sui loro prodotti e servizi. <em>(facoltativo)</em>
                </span>
              </label>

              <p style={{ fontSize: 11, color: "var(--ink-3)", lineHeight: 1.5, margin: "8px 0 16px" }}>
                Cliccando il pulsante dichiaro di aver letto l'
                <a href="https://www.impresoftengage.com/privacy-policy" target="_blank" rel="noopener" style={{ color: "inherit" }}>informativa privacy</a>.
              </p>

              <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", padding: "18px" }} disabled={!valid || submitting}>
                {submitting ? "Invio in corso…" : "Inviami il link >"}
              </button>
              {err && <div className="lf-err" style={{ marginTop: 10 }}>⚠ {err}</div>}
            </form>
          </>
        )}
      </div>
    </div>
  );
}

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