/* global React, DictoIcons, DictoShell */
// Steps5-8.jsx — Provider AI · Geografia · Personas · Riepilogo (Brand/Personal/Topic)

const {
  IconCheck, IconPlus, IconInfo, IconSparkles, IconSearch,
  IconChevDown, IconX, IconSettings, IconBolt, IconLock, IconUsers,
  IconChevRight, IconBuilding, IconUser, IconHash,
  LogoOpenAI, LogoGemini, LogoClaude, LogoPerplexity, LogoMistral, LogoGrok,
  Flag,
} = window.DictoIcons;
const { Wizard } = window.DictoShell;

// ─── Step 05: Provider AI (was 06) ─────────────────────────
function Step05Providers({ nav = {} } = {}) {
  const [openQuestions, setOpenQuestions] = React.useState(false);
  const providers = [
    { k:'openai', name:'OpenAI', model:'GPT-5 · GPT-5 mini', logo:<LogoOpenAI size={36}/>, cost:'Medio', coverage:'98%', selected:true, rec:true },
    { k:'gemini', name:'Google Gemini', model:'Gemini 2.5 Pro · Flash Lite', logo:<LogoGemini size={36}/>, cost:'Basso', coverage:'95%', selected:true, rec:true },
    { k:'claude', name:'Anthropic Claude', model:'Claude Haiku 4.5 · Sonnet 4.5', logo:<LogoClaude size={36}/>, cost:'Medio', coverage:'92%', selected:true },
    { k:'perp',   name:'Perplexity', model:'Sonar · Sonar Pro', logo:<LogoPerplexity size={36}/>, cost:'Medio', coverage:'90%', selected:true },
    { k:'mistral',name:'Mistral', model:'Mistral Large · Small', logo:<LogoMistral size={36}/>, cost:'Basso', coverage:'80%' },
    { k:'grok',   name:'xAI Grok', model:'Grok 4', logo:<LogoGrok size={36}/>, cost:'Medio', coverage:'75%' },
  ];
  const baseQuestions = [
    'Cos\'è {brand} e in quale settore opera?',
    'Quali sono i prodotti principali di {brand}?',
    'Chi sono i principali concorrenti di {brand}?',
    'Quali valori associate al brand {brand}?',
    'Qual è la reputazione di {brand} sul tema sostenibilità?',
    'In cosa {brand} è leader rispetto ai competitor?',
    'Consiglieresti {brand} a un consumatore italiano? Perché?',
    'Quali sono le critiche o controversie note legate a {brand}?',
  ];
  return (
    <Wizard {...nav} step={5} done={[1,2,3,4]} title="Nuovo progetto · Provider AI">

      <div style={{marginBottom:24}}>
        <h2 className="section-title">Quali AI vuoi interrogare?</h2>
        <p className="section-desc">
          Ogni provider ha un modo diverso di rispondere. Selezionandone più di uno ottieni un quadro completo — Dicto confronta automaticamente coerenza, accuratezza e bias tra modelli.
        </p>
      </div>

      <div className="provider-grid" style={{marginBottom:16}}>
        {providers.map(p => (
          <div key={p.k} className={'provider' + (p.selected ? ' selected' : '')}>
            {p.logo}
            <div style={{flex:1, minWidth:0}}>
              <div className="hstack" style={{justifyContent:'space-between'}}>
                <div className="provider-name">{p.name}</div>
                {p.rec && <span className="chip brand" style={{height:20, fontSize:10.5}}>Consigliato</span>}
              </div>
              <div className="provider-model">{p.model}</div>
              <div className="provider-meta">
                <span>Costo: <strong style={{color:'#0A0A0B', fontWeight:600}}>{p.cost}</strong></span>
                <span>Copertura IT: <strong style={{color:'#0A0A0B', fontWeight:600}}>{p.coverage}</strong></span>
              </div>
            </div>
            <div style={{position:'absolute', top:14, right:14}}>
              <div style={{width:20, height:20, borderRadius:'50%', borderWidth:1.5, borderStyle:'solid', borderColor: p.selected ? '#0A0A0B' : '#DDDDE2', background: p.selected ? '#0A0A0B' : 'transparent', color: p.selected ? '#fff' : 'transparent', display:'grid', placeItems:'center'}}>
                <IconCheck size={11} stroke={3}/>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{marginBottom:16}}>
        <div className="card-head">
          <div className="hstack" style={{justifyContent:'space-between'}}>
            <div>
              <h3 className="card-title">Parametri periodicità dell'analisi</h3>
              <p className="card-desc">Come e quanto spesso Dicto interroga i modelli.</p>
            </div>
            <button className="btn ghost sm"><IconSettings size={13}/> Avanzate</button>
          </div>
        </div>
        <div className="card-pad" style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16}}>
          <div className="field">
            <label className="field-label">Domande per provider</label>
            <div className="input-group has-trailing">
              <input className="input" defaultValue="20"/>
              <span className="trailing"><IconChevDown size={14}/></span>
            </div>
            <div className="field-hint">Mix di domande brand, categoria e contesto.</div>
          </div>
          <div className="field">
            <label className="field-label">Frequenza rilevazioni</label>
            <div className="input-group has-trailing">
              <input className="input" defaultValue="Settimanale · lunedì"/>
              <span className="trailing"><IconChevDown size={14}/></span>
            </div>
            <div className="field-hint">Prima esecuzione subito dopo il lancio.</div>
          </div>
          <div className="field">
            <label className="field-label">Temperature</label>
            <div className="input-group has-trailing">
              <input className="input" defaultValue="0.7 (bilanciata)"/>
              <span className="trailing"><IconChevDown size={14}/></span>
            </div>
            <div className="field-hint">Più alta = risposte più varie.</div>
          </div>
        </div>
      </div>

      {/* Expandable: Domande base della Persona Base */}
      <div className="card" style={{marginBottom:16}}>
        <button onClick={() => setOpenQuestions(!openQuestions)}
          style={{all:'unset', cursor:'pointer', display:'flex', width:'100%', padding:'18px 22px', alignItems:'center', justifyContent:'space-between'}}>
          <div className="hstack" style={{gap:12}}>
            <div style={{width:32, height:32, borderRadius:8, background:'#F2F2F5', display:'grid', placeItems:'center', color:'#4A4A52'}}>
              <IconUsers size={16}/>
            </div>
            <div>
              <div style={{fontSize:14, fontWeight:600, color:'#0A0A0B'}}>Domande base della Persona Base</div>
              <div style={{fontSize:12.5, color:'#4A4A52', marginTop:2}}>
                {baseQuestions.length} domande standard usate dalla Default Persona · puoi modificarle
              </div>
            </div>
          </div>
          <div style={{transform: openQuestions ? 'rotate(90deg)' : 'rotate(0deg)', transition:'transform 0.2s', color:'#8A8A93'}}>
            <IconChevRight size={16}/>
          </div>
        </button>
        {openQuestions && (
          <div style={{padding:'4px 22px 22px', borderTop:'1px solid #F0F0F3'}}>
            <div style={{fontSize:11.5, fontWeight:600, color:'#8A8A93', textTransform:'uppercase', letterSpacing:'0.06em', margin:'16px 0 10px'}}>Set domande standard</div>
            <div style={{display:'grid', gap:8}}>
              {baseQuestions.map((q,i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'24px 1fr auto', gap:10, alignItems:'center', padding:'10px 12px', border:'1px solid #EBEBEF', borderRadius:8, background:'#fff'}}>
                  <span style={{fontSize:11, color:'#8A8A93', fontFamily:'JetBrains Mono, monospace', fontVariantNumeric:'tabular-nums'}}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{fontSize:13, color:'#1F1F23'}}>{q}</span>
                  <button className="btn ghost sm" style={{padding:'0 8px', height:26, color:'#8A8A93'}}><IconX size={12}/></button>
                </div>
              ))}
            </div>
            <div className="hstack" style={{justifyContent:'space-between', marginTop:12}}>
              <button className="btn ghost sm"><IconPlus size={12}/> Aggiungi domanda</button>
              <span className="muted" style={{fontSize:11.5}}>Le variabili tra parentesi graffe sono sostituite a runtime — es. <span className="kbd">{`{brand}`}</span></span>
            </div>
          </div>
        )}
      </div>

      <div className="banner">
        <IconBolt size={16} className="ic"/>
        <div>
          <strong>~80 query stimate per ciclo · 320 al mese.</strong> Rientri ampiamente nel piano <strong>Growth</strong> (10.000 query/mese).
        </div>
      </div>
    </Wizard>
  );
}

// ─── Step 06: Geografia (was 05) ─────────────────────────
function Step06Geo({ nav = {} } = {}) {
  const countries = [
    { code:'IT', name:'Italia', lang:'Italiano', selected:true, primary:true },
    { code:'FR', name:'Francia', lang:'Français', selected:true },
    { code:'DE', name:'Germania', lang:'Deutsch', selected:true },
    { code:'ES', name:'Spagna', lang:'Español' },
    { code:'UK', name:'Regno Unito', lang:'English (UK)', selected:true },
    { code:'US', name:'Stati Uniti', lang:'English (US)' },
    { code:'CH', name:'Svizzera', lang:'IT / FR / DE' },
    { code:'AT', name:'Austria', lang:'Deutsch' },
    { code:'NL', name:'Paesi Bassi', lang:'Nederlands' },
    { code:'BE', name:'Belgio', lang:'NL / FR' },
    { code:'PT', name:'Portogallo', lang:'Português' },
    { code:'SE', name:'Svezia', lang:'Svenska' },
  ];
  return (
    <Wizard {...nav} step={6} done={[1,2,3,4,5]} title="Nuovo progetto · Geografia">

      <div style={{marginBottom:24}}>
        <h2 className="section-title">In quali mercati vuoi condurre l'analisi?</h2>
        <p className="section-desc">
          Dicto interrogherà i modelli AI simulando utenti di ciascun paese, nella lingua locale. Più mercati selezionate, più tempo serve per raccogliere le risposte.
        </p>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="hstack" style={{justifyContent:'space-between'}}>
            <div>
              <h3 className="card-title">Mercati di analisi</h3>
              <p className="card-desc">Seleziona almeno un mercato primario. Puoi aggiungere fino a 8 mercati secondari.</p>
            </div>
            <div className="input-group has-leading" style={{width:220}}>
              <span className="leading"><IconSearch size={14}/></span>
              <input className="input" style={{height:36, fontSize:13}} placeholder="Cerca paese…"/>
            </div>
          </div>
        </div>
        <div className="card-pad">
          <div className="country-grid">
            {countries.map(c => (
              <div key={c.code} className={'country' + (c.selected ? ' selected' : '')}>
                <Flag code={c.code}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, color:'#0A0A0B', fontWeight: c.selected ? 500 : 400}}>{c.name}</div>
                  <div style={{fontSize:11.5, color:'#8A8A93'}}>{c.lang}</div>
                </div>
                {c.primary && <span className="chip brand" style={{height:20, fontSize:10.5, padding:'0 8px'}}>Primario</span>}
                {c.selected && !c.primary && <IconCheck size={14} stroke={3} style={{color:'#0A0A0B'}}/>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Wizard>
  );
}

// ─── Step 07: Personas (NEW) ─────────────────────────────────
const PERSONAS = [
  { name:'Default Persona', peso:2.0, cat:'Default', focus:'Persona senza pregiudizi che cerca info di base', lente:'Capire cosa fa l\'azienda, ruoli, informazioni generali', livello:'Basso', tono:'Neutro semplice', stile:'Informale', selected:true, rec:true },
  { name:'Giornalista generalista nazionale', peso:10.0, cat:'Media', focus:'Capire fatti chiave e contesto nazionale', lente:'Giornalista non esperto del settore', livello:'Medio', tono:'Narrativo diretto', stile:'—', selected:true },
  { name:'Giornalista ambientale nazionale', peso:10.0, cat:'Media', focus:'Verificare responsabilità trasparenza tempi dati', lente:'Reporter investigativo ambientale', livello:'Alto', tono:'Critico investigativo', stile:'—', selected:true },
  { name:'Analista di settore', peso:4.0, cat:'Esperti & Stakeholder', focus:'Capire governance, performance, rischi ESG', lente:'Analista che studia rischi e performance', livello:'Medio-alto', tono:'Analitico', stile:'—', selected:true },
  { name:'Responsabile ESG / Sustainability', peso:8.0, cat:'Esperti & Stakeholder', focus:'Comprendere impatti, dati ambientali, trasparenza', lente:'Figura che valuta impatto ambientale e sociale', livello:'Medio', tono:'Strategico', stile:'—', selected:true },
  { name:'Tecnico ambientale non territoriale', peso:5.0, cat:'Esperti & Stakeholder', focus:'Capire processi tecnici, tecnologie, compliance', lente:'Ingegnere o esperto ambientale esterno', livello:'Medio-alto', tono:'Tecnico', stile:'—' },
  { name:'Cliente B2B / Committente tecnico', peso:3.0, cat:'Esperti & Stakeholder', focus:'Capire competenza tecnica, tempi, affidabilità', lente:'PA o azienda che affida progetti', livello:'Medio', tono:'Pragmatico', stile:'—' },
  { name:'Cittadino locale neutro', peso:2.0, cat:'Comunità locale', focus:'Comprendere attività sul territorio', lente:'Residente senza preoccupazioni dirette', livello:'Basso', tono:'Colloquiale', stile:'—' },
  { name:'Cittadino locale preoccupato', peso:4.0, cat:'Comunità locale', focus:'Verità su rischi, responsabilità, stato bonifiche', lente:'Residente con ansia per salute e ambiente', livello:'Medio', tono:'Emotivo', stile:'—', selected:true },
  { name:'Operatore sanitario locale', peso:3.0, cat:'Comunità locale', focus:'Capire se ci sono rischi per salute pubblica', lente:'Professionista sanitario locale', livello:'Medio', tono:'Cauto tecnico', stile:'—' },
  { name:'Attivista / associazione territoriale', peso:5.0, cat:'Attivismo & Opposizione', focus:'Contestare, verificare, rivendicare dati', lente:'Attivista ambientale', livello:'Alto', tono:'Polemico documentato', stile:'—', selected:true },
  { name:'Comitato civico', peso:7.0, cat:'Attivismo & Opposizione', focus:'Catena responsabilità, salute, dati pubblici', lente:'Gruppo organizzato di cittadini', livello:'Alto', tono:'Collettivo diretto', stile:'—' },
  { name:'Oppositore strutturale', peso:8.0, cat:'Attivismo & Opposizione', focus:'Attribuire responsabilità, narrative accusatorie', lente:'Attore critico che cerca elementi di colpa', livello:'Alto', tono:'Accusatorio', stile:'—' },
  { name:'Pubblico Ministero', peso:7.0, cat:'Istituzioni & Controllo', focus:'Ricostruire fatti, atti, catena responsabilità', lente:'Magistrato che valuta possibili illeciti', livello:'Alto', tono:'Formale investigativo', stile:'—', selected:true },
  { name:'Ente di controllo ambientale', peso:8.0, cat:'Istituzioni & Controllo', focus:'Verificare compliance, dati monitoraggio, rischi', lente:'Autorità di vigilanza ambientale', livello:'Molto alto', tono:'Tecnico formale', stile:'—', selected:true },
  { name:'Amministratore pubblico locale', peso:6.0, cat:'Istituzioni & Controllo', focus:'Chiarire ruoli, competenze, vincoli, criticità', lente:'Dirigente di ente locale', livello:'Medio-alto', tono:'Istituzionale pragmatico', stile:'—' },
];

const CAT_COLORS = {
  'Default': '#6B7280',
  'Media': '#1D4ED8',
  'Esperti & Stakeholder': '#0E7490',
  'Comunità locale': '#15803D',
  'Attivismo & Opposizione': '#B91C1C',
  'Istituzioni & Controllo': '#6D28D9',
};

function Step07Personas({ nav = {} } = {}) {
  const selected = PERSONAS.filter(p=>p.selected);
  const totalWeight = selected.reduce((s,p)=>s+p.peso, 0);

  return (
    <Wizard {...nav} step={6} done={[1,2,3,4,5]} title="Nuovo progetto · Personas">

      <div style={{marginBottom:24}}>
        <h2 className="section-title">Chi interroga le AI?</h2>
        <p className="section-desc">
          Le personas sono i punti di vista da cui Dicto pone le domande ai modelli AI. Ogni persona ha un focus, una lente interpretativa e un peso — il peso determina quante volte quella prospettiva viene usata nelle rilevazioni.
        </p>
      </div>

      <div className="banner brand" style={{marginBottom:16}}>
        <IconSparkles size={16} className="ic"/>
        <div>
          <strong>Dicto AI ha selezionato {selected.length} personas</strong> coerenti con il settore e la tipologia di analisi (Brand · FMCG). Modifica selezione e pesi, oppure carica il tuo set personalizzato.
        </div>
      </div>

      <div className="hstack" style={{justifyContent:'space-between', marginBottom:12, gap:12}}>
        <div className="hstack" style={{gap:8}}>
          <div className="input-group has-leading" style={{width:240}}>
            <span className="leading"><IconSearch size={14}/></span>
            <input className="input" style={{height:36, fontSize:13}} placeholder="Cerca persona…"/>
          </div>
          <button className="btn ghost sm">Categoria <IconChevDown size={12}/></button>
        </div>
        <div className="hstack" style={{gap:8}}>
          <button className="btn secondary sm"><IconPlus size={12}/> Crea persona</button>
          <button className="btn secondary sm">Importa CSV</button>
        </div>
      </div>

      {/* Weight bar */}
      <div className="card" style={{padding:'14px 18px', marginBottom:16, display:'flex', flexDirection:'column', gap:10}}>
        <div className="hstack" style={{justifyContent:'space-between'}}>
          <div style={{fontSize:12.5, fontWeight:600, color:'#0A0A0B'}}>Distribuzione pesi · {totalWeight.toFixed(1)}% / 100%</div>
          <div style={{fontSize:11.5, color:'#8A8A93'}}>Le percentuali devono sommare a 100. Il sistema può ribilanciare proporzionalmente.</div>
        </div>
        <div style={{height:8, borderRadius:4, background:'#F2F2F5', display:'flex', overflow:'hidden'}}>
          {selected.map((p,i) => (
            <div key={i} style={{width: (p.peso/totalWeight*100) + '%', background: CAT_COLORS[p.cat] || '#999'}} title={`${p.name} · ${p.peso}%`}/>
          ))}
        </div>
        <div className="hstack" style={{gap:14, flexWrap:'wrap'}}>
          {[...new Set(selected.map(p=>p.cat))].map(cat => (
            <div key={cat} className="hstack" style={{gap:6, fontSize:11.5, color:'#4A4A52'}}>
              <span style={{width:8, height:8, borderRadius:2, background: CAT_COLORS[cat]}}/> {cat}
            </div>
          ))}
        </div>
      </div>

      {/* Personas list */}
      <div style={{display:'grid', gap:8}}>
        {PERSONAS.map((p,i) => {
          const cc = CAT_COLORS[p.cat] || '#666';
          return (
            <div key={i} style={{
              display:'grid',
              gridTemplateColumns:'24px 1fr 90px 110px 24px',
              gap:14, padding:'14px 16px',
              border:'1.5px solid ' + (p.selected ? '#0A0A0B' : '#EBEBEF'),
              borderRadius:10, background:'#fff',
              boxShadow: p.selected ? '0 0 0 3px rgba(10,10,11,0.05)' : 'none',
              alignItems:'center'
            }}>
              <div style={{width:20, height:20, borderRadius:'50%',
                border:'1.5px solid ' + (p.selected ? '#0A0A0B' : '#DDDDE2'),
                background: p.selected ? '#0A0A0B' : 'transparent',
                color: p.selected ? '#fff' : 'transparent',
                display:'grid', placeItems:'center'}}>
                <IconCheck size={11} stroke={3}/>
              </div>
              <div style={{minWidth:0}}>
                <div className="hstack" style={{gap:8, marginBottom:4}}>
                  <span style={{fontSize:13.5, fontWeight:600, color:'#0A0A0B'}}>{p.name}</span>
                  <span style={{fontSize:10.5, fontWeight:600, padding:'2px 7px', borderRadius:4, color:cc, background:cc + '15'}}>{p.cat}</span>
                  {p.rec && <span className="chip brand" style={{height:18, fontSize:10}}>Sempre inclusa</span>}
                </div>
                <div style={{fontSize:12, color:'#4A4A52', lineHeight:1.5, marginBottom:3}}>
                  <strong style={{color:'#1F1F23', fontWeight:500}}>Focus:</strong> {p.focus}
                </div>
                <div style={{fontSize:12, color:'#4A4A52', lineHeight:1.5}}>
                  <strong style={{color:'#1F1F23', fontWeight:500}}>Lente:</strong> {p.lente}
                </div>
                <div className="hstack" style={{gap:6, marginTop:8, flexWrap:'wrap'}}>
                  <span className="chip" style={{height:20, fontSize:10.5, padding:'0 7px'}}>Livello: {p.livello}</span>
                  <span className="chip" style={{height:20, fontSize:10.5, padding:'0 7px'}}>Tono: {p.tono}</span>
                  {p.stile !== '—' && <span className="chip" style={{height:20, fontSize:10.5, padding:'0 7px'}}>Stile: {p.stile}</span>}
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:18, fontWeight:600, color:'#0A0A0B', fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em'}}>{p.peso.toFixed(1)}%</div>
                <div style={{fontSize:10.5, color:'#8A8A93', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>peso</div>
              </div>
              <div>
                <div style={{height:6, borderRadius:3, background:'#F2F2F5', overflow:'hidden'}}>
                  <div style={{width: Math.min(100,p.peso*5) + '%', height:'100%', background:cc}}/>
                </div>
                <div style={{fontSize:10, color:'#8A8A93', marginTop:4, textAlign:'right'}}>peso relativo</div>
              </div>
              <button className="btn ghost sm" style={{padding:'0 6px', height:28, color:'#8A8A93'}}><IconSettings size={14}/></button>
            </div>
          );
        })}
      </div>
    </Wizard>
  );
}

// ─── Step 08: Riepilogo (Brand / Personal / Topic) ──────────
function Step08Summary({ tipologia = 'brand', nav = {} }) {
  // ─── Stima costi token ───
  // 4 provider attivi · 20 domande × 4 = 80 query/ciclo · ~1.4k token medi/query
  const tokenCalc = {
    queriesPerCycle: 80,
    cyclesPerMonth: 4,
    avgTokensIn: 850,
    avgTokensOut: 1400,
    providers: [
      { name:'OpenAI GPT-5',         queries:20, inK:0.85, outK:1.40, priceIn:1.25,  priceOut:10.00, color:'#10A37F' },
      { name:'Google Gemini 2.5',    queries:20, inK:0.85, outK:1.40, priceIn:0.075, priceOut:0.30,  color:'#4285F4' },
      { name:'Claude Haiku 4.5',     queries:20, inK:0.85, outK:1.40, priceIn:1.00,  priceOut:5.00,  color:'#D97757' },
      { name:'Perplexity Sonar',     queries:20, inK:0.85, outK:1.40, priceIn:1.00,  priceOut:1.00,  color:'#20808D' },
    ],
  };
  const provRows = tokenCalc.providers.map(p => {
    const inTok  = p.queries * p.inK  * tokenCalc.cyclesPerMonth; // K tokens/month
    const outTok = p.queries * p.outK * tokenCalc.cyclesPerMonth;
    const cost = (inTok * p.priceIn + outTok * p.priceOut) / 1000; // priceIn/Out are per 1M, tokens in K → /1000
    return { ...p, inTok, outTok, cost };
  });
  const totalIn  = provRows.reduce((s,p)=>s+p.inTok, 0);
  const totalOut = provRows.reduce((s,p)=>s+p.outTok, 0);
  const totalCost = provRows.reduce((s,p)=>s+p.cost, 0);
  const fmtMoney = (n) => '€ ' + n.toFixed(2).replace('.', ',');
  const fmtTok = (k) => k >= 1000 ? (k/1000).toFixed(2).replace('.', ',') + 'M' : k.toFixed(1).replace('.', ',') + 'K';

  const isPersonal = tipologia === 'personal';
  const isTopic = tipologia === 'topic';

  const headerVal = {
    brand: { icon:<IconBuilding size={18}/>, color:'#8B2B1A', name:'Nutella', label:'Ferrero S.p.A. · Brand', proj:'Monitoraggio Nutella' },
    personal: { icon:<IconUser size={18}/>, color:'#0B6B3A', name:'Carlo Messina', label:'Intesa Sanpaolo · CEO', proj:'Reputazione Carlo Messina' },
    topic: { icon:<IconHash size={18}/>, color:'#6D28D9', name:'Cibi ultra processati', label:'Industria dolciaria · Topic', proj:'Monitoraggio cibi ultra processati' },
  }[tipologia];

  const compLabel = isPersonal ? 'Peer di confronto' : isTopic ? 'Topic affini' : 'Competitor diretti';
  const compVal = isPersonal
    ? <>3 peer <span className="muted">· Andrea Orcel (UniCredit), Philippe Donnet (Generali), Luigi Lovaglio (MPS)</span></>
    : isTopic
    ? <>2 topic affini <span className="muted">· Nutri-Score & etichettatura, Zuccheri aggiunti e tassazione</span></>
    : <>4 brand <span className="muted">· Pan di Stelle Crema, Novi Crema, Nocciolata Rigoni, Hershey's Chocolate Spread</span></>;

  const objectLabel = isPersonal ? 'Persona' : isTopic ? 'Argomento' : 'Brand';
  const objectVal = isPersonal
    ? <>Carlo Messina <span className="muted">· Banking · CEO Intesa Sanpaolo · 4 alias</span></>
    : isTopic
    ? <>Cibi ultra processati <span className="muted">· Industria dolciaria · 0 alias</span></>
    : <>Nutella <span className="muted">· FMCG / Creme spalmabili · 4 alias</span></>;

  const rows = [
    { lbl:'Nome progetto', val: headerVal.proj, step:1 },
    { lbl:'Tipologia', val: tipologia === 'brand' ? 'Brand' : tipologia === 'personal' ? 'Personal' : 'Topic', step:1 },
    { lbl:objectLabel, val:objectVal, step:2 },
    { lbl:'Knowledge base', val:<>6 fonti caricate <span className="muted">· 18.4 MB · 4 indicizzate, 2 in elaborazione</span></>, step:3 },
    { lbl:compLabel, val:compVal, step:4 },
    { lbl:'Provider AI', val:<>4 modelli <span className="muted">· OpenAI GPT-5, Gemini 2.5, Claude Haiku 4.5, Perplexity Sonar</span></>, step:5 },
    { lbl:'Cadenza', val:<>Settimanale · lunedì 09:00 CET <span className="muted">· 20 domande × 4 provider = 80 query / ciclo</span></>, step:5 },
    { lbl:'Personas', val:<>9 personas attive <span className="muted">· peso 100% · Default Persona inclusa · 5 categorie</span></>, step:6 },
  ];

  return (
    <Wizard {...nav} step={7} done={[1,2,3,4,5,6]} title={`Nuovo progetto · Riepilogo${isPersonal ? ' (Personal)' : isTopic ? ' (Topic)' : ''}`} nextLabel="Avvia progetto"
      preview={null}>

      <div style={{marginBottom:24, maxWidth:880}}>
        <h2 className="section-title">Rivedi e avvia</h2>
        <p className="section-desc">
          Controlla la configurazione. Una volta avviato, Dicto inizia a raccogliere risposte dai modelli AI — il primo report sarà disponibile in poche ore.
        </p>
      </div>

      {/* Hero card per oggetto */}
      <div className="card" style={{padding:20, marginBottom:16, display:'flex', gap:16, alignItems:'center'}}>
        <div style={{width:52, height:52, borderRadius:12, background:headerVal.color, color:'#fff', display:'grid', placeItems:'center'}}>
          {headerVal.icon}
        </div>
        <div style={{flex:1}}>
          <div style={{fontSize:11, fontWeight:600, color:'#8A8A93', textTransform:'uppercase', letterSpacing:'0.06em'}}>{headerVal.label}</div>
          <div style={{fontSize:22, fontWeight:600, color:'#0A0A0B', letterSpacing:'-0.015em', marginTop:2}}>{headerVal.name}</div>
        </div>
        <div className="hstack" style={{gap:8}}>
          <span className="chip green" style={{height:26}}><IconCheck size={12} stroke={3}/> Pronto</span>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="hstack" style={{justifyContent:'space-between'}}>
            <h3 className="card-title">Configurazione progetto</h3>
            <button className="btn ghost sm">Esporta JSON</button>
          </div>
        </div>
        <div style={{padding:'4px 24px 8px'}}>
          {rows.map((r,i) => (
            <div className="summary-row" key={i}>
              <div className="label">{r.lbl}</div>
              <div className="val">{r.val}</div>
              <button className="edit">Modifica</button>
            </div>
          ))}
        </div>
      </div>

      <div className="grid-2" style={{marginTop:16}}>
        <div className="card" style={{padding:18, display:'flex', gap:12, alignItems:'flex-start'}}>
          <div style={{width:36, height:36, borderRadius:8, background:'#E6F7EC', color:'#16A34A', display:'grid', placeItems:'center', flex:'0 0 36px'}}><IconCheck size={18} stroke={2.5}/></div>
          <div>
            <div style={{fontSize:13, fontWeight:600, color:'#0A0A0B', marginBottom:4}}>Tutti i requisiti soddisfatti</div>
            <div style={{fontSize:12.5, color:'#4A4A52', lineHeight:1.55}}>Oggetto confermato, almeno un mercato primario, almeno un provider attivo, personas con peso 100%.</div>
          </div>
        </div>
        <div className="card" style={{padding:18, display:'flex', gap:12, alignItems:'flex-start'}}>
          <div style={{width:36, height:36, borderRadius:8, background:'#F1EBFF', color:'#6D28D9', display:'grid', placeItems:'center', flex:'0 0 36px'}}><IconSparkles size={18}/></div>
          <div>
            <div style={{fontSize:13, fontWeight:600, color:'#0A0A0B', marginBottom:4}}>Suggerimenti opzionali</div>
            <div style={{fontSize:12.5, color:'#4A4A52', lineHeight:1.55}}>
              Aggiungi Stati Uniti per confrontare narrativa IT vs. globale. <a style={{color:'#3B4AF5'}}>Aggiungi →</a>
            </div>
          </div>
        </div>
      </div>

      <div className="banner brand" style={{marginTop:16}}>
        <IconLock size={16} className="ic"/>
        <div>
          <strong>Privacy.</strong> Le fonti che hai caricato restano private. Dicto non le condivide con i provider AI — servono solo per il confronto interno nel tuo workspace.
        </div>
      </div>

      {/* ─── Stima costi token ─── */}
      <div className="card" style={{marginTop:16}}>
        <div className="card-head">
          <div className="hstack" style={{justifyContent:'space-between', alignItems:'flex-start'}}>
            <div>
              <h3 className="card-title">Stima consumi e costi token</h3>
              <p className="card-desc">Calcolo basato su 20 domande × 4 provider × 4 cicli/mese · ~850 token in / ~1.400 token out per query.</p>
            </div>
            <span className="chip" style={{height:24, background:'#F0F4FF', color:'#3B4AF5', fontWeight:600}}>Mensile</span>
          </div>
        </div>
        <div style={{padding:'4px 24px 0'}}>
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 0.9fr 0.9fr 0.7fr', gap:16, padding:'10px 0', fontSize:11, fontWeight:600, color:'#8A8A93', textTransform:'uppercase', letterSpacing:'0.05em', borderBottom:'1px solid #EDEEF1'}}>
            <div>Provider · modello</div>
            <div style={{textAlign:'right'}}>Token input</div>
            <div style={{textAlign:'right'}}>Token output</div>
            <div style={{textAlign:'right'}}>Costo / mese</div>
          </div>
          {provRows.map((p,i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'1.4fr 0.9fr 0.9fr 0.7fr', gap:16, padding:'14px 0', fontSize:13, color:'#0A0A0B', borderBottom:'1px solid #F4F5F7', alignItems:'center'}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <span style={{width:8, height:8, borderRadius:'50%', background:p.color, flex:'0 0 8px'}}/>
                <span style={{fontWeight:500}}>{p.name}</span>
              </div>
              <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', color:'#4A4A52'}}>{fmtTok(p.inTok)}</div>
              <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', color:'#4A4A52'}}>{fmtTok(p.outTok)}</div>
              <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:600}}>{fmtMoney(p.cost)}</div>
            </div>
          ))}
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 0.9fr 0.9fr 0.7fr', gap:16, padding:'16px 0 18px', fontSize:13, alignItems:'center'}}>
            <div style={{fontWeight:600, color:'#0A0A0B'}}>Totale stimato</div>
            <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:600, color:'#0A0A0B'}}>{fmtTok(totalIn)}</div>
            <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:600, color:'#0A0A0B'}}>{fmtTok(totalOut)}</div>
            <div style={{textAlign:'right', fontVariantNumeric:'tabular-nums', fontWeight:700, fontSize:16, color:'#0A0A0B'}}>{fmtMoney(totalCost)}</div>
          </div>
        </div>
        <div style={{padding:'14px 24px 18px', borderTop:'1px solid #EDEEF1', background:'#FAFBFC', display:'flex', gap:24, fontSize:12, color:'#4A4A52'}}>
          <div><strong style={{color:'#0A0A0B'}}>320</strong> query/mese</div>
          <div style={{color:'#DDDDE2'}}>·</div>
          <div><strong style={{color:'#0A0A0B'}}>~720K</strong> token totali</div>
          <div style={{color:'#DDDDE2'}}>·</div>
          <div>Costo annuo stimato <strong style={{color:'#0A0A0B'}}>{fmtMoney(totalCost * 12)}</strong></div>
          <div style={{flex:1}}/>
          <a style={{color:'#3B4AF5', fontWeight:500, cursor:'pointer'}}>Dettaglio prezzi →</a>
        </div>
      </div>
    </Wizard>
  );
}

window.DictoSteps58 = { Step05Providers, Step06Geo, Step07Personas, Step08Summary };