/* global React */
const { useState, useMemo, useEffect } = React;

// ─── Logo Impresoft (wordmark + chevron pittogramma)
// Costruzione: "impresoft" tipo Manrope ExtraBold, chevron ">" giallo come pittogramma istituzionale (Brand Manual §1.2)
function ImpresoftLogo({ scale = 1, color = "var(--black)", chevronColor = "var(--yellow)", showPayoff = true }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8 * scale, lineHeight: 1 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6 * scale }}>
        <span style={{
          fontFamily: "Manrope, Arial, Helvetica, sans-serif",
          fontWeight: 800,
          fontSize: 22 * scale,
          letterSpacing: "-0.04em",
          color,
          lineHeight: 1,
        }}>impresoft</span>
        <span style={{
          fontFamily: "Manrope, Arial, Helvetica, sans-serif",
          fontWeight: 800,
          fontSize: 22 * scale,
          color: chevronColor,
          lineHeight: 1,
        }}>&gt;</span>
      </div>
      {showPayoff && (
        <div style={{
          paddingLeft: 10 * scale,
          marginLeft: 2 * scale,
          borderLeft: `1.5px solid ${color === "var(--white)" ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.18)"}`,
          display: "flex", flexDirection: "column", gap: 1,
        }}>
          <span style={{
            fontFamily: "Manrope, Arial, Helvetica, sans-serif",
            fontWeight: 700,
            fontSize: 11 * scale,
            color,
            letterSpacing: "0.02em",
            lineHeight: 1.1,
          }}>engage</span>
          <span style={{
            fontFamily: "Manrope, Arial, Helvetica, sans-serif",
            fontWeight: 500,
            fontSize: 8 * scale,
            color: color === "var(--white)" ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.55)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            lineHeight: 1.1,
          }}>RevOps Diagnostic</span>
        </div>
      )}
    </div>
  );
}

// Pattern decorativo: ripetizione del chevron (Brand Manual §2.4)
function ChevronPattern({ density = 8, opacity = 0.08, color = "currentColor", rotate = -20 }) {
  const rows = Array.from({ length: density });
  const cols = Array.from({ length: density * 2 });
  return (
    <div style={{
      position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none",
      transform: `rotate(${rotate}deg) scale(1.4)`, transformOrigin: "center",
    }}>
      {rows.map((_, r) => (
        <div key={r} style={{ display: "flex", justifyContent: "center", gap: 16, marginBottom: 8 }}>
          {cols.map((_, c) => (
            <span key={c} style={{
              fontFamily: "Manrope, sans-serif",
              fontWeight: 800, fontSize: 22, color, opacity,
              userSelect: "none",
            }}>&gt;</span>
          ))}
        </div>
      ))}
    </div>
  );
}

// ─── Scala 1-10 PULITA (no commenti)
function StageScale({ score }) {
  const stage = Math.max(1, Math.min(10, Math.round(score)));
  return (
    <div className="scale-wrap">
      <div className="stage-scale">
        {STAGES.map((s) => {
          const active = s.n === stage;
          return (
            <div key={s.n} className={`stage ${active ? "active" : ""}`}>
              <div className="num">{s.n}</div>
              <div className="lbl">{s.name}</div>
            </div>
          );
        })}
      </div>
      <div className="phase-bar">
        <div className="p1">&gt; Crescita Accelerata</div>
        <div className="p2">&gt; Crescita Composita</div>
        <div className="p3">&gt; Crescita Autonoma</div>
      </div>
      {score != null && (
        <div className="stage-marker" style={{ left: `calc(${(stage - 0.5) * 10}% )` }}>
          <div className="dot" />
          <div className="lbl-pill">La tua azienda · Fase {stage}</div>
        </div>
      )}
    </div>
  );
}

// Hero heading
function HeroHeading() {
  return (
    <h1 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", textAlign: "center", margin: 0, fontWeight: 800, letterSpacing: "-0.025em" }}>
      Primo step per passare da
      <br />
      <span style={{ fontWeight: 500, fontStyle: "italic", color: "var(--ink-3)" }}>eseguire</span>
      <span style={{ color: "var(--ink-3)", fontWeight: 500 }}> la Crescita a </span>
      <span style={{ background: "var(--yellow)", padding: "0 14px", display: "inline-block", transform: "skew(-3deg)" }}>orchestrarla</span>
      <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>:</span>
      <br />
      <span style={{ fontWeight: 500, color: "var(--ink-3)", fontSize: "0.7em" }}>
        capire dove si trova la tua azienda <em>oggi</em>.
      </span>
    </h1>
  );
}

