/* global React, DictoIcons, DictoShell */
// Steps1-2.jsx — Step 01 Header and Step 02 Progetto (Brand / Personal / Topic)

const {
  IconBuilding, IconUser, IconHash, IconSearch, IconInfo, IconChevDown,
  IconCheck, IconSparkles, IconLink, IconX, IconPlus,
} = window.DictoIcons;
const { Wizard } = window.DictoShell;

// ─── Step 01: Header ─────────────────────────────────────────
function Step01({ tipologia = 'brand', setTipologia = () => {}, strategist = false, nav = {} }) {
  const tipologie = [
    { k:'brand',    ic:<IconBuilding size={20}/>, t:'Brand',    d:'Monitora la reputazione e la narrazione AI di un marchio, azienda o prodotto.', color:'#DC2626', tint:'#FEE2E2' },
    { k:'personal', ic:<IconUser size={20}/>,     t:'Personal', d:'Analizza la presenza e percezione di una persona pubblica, executive o creator.', color:'#059669', tint:'#D1FAE5' },
    { k:'topic',    ic:<IconHash size={20}/>,     t:'Topic',    d:'Segui un tema, una categoria o un mercato e come le AI lo raccontano.',           color:'#7C3AED', tint:'#EDE9FE' },
  ];
  const activeColor = tipologie.find(x => x.k === tipologia) || tipologie[0];

  // Defaults change with tipologia
  const cfg = {
    brand:    { placeholder: 'Es. Monitoraggio Nutella',                   value: 'Monitoraggio Nutella',                   cliente: 'Ferrero S.p.A.',          team: 'Brand Intelligence',  crumb: 'Ferrero S.p.A.' },
    personal: { placeholder: 'Es. Reputazione Carlo Messina',             value: 'Reputazione Carlo Messina',             cliente: 'Intesa Sanpaolo S.p.A.',  team: 'Comms & Reputation',  crumb: 'Intesa Sanpaolo S.p.A.' },
    topic:    { placeholder: 'Es. Monitoraggio cibi ultra processati',    value: 'Monitoraggio cibi ultra processati',    cliente: 'Ferrero S.p.A.',          team: 'Public Affairs',      crumb: 'Ferrero S.p.A.' },
  }[tipologia];

  return (
    <Wizard {...nav} step={1} title="Nuovo progetto (analisi)" crumb={strategist ? `Clienti › ${cfg.crumb}` : cfg.crumb} strategist={strategist}>
      <div style={{marginBottom: 24, maxWidth: 880}}>
        <h2 className="section-title">Iniziamo. Di cosa si tratta?</h2>
        <p className="section-desc">
          Scegli prima la tipologia di analisi: determina quali dati Dicto raccoglie dai modelli AI e come presenta i risultati. Poi dai un nome al progetto e collegalo al cliente.
        </p>
      </div>

      <div className="card" style={{maxWidth: 880}}>
        <div className="card-head">
          <h3 className="card-title">Dettagli progetto</h3>
          <p className="card-desc">Puoi modificare questi campi in qualsiasi momento.</p>
        </div>
        <div className="card-pad" style={{display:'grid', gap:20}}>

          <div className="field">
            <label className="field-label">Tipologia di analisi <span className="req">*</span></label>
            <div className="tiles" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
              {tipologie.map(t => {
                const isSel = tipologia === t.k;
                return (
                  <div key={t.k}
                    className={'tile' + (isSel ? ' selected' : '')}
                    onClick={() => setTipologia(t.k)}
                    style={{
                      flexDirection:'column',
                      alignItems:'flex-start',
                      borderColor: isSel ? t.color : undefined,
                      boxShadow: isSel ? `0 0 0 1px ${t.color} inset, 0 1px 0 ${t.color}10` : undefined,
                      background: isSel ? `linear-gradient(180deg, ${t.tint}55 0%, #fff 60%)` : undefined,
                    }}>
                    <div className="tile-ic" style={{
                      background: isSel ? t.tint : '#F2F2F5',
                      color: isSel ? t.color : '#8A8A93',
                      transition: 'all 0.18s ease',
                    }}>{t.ic}</div>
                    <div className="tile-body">
                      <h4 className="tile-title">{t.t}</h4>
                      <p className="tile-desc">{t.d}</p>
                    </div>
                    <div className="tile-check" style={{background: isSel ? t.color : undefined, borderColor: isSel ? t.color : undefined}}><IconCheck size={11} stroke={3}/></div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="field">
            <label className="field-label">Nome del progetto <span className="req">*</span></label>
            <input className="input" key={tipologia + '-name'} defaultValue={cfg.value} placeholder={cfg.placeholder}/>
            <div className="field-hint">Verrà usato come titolo del report. Massimo 60 caratteri.</div>
          </div>

          <div className="grid-2">
            <div className="field">
              <label className="field-label">
                Cliente
                {strategist && <span className="chip" style={{height:18, fontSize:10, marginLeft:8, padding:'0 7px', background:'#F1EBFF', color:'#6D28D9', borderColor:'transparent'}}>Strategist</span>}
              </label>
              {strategist ? (
                <div className="input-group has-leading has-trailing">
                  <span className="leading" style={{color: activeColor.color}}><IconBuilding size={14}/></span>
                  <input className="input" key={tipologia + '-cl'} defaultValue={cfg.cliente}/>
                  <span className="trailing"><IconChevDown size={14}/></span>
                </div>
              ) : (
                <div className="input" style={{display:'flex', alignItems:'center', gap:10, background:'#F2F2F5', color:'#4A4A52', cursor:'not-allowed'}}>
                  <IconBuilding size={14} style={{color: activeColor.color}}/>
                  {cfg.cliente}
                  <span className="muted" style={{marginLeft:'auto', fontSize:11.5}}>fisso</span>
                </div>
              )}
              {!strategist && <div className="field-hint">L'azienda è fissata al tuo workspace. Solo gli strategist possono cambiarla.</div>}
            </div>
            <div className="field">
              <label className="field-label">Team di riferimento</label>
              <div className="input-group has-trailing">
                <input className="input" key={tipologia + '-team'} defaultValue={cfg.team}/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </Wizard>
  );
}

// ─── Step 02a: Brand ────────────────────────────────────────
function Step02Brand({ nav = {} } = {}) {
  return (
    <Wizard {...nav} step={2} done={[1]} title="Nuovo progetto · Progetto">
      <div style={{marginBottom:24, maxWidth:880}}>
        <h2 className="section-title">Qual è il brand da monitorare?</h2>
        <p className="section-desc">
          Cerca il brand o incolla il sito ufficiale. Dicto precompilerà settore, categoria e alias usando i dati di mercato. Potrai sempre modificarli.
        </p>
      </div>

      <div className="card" style={{maxWidth:880}}>
        <div className="card-pad" style={{display:'grid', gap:20}}>
          <div className="field">
            <label className="field-label">Nome del Brand o azienda · URL <span className="req">*</span></label>
            <div className="input-group has-leading">
              <span className="leading"><IconSearch size={15}/></span>
              <input className="input" defaultValue="Nutella"/>
            </div>
            <div className="suggest">
              <div className="suggest-item" style={{background:'#FAFAFB'}}>
                <div className="suggest-fav" style={{background:'#8B2B1A', color:'#fff'}}>N</div>
                <div style={{flex:1}}>
                  <div className="suggest-name">Nutella</div>
                  <div className="suggest-url">nutella.com · FMCG · Food spread</div>
                </div>
                <span className="chip green" style={{height:22, fontSize:11}}><IconCheck size={10} stroke={3}/> Selezionato</span>
              </div>
            </div>
          </div>

          <div className="grid-2">
            <div className="field">
              <label className="field-label">Settore</label>
              <div className="input-group has-trailing">
                <input className="input" defaultValue="FMCG · Food & Beverage"/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Categoria prodotto</label>
              <div className="input-group has-trailing">
                <input className="input" defaultValue="Creme spalmabili / Confectionery"/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
          </div>

          <div className="field">
            <label className="field-label">Alias e varianti del nome</label>
            <div className="tag-input">
              <span className="chip brand removable">Nutella <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">nutella spread <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">crema alle nocciole <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">ferrero hazelnut <button className="x"><IconX size={10}/></button></span>
              <input placeholder="Aggiungi alias…"/>
            </div>
            <div className="field-hint">Le AI spesso usano varianti o traduzioni. Aggiungile per catturare tutte le menzioni.</div>
          </div>

          <div className="field">
            <label className="field-label">Descrizione breve <span className="muted" style={{fontWeight:400}}>— opzionale, aiuta i modelli a disambiguare</span></label>
            <textarea className="textarea" defaultValue="Crema spalmabile alle nocciole prodotta da Ferrero dal 1964. Leader di categoria nel mercato globale delle creme spalmabili."/>
          </div>

          <div className="banner brand">
            <IconSparkles size={16} className="ic"/>
            <div><strong>Dicto ha riconosciuto Nutella.</strong> Abbiamo precompilato settore, categoria e alias. Verifica e modifica se necessario.</div>
          </div>
        </div>
      </div>
    </Wizard>
  );
}

// ─── Step 02b: Personal ─────────────────────────────────────
function Step02Personal({ nav = {} } = {}) {
  return (
    <Wizard {...nav} step={2} done={[1]} title="Nuovo progetto · Progetto">
      <div style={{marginBottom:24, maxWidth:880}}>
        <h2 className="section-title">Chi è la persona da monitorare?</h2>
        <p className="section-desc">
          Dicto traccia come le AI raccontano executive, politici, creator e professionisti. Inserisci nome, settore e ruolo per ridurre ambiguità con omonimi.
        </p>
      </div>

      <div className="card" style={{maxWidth:880}}>
        <div className="card-pad" style={{display:'grid', gap:20}}>
          <div className="field">
            <label className="field-label">Persona da monitorare <span className="req">*</span></label>
            <div className="input-group has-leading">
              <span className="leading"><IconUser size={14}/></span>
              <input className="input" defaultValue="Carlo Messina"/>
            </div>
          </div>

          <div className="grid-2">
            <div className="field">
              <label className="field-label">Settore <span className="req">*</span></label>
              <div className="input-group has-trailing">
                <input className="input" defaultValue="Banking & Financial Services"/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Ruolo</label>
              <input className="input" defaultValue="Amministratore Delegato — Intesa Sanpaolo S.p.A."/>
            </div>
          </div>

          <div className="field">
            <label className="field-label">Profili pubblici di riferimento <span className="muted" style={{fontWeight:400}}>— aiutano Dicto a confermare l'identità</span></label>
            <div className="vstack">
              <div className="input-group has-leading">
                <span className="leading"><IconLink size={14}/></span>
                <input className="input" defaultValue="https://www.linkedin.com/in/carlo-messina"/>
              </div>
              <div className="input-group has-leading">
                <span className="leading"><IconLink size={14}/></span>
                <input className="input" defaultValue="https://it.wikipedia.org/wiki/Carlo_Messina"/>
              </div>
              <button className="btn ghost sm" style={{alignSelf:'flex-start'}}><IconPlus size={12}/> Aggiungi profilo</button>
            </div>
          </div>

          <div className="field">
            <label className="field-label">Aliases e varianti</label>
            <div className="tag-input">
              <span className="chip brand removable">Carlo Messina <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">C. Messina <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">Messina Intesa <button className="x"><IconX size={10}/></button></span>
              <span className="chip brand removable">CEO Intesa Sanpaolo <button className="x"><IconX size={10}/></button></span>
              <input placeholder="Aggiungi variante…"/>
            </div>
          </div>

          <div className="field">
            <label className="field-label">Descrizione breve <span className="muted" style={{fontWeight:400}}>— opzionale</span></label>
            <textarea className="textarea" defaultValue="CEO di Intesa Sanpaolo dal 2013. Tra i banchieri più influenti d'Europa, ha guidato la crescita del gruppo e l'integrazione di UBI Banca."/>
          </div>

          <div className="banner">
            <IconInfo size={16} className="ic"/>
            <div>
              <strong>Trovati 2 profili pubblici corrispondenti.</strong> Abbiamo selezionato quello di Intesa Sanpaolo. Se monitori una persona diversa, modifica i campi sopra.
            </div>
          </div>
        </div>
      </div>
    </Wizard>
  );
}

// ─── Step 02c: Topic ────────────────────────────────────────
function Step02Topic({ nav = {} } = {}) {
  return (
    <Wizard {...nav} step={2} done={[1]} title="Nuovo progetto · Progetto">
      <div style={{marginBottom:24, maxWidth:880}}>
        <h2 className="section-title">Qual è il tema da seguire?</h2>
        <p className="section-desc">
          Per i topic Dicto si concentra su come le AI descrivono una categoria, un mercato o una tendenza. Definisci tema, settore, categoria e parole chiave.
        </p>
      </div>

      <div className="card" style={{maxWidth:880}}>
        <div className="card-pad" style={{display:'grid', gap:20}}>
          <div className="field">
            <label className="field-label">Argomento da monitorare <span className="req">*</span></label>
            <div className="input-group has-leading">
              <span className="leading"><IconHash size={15}/></span>
              <input className="input" defaultValue="Cibi ultra processati"/>
            </div>
          </div>

          <div className="grid-2">
            <div className="field">
              <label className="field-label">Settore <span className="req">*</span></label>
              <div className="input-group has-trailing">
                <input className="input" defaultValue="Industria dolciaria"/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
            <div className="field">
              <label className="field-label">Categoria</label>
              <div className="input-group has-trailing">
                <input className="input" defaultValue="FMCG · Food & Beverage"/>
                <span className="trailing"><IconChevDown size={14}/></span>
              </div>
            </div>
          </div>

          <div className="field">
            <label className="field-label">Alias e varianti del nome <span className="muted" style={{fontWeight:400}}>— da compilare</span></label>
            <div className="tag-input">
              <input placeholder="Aggiungi alias o variante…"/>
            </div>
            <div className="field-hint">Es. ultra-processed food, UPF, NOVA 4. Aggiungi sigle, traduzioni e termini regolatori usati dalle AI.</div>
          </div>

          <div className="field">
            <label className="field-label">Descrizione breve <span className="muted" style={{fontWeight:400}}>— opzionale</span></label>
            <textarea className="textarea"
              defaultValue="Monitoraggio della narrativa AI sui cibi ultra processati, con riferimento alla proposta della UE sui cibi ultra processati e alle implicazioni per il settore dolciario."/>
          </div>
        </div>
      </div>
    </Wizard>
  );
}

window.DictoSteps12 = { Step01, Step02Brand, Step02Personal, Step02Topic };