/* Interactive 4-step demo, controlled by activeStep prop */
const { useState, useEffect } = React;

const BANDI = [
  { city: "Rimini Marina Centro", lot: "Lotto 12 — Stabilimento", deadline: "30 giu 2026", duration: "20 anni", base: "€ 48.000/anno", tags: ["Costa Adriatica", "Centro"] },
  { city: "Forte dei Marmi", lot: "Lotto 04 — Bagno Versilia", deadline: "12 lug 2026", duration: "15 anni", base: "€ 92.000/anno", tags: ["Toscana", "Premium"], hot: true },
  { city: "Gallipoli — Baia Verde", lot: "Lotto 08 — Lido", deadline: "22 ago 2026", duration: "20 anni", base: "€ 36.000/anno", tags: ["Salento"] },
  { city: "Jesolo Pineta", lot: "Lotto 21 — Stabilimento", deadline: "05 set 2026", duration: "18 anni", base: "€ 54.000/anno", tags: ["Veneto"] },
];

function StepBandi({ active }) {
  const [sel, setSel] = useState(1);
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18}}>
        <div>
          <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.1em', marginBottom:4}}>BANDI ATTIVI · 247 IN ITALIA</div>
          <div style={{fontFamily:"'Instrument Serif', serif", fontSize:24, color:'var(--blu)'}}>Seleziona il bando</div>
        </div>
        <div className="mono" style={{fontSize:12, color:'var(--ink-3)'}}>filtra: <span style={{color:'var(--blu)'}}>Adriatica ▾</span></div>
      </div>
      <div className="step1-grid">
        {BANDI.map((b, i) => (
          <div key={i} className={"bando-card " + (sel === i ? "selected" : "")} onClick={() => setSel(i)}>
            <div className="city">{b.city}</div>
            <div className="meta"><span><b>{b.duration}</b></span><span>scad. <b>{b.deadline}</b></span></div>
            <div className="meta" style={{marginBottom:12}}><span>base d'asta <b>{b.base}</b></span></div>
            <div className="tags">
              {b.tags.map(t => <span key={t} className="bando-tag">{t}</span>)}
              {b.hot && <span className="bando-tag hot">★ alto interesse</span>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepUpload({ active }) {
  const files = [
    { name: "Visura camerale.pdf", size: "248 KB", state: "ok" },
    { name: "DURC regolare.pdf", size: "112 KB", state: "ok" },
    { name: "Bilancio 2024.pdf", size: "1.4 MB", state: "ok" },
    { name: "Progetto tecnico.dwg", size: "3.8 MB", state: active ? "spin" : "ok" },
    { name: "Curriculum esperienza.pdf", size: "320 KB", state: "ok" },
  ];
  return (
    <div>
      <div style={{marginBottom: 18}}>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.1em', marginBottom:4}}>OFFERTA AMMINISTRATIVA · TECNICA · ECONOMICA</div>
        <div style={{fontFamily:"'Instrument Serif', serif", fontSize:24, color:'var(--blu)'}}>Carica i tuoi documenti</div>
      </div>
      <div className={"upload-zone " + (active ? "active" : "")}>
        <div className="upload-icon">↑</div>
        <div style={{fontSize:14, fontWeight:500, color:'var(--ink)'}}>Trascina qui o seleziona i file</div>
        <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>PDF, DOC, DWG · firma digitale supportata</div>
      </div>
      <div className="upload-files">
        {files.map((f, i) => (
          <div key={i} className="upload-row">
            <span style={{fontSize:18, color:'var(--blu)'}}>📄</span>
            <span className="name">{f.name}</span>
            <span className="size">{f.size}</span>
            {f.state === "ok" ? <span className="check">✓</span> : <span className="spin"></span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function StepEval({ active }) {
  const items = [
    { label: "Esperienza pregressa nel settore", meta: "Offerta tecnica · criterio T.1", pts: 18, max: 20 },
    { label: "Sostenibilità ambientale del progetto", meta: "Offerta tecnica · criterio T.3", pts: 14, max: 15 },
    { label: "Accessibilità e servizi inclusivi", meta: "Offerta tecnica · criterio T.5", pts: 9, max: 10 },
    { label: "Canone offerto vs base d'asta", meta: "Offerta economica · criterio E.1", pts: 22, max: 30 },
    { label: "Investimenti programmati (PEF)", meta: "Offerta economica · criterio E.2", pts: 24, max: 25 },
  ];
  const total = items.reduce((s, x) => s + x.pts, 0);
  return (
    <div>
      <div style={{marginBottom: 18}}>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.1em', marginBottom:4}}>VALUTAZIONE AI IN TEMPO REALE</div>
        <div style={{fontFamily:"'Instrument Serif', serif", fontSize:24, color:'var(--blu)'}}>Punteggio stimato per criterio</div>
      </div>
      <div className="eval-grid">
        <div className="eval-list">
          {items.map((it, i) => (
            <div key={i} className="eval-row">
              <div>
                <div className="label">{it.label}</div>
                <div className="meta">{it.meta}</div>
                <div className="eval-bar"><div style={{width: `${(it.pts/it.max)*100}%`}}></div></div>
              </div>
              <div className="pts">{it.pts}<span className="max">/{it.max}</span></div>
            </div>
          ))}
        </div>
        <div className="score-ring">
          <div className="num">{total}<span className="y">.0</span></div>
          <div className="lbl">su 100</div>
          <div className="delta">+12 vs media bandi</div>
        </div>
      </div>
    </div>
  );
}

function StepSubmit({ active }) {
  const [fixed, setFixed] = useState([false, false]);
  useEffect(() => {
    if (active) {
      setFixed([false, false]);
      const t1 = setTimeout(() => setFixed([true, false]), 4500);
      const t2 = setTimeout(() => setFixed([true, true]), 9000);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    } else {
      setFixed([false, false]);
    }
  }, [active]);
  return (
    <div>
      <div style={{marginBottom: 18}}>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.1em', marginBottom:4}}>CONTROLLO INCONGRUENZE · ESPORTAZIONE PACCHETTO</div>
        <div style={{fontFamily:"'Instrument Serif', serif", fontSize:24, color:'var(--blu)'}}>Revisione finale ed esportazione</div>
      </div>
      <div className="submit-state">
        <div className={"incon-row " + (fixed[0] ? "fixed" : "")}>
          <div className="incon-ico">{fixed[0] ? "✓" : "!"}</div>
          <div className="incon-body">
            <div className="t">{fixed[0] ? "Risolto: fatturato 2024 allineato" : "Discrepanza: fatturato dichiarato"}</div>
            <div className="d">Bilancio 2024 € 1.240.000 vs Visura camerale (descrittivo) € 1.180.000</div>
          </div>
        </div>
        <div className={"incon-row " + (fixed[1] ? "fixed" : "")}>
          <div className="incon-ico">{fixed[1] ? "✓" : "!"}</div>
          <div className="incon-body">
            <div className="t">{fixed[1] ? "Risolto: superficie coerente" : "Discrepanza: superficie del lotto"}</div>
            <div className="d">Progetto tecnico 1.420 m² vs PEF — investimento per m² calcolato su 1.380 m²</div>
          </div>
        </div>
        <div className="submit-final">
          <div>
            <div className="t">Pronto per il protocollo</div>
            <div className="s">Pacchetto firmato · 14 documenti · 6,2 MB</div>
          </div>
          <div className="btn btn-yellow">Esporta ↓</div>
        </div>
      </div>
    </div>
  );
}

function StepCompila({ active }) {
  const fields = [
    { label: "Esperienza pregressa nel settore turistico-balneare", val: "12 anni · 3 stabilimenti gestiti", section: "Tecnica · T.1", suggested: false },
    { label: "Investimenti programmati nei primi 5 anni", val: "€ 480.000", section: "Economica · E.2", suggested: true },
    { label: "Servizi inclusivi e accessibilità (PMR)", val: "Pedane, sedie JOB, spogliatoi adattati", section: "Tecnica · T.5", suggested: false },
    { label: "Piano sostenibilità ambientale", val: "ISO 14001 + impianto fotovoltaico 18 kWp", section: "Tecnica · T.3", suggested: true },
    { label: "Canone offerto sopra base d'asta", val: "+ 14% (€ 54.720 / anno)", section: "Economica · E.1", suggested: false },
  ];
  return (
    <div>
      <div style={{marginBottom: 18}}>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.1em', marginBottom:4}}>OFFERTA AMMINISTRATIVA · TECNICA · ECONOMICA + PEF</div>
        <div style={{fontFamily:"'Instrument Serif', serif", fontSize:24, color:'var(--blu)'}}>Compila la tua proposta</div>
      </div>
      <div className="compila-list">
        {fields.map((f, i) => (
          <div key={i} className="compila-row">
            <div className="compila-meta mono">{f.section}</div>
            <div className="compila-label">{f.label}</div>
            <div className="compila-val">
              <span>{f.val}</span>
              <button className="compila-edit" type="button" aria-label="Modifica">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Demo = function Demo({ step }) {
  const stepLabels = ["Selezione bando", "Documenti", "Compila proposta", "Valutazione AI", "Esportazione"];
  return (
    <div className="demo-shell">
      <div className="demo-bar">
        <span className="pip" style={{background:'#f5a500'}}></span>
        <span className="pip"></span>
        <span className="pip"></span>
        <span className="crumb">
          sportellobalneari.it<span className="sep">/</span>
          dashboard<span className="sep">/</span>
          <span className="here">{stepLabels[step]}</span>
        </span>
      </div>
      <div className="demo-body">
        {step === 0 && <StepBandi active={true} />}
        {step === 1 && <StepUpload active={true} />}
        {step === 2 && <StepCompila active={true} />}
        {step === 3 && <StepEval active={true} />}
        {step === 4 && <StepSubmit active={true} />}
      </div>
    </div>
  );
};