// ─── Summary leggibile per il campo testo HubSpot
function buildAssessmentSummary(answers, lead) {
  const { pillarScores, global, phase } = computeScores(answers);
  const stage = stageFromScore(global);
  const ph = PHASES[phase];
  const lev = impresoftLevel(global);
  const lines = [];
  lines.push(`=== REVOPS DIAGNOSTIC — ${(lead?.azienda || "").toUpperCase()} ===`);
  lines.push("");
  lines.push(`SCORE GLOBALE: ${global.toFixed(1)}/10`);
  lines.push(`FASE (1-10): ${stage} — ${STAGES[stage-1].name}`);
  lines.push(`MACRO-FASE: ${ph.label} (${ph.range})`);
  lines.push(`LIVELLO IMPRESOFT (5L): L${lev.n} — ${lev.name} (${lev.tagline})`);
  lines.push(`CULTURA: ${lev.culture}`);
  lines.push("");
  lines.push("--- BREAKDOWN PILLAR ---");
  pillarScores.forEach((p) => lines.push(`${p.n} ${p.name}: ${p.score.toFixed(1)}/10`));
  lines.push("");
  lines.push("--- RISPOSTE ---");
  PILLARS.forEach((p) => {
    lines.push(`\n[${p.n}] ${p.name.toUpperCase()}`);
    p.questions.forEach((q, i) => {
      const v = answers[`${p.id}-${i}`];
      const opt = q.opts.find((o) => o.v === v);
      lines.push(`  Q${i+1}. ${q.q}`);
      lines.push(`  -> ${opt ? opt.t : "(non risposto)"} [${v ?? "-"}/10]`);
    });
  });
  lines.push("");
  lines.push("--- TOP 3 GAP ---");
  pillarScores.slice().sort((a, b) => a.score - b.score).slice(0, 3).forEach((p, i) => {
    lines.push(`${i+1}. [${p.name}] ${recommendationFor(p.id, p.score)}`);
  });
  return lines.join("\n");
}

// Costruisce il messaggio HubSpot con Q&A numerato + risultati assessment
function buildHubSpotMessage(answers, lead) {
  // ── Sezione Q&A ──
  const qa = [];
  let qNum = 0;
  PILLARS.forEach((p) => {
    p.questions.forEach((q, i) => {
      qNum++;
      const v = answers[`${p.id}-${i}`];
      const optIdx = q.opts.findIndex((o) => o.v === v);
      const opt = q.opts[optIdx];
      const letter = ["A", "B", "C", "D"][optIdx] ?? "?";
      qa.push(`${qNum}) ${p.name} - ${q.q}`);
      qa.push(`${letter}) ${opt ? opt.t : "(non risposto)"}`);
      qa.push("");
    });
  });

  // ── Sezione risultati (specchio della schermata finale) ──
  const { pillarScores, global, phase } = computeScores(answers);
  const stage = stageFromScore(global);
  const ph = PHASES[phase];
  const lev = impresoftLevel(global);

  const res = [];
  res.push("════════════════════════════════════");
  res.push(`RISULTATI ASSESSMENT — ${(lead?.azienda || "").toUpperCase()}`);
  res.push("════════════════════════════════════");
  res.push("");
  res.push(`Score globale:   ${global.toFixed(1)} / 10`);
  res.push(`Fase:            ${stage} — ${STAGES[stage - 1].name}`);
  res.push(`Macro-fase:      ${ph.label} (${ph.range})`);
  res.push(`Livello RevOps:  L${lev.n} — ${lev.name} · ${lev.tagline}`);
  res.push("");
  res.push("── Breakdown pillar ──────────────────");
  pillarScores.forEach((p) => {
    const bar = "█".repeat(Math.round(p.score)) + "░".repeat(10 - Math.round(p.score));
    res.push(`${p.n} ${p.name.padEnd(20)} ${bar}  ${p.score.toFixed(1)}/10`);
  });
  res.push("");
  res.push("── Top 3 gap ─────────────────────────");
  pillarScores.slice().sort((a, b) => a.score - b.score).slice(0, 3).forEach((p, i) => {
    res.push(`${i + 1}. ${p.name}: ${recommendationFor(p.id, p.score)}`);
  });

  return [...qa, ...res].join("\n").trim();
}

// HubSpot Forms API — submit EU portal
async function submitToHubSpot({ lead, answers }) {
  const PORTAL_ID = "26601386";
  const FORM_ID   = "ef738ac1-6967-4966-a244-cc2929266fc2";
  const message   = buildHubSpotMessage(answers, lead);

  const fields = [
    { objectTypeId: "0-1", name: "firstname",    value: lead.nome      || "" },
    { objectTypeId: "0-1", name: "lastname",     value: lead.cognome   || "" },
    { objectTypeId: "0-1", name: "email",        value: lead.email     || "" },
    { objectTypeId: "0-1", name: "company",      value: lead.azienda   || "" },
    { objectTypeId: "0-1", name: "mobilephone",  value: lead.cellulare || "" },
    { objectTypeId: "0-1", name: "message",      value: message        },
  ];

  const body = {
    fields,
    legalConsentOptions: {
      consent: {
        consentToProcess: true,
        text: "Cliccando sul pulsante sottostante dichiaro di aver letto e compreso l'informativa privacy",
        communications: [
          {
            value: !!lead.marketing,
            subscriptionTypeId: 289759401,
            text: "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 da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 14 dell'informativa privacy",
          },
          {
            value: !!lead.marketing2,
            subscriptionTypeId: 263710602,
            text: "Acconsento alla comunicazione da parte del Titolare Impresoft Engage dei dati alle Società del Gruppo per il trattamento da parte di queste ultime dei dati per finalità di marketing sui prodotti e servizi propri e delle società del Gruppo come indicato al paragrafo 3 punto 9 dell'informativa privacy",
          },
        ],
      },
    },
    context: { pageUri: window.location.href, pageName: document.title },
    submittedAt: Date.now(),
  };

  try {
    const res = await fetch(
      `https://api.hsforms.com/submissions/v3/integration/submit/${PORTAL_ID}/${FORM_ID}`,
      { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }
    );
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      console.error("HubSpot error", res.status, data);
      return { ok: false, status: res.status, data };
    }
    return { ok: true, status: res.status, data };
  } catch (e) {
    console.error("HubSpot fetch error", e);
    return { ok: false, error: e.message };
  }
}

// Validazione cellulare italiano: accetta +39XXXXXXXXXX, 0039XXXXXXXXXX, 3XXXXXXXXX (con o senza spazi)
function isValidPhone(v) {
  return /^(\+39|0039)?\s?3\d{2}[\s\-]?\d{3}[\s\-]?\d{4}$/.test(v.trim());
}

// ─── Lead form (gating)
function LeadForm({ onSubmit, answers }) {
  const [data, setData] = useState({
    nome: "", cognome: "", azienda: "", email: "", ruolo: "",
    cellulare: "", marketing: false, marketing2: false,
  });
  const [phoneErr, setPhoneErr] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState(null);

  const phoneOk = data.cellulare === "" || isValidPhone(data.cellulare);
  const valid = data.nome && data.cognome && data.email && data.azienda && data.ruolo
    && data.cellulare && isValidPhone(data.cellulare);

  async function handleSubmit(e) {
    e.preventDefault();
    if (!isValidPhone(data.cellulare)) { setPhoneErr(true); return; }
    if (!valid || submitting) return;
    setSubmitting(true);
    setErr(null);
    const res = await submitToHubSpot({ lead: data, answers: answers || {} });
    setSubmitting(false);
    if (!res.ok) {
      setErr("Si è verificato un errore nell'invio. La tua diagnosi è comunque pronta — riproveremo a inviare i dati. Errore: " + (res.data?.message || res.error || res.status));
    }
    onSubmit(data);
  }

  return (
    <form className="lead-form" onSubmit={handleSubmit}>
      <div className="lf-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><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>
        <label><span>Azienda *</span>
          <input required value={data.azienda} onChange={(e)=>setData({...data, azienda:e.target.value})} placeholder="Nome azienda"/>
        </label>
        <label><span>Cellulare *</span>
          <input
            required
            type="tel"
            value={data.cellulare}
            onChange={(e) => { setPhoneErr(false); setData({...data, cellulare: e.target.value}); }}
            onBlur={() => setPhoneErr(data.cellulare !== "" && !isValidPhone(data.cellulare))}
            placeholder="+39 333 000 0000"
            style={phoneErr ? { borderColor: "var(--err)" } : {}}
          />
          {phoneErr && <span style={{ color: "var(--err)", fontSize: 11, marginTop: 2 }}>Inserisci un numero di cellulare italiano valido (es. +39 333 000 0000)</span>}
        </label>
        <label className="lf-full"><span>Ruolo *</span>
          <input required value={data.ruolo} onChange={(e)=>setData({...data, ruolo:e.target.value})} placeholder="es. CRO, COO, Head of RevOps, Sales Director"/>
        </label>
      </div>

      <label className="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 da parte del Titolare Impresoft Engage come indicato al paragrafo 3 punto 14 dell'informativa privacy. <em>(facoltativo)</em></span>
      </label>
      <label className="check">
        <input type="checkbox" checked={data.marketing2} onChange={(e)=>setData({...data, marketing2:e.target.checked})} />
        <span>Acconsento alla comunicazione da parte del Titolare Impresoft Engage dei dati alle Società del Gruppo per il trattamento da parte di queste ultime dei dati per finalità di marketing sui prodotti e servizi propri e delle società del Gruppo come indicato al paragrafo 3 punto 9 dell'informativa privacy. <em>(facoltativo)</em></span>
      </label>

      <p style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5, margin: "4px 0 0" }}>
        Cliccando sul pulsante sottostante dichiaro di aver letto e compreso l'<u style={{ cursor: "pointer" }}>informativa privacy</u>.
      </p>

      <button type="submit" className="btn btn-primary lf-submit" disabled={!valid || submitting}>
        {submitting ? "Invio in corso…" : "Sblocca la mia diagnosi >"}
      </button>
      {err && <div className="lf-err">⚠ {err}</div>}
    </form>
  );
}

// ─── HubSpot Meetings embed
function MeetingsEmbed() {
  useEffect(() => {
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js";
    s.async = true;
    document.body.appendChild(s);
    return () => { document.body.removeChild(s); };
  }, []);
  return (
    <div
      className="meetings-iframe-container"
      data-src="https://meetings-eu1.hubspot.com/abruti/revops-assessment-review?embed=true"
      style={{ minHeight: 720, width: "100%", background: "var(--white)" }}
    />
  );
}

// ─── Schermata risultato
function ResultScreen({ answers, lead, aiData, onRestart }) {
  const { pillarScores, global, phase } = useMemo(() => computeScores(answers), [answers]);
  const stage = stageFromScore(global);
  const ph = PHASES[phase];
  const lev = impresoftLevel(global);
  return (
    <div className="result-screen">
      <div className="r-hero">
        <div className="kicker">Diagnosi RevOps · {lead?.azienda || "la tua azienda"}</div>
        <h1 className="display" style={{ fontSize: "clamp(28px, 4.6vw, 60px)", margin: "16px 0 12px", fontWeight: 800, letterSpacing: "-0.025em", wordBreak: "break-word", overflowWrap: "break-word" }}>
          {lead?.azienda || "La tua azienda"} è in fase{" "}
          <span style={{ background: "var(--yellow)", padding: "0 10px", display: "inline-block", lineHeight: 1.2 }}>
            {stage} · {STAGES[stage-1].name}
          </span>
        </h1>
        <p style={{ fontSize: 19, color: "var(--ink-3)", maxWidth: 760, margin: "16px auto 0", lineHeight: 1.5 }}>
          {ph.headline}
        </p>
      </div>

      <div className="r-scale">
        <StageScale score={global} />
      </div>

      <div className="r-summary">
        <div className="r-phase-card">
          <div className="kicker">Macro-fase {ph.range} · {ph.label}</div>
          <p style={{ fontSize: 17, lineHeight: 1.55, marginTop: 14, color: "var(--ink-2)" }}>{ph.description}</p>
          <div className="r-risk">⚠ {ph.risk}</div>
        </div>
        <div className="r-global">
          <div className="kicker">Score globale</div>
          <div className="score-big">{global.toFixed(1)}<span>/10</span></div>
          <div style={{ color: "var(--ink-soft)", fontSize: 13, marginTop: 4 }}>Media pesata sui 7 pillar</div>
        </div>
      </div>

      {aiData?.globalInsight && (
        <div style={{ maxWidth: 900, margin: "0 auto 48px", padding: "32px 36px", background: "var(--black)", color: "var(--white)", borderRadius: "var(--radius-md)" }}>
          <div className="kicker" style={{ color: "var(--yellow)", marginBottom: 12 }}>
            Analisi AI · {aiData.businessModel}
            {aiData.urgency === "high" && <span style={{ marginLeft: 12, background: "var(--err)", color: "var(--white)", padding: "2px 8px", borderRadius: "var(--radius-sm)", fontSize: 10 }}>PRIORITÀ ALTA</span>}
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.65, margin: 0, color: "rgba(255,255,255,.88)" }}>{aiData.globalInsight}</p>
        </div>
      )}

      <div className="r-impresoft">
        <div className="kicker" style={{ marginBottom: 18 }}>Modello Impresoft Engage · 5 livelli di maturità RevOps</div>
        <div className="lvl-grid">
          {IMPRESOFT_LEVELS.map((l) => (
            <div key={l.n} className={`lvl-card ${l.n === lev.n ? "active" : ""}`}>
              <span className="lvl-n">L{l.n}</span>
              <span className="lvl-name">{l.name}</span>
              <span className="lvl-tag">{l.tagline}</span>
              <span className="lvl-culture">{l.culture}</span>
              {l.n === lev.n && <span className="lvl-you">↑ La tua azienda</span>}
            </div>
          ))}
        </div>
      </div>

      <div className="r-pillars">
        <div className="kicker" style={{ marginBottom: 22 }}>Breakdown per pillar · 7 dimensioni della Revenue Architecture</div>
        <div className="pillar-grid">
          {pillarScores.map((p) => {
            const pct = (p.score / 10) * 100;
            const tone = p.score < 4.5 ? "low" : p.score < 7.5 ? "mid" : "high";
            return (
              <div key={p.id} className={`pillar-card t-${tone}`}>
                <div className="pc-top">
                  <span className="pc-n">{p.n}</span>
                  <span className="pc-name">{p.name}</span>
                  <span className="pc-score">{p.score.toFixed(1)}</span>
                </div>
                <div className="pc-bar"><div className="pc-fill" style={{ width: `${pct}%` }}/></div>
                <div className="pc-rec">&gt; {recommendationFor(p.id, p.score)}</div>
                {aiData?.pillarComments?.[p.name] && (
                  <div style={{ marginTop: 10, padding: "10px 12px", background: "var(--yellow-soft)", borderLeft: "3px solid var(--yellow)", fontSize: 13, lineHeight: 1.55, color: "var(--ink-2)" }}>
                    {aiData.pillarComments[p.name]}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <div className="r-cta">
        <div className="r-cta-head">
          <div className="kicker" style={{ color: "var(--yellow)" }}>Prossimo passo · call gratuita 30 minuti</div>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "16px 0 12px", color: "var(--white)", fontWeight: 800, letterSpacing: "-0.025em" }}>
            Prenota una call con Alessandro Bruti per
            <br/>capire come passare alla fase {Math.min(stage + 1, 10)}.
          </h2>
          <p style={{ fontSize: 17, color: "rgba(255,255,255,.72)", lineHeight: 1.55, margin: "0 auto", maxWidth: 720 }}>
            Revenue Operations Manager di Impresoft Engage. Analizziamo insieme i 3 gap principali della tua diagnosi e definiamo un percorso di intervento concreto. Nessun impegno.
          </p>
        </div>

        <div className="r-meetings">
          <MeetingsEmbed />
        </div>

        <div style={{ textAlign: "center", marginTop: 24 }}>
          <button className="btn btn-ghost" onClick={onRestart} style={{ color: "rgba(255,255,255,.7)" }}>
            ↻ Rifai la diagnosi
          </button>
        </div>
      </div>
    </div>
  );
}

window.StageScale = StageScale;
window.HeroHeading = HeroHeading;
window.LeadForm = LeadForm;
window.ResultScreen = ResultScreen;
window.ImpresoftLogo = ImpresoftLogo;
window.ChevronPattern = ChevronPattern;
window.MeetingsEmbed = MeetingsEmbed;
window.buildAssessmentSummary = buildAssessmentSummary;