/* global React, DictoIcons */
// Shell.jsx — Shared chrome for the Dicto BO wizard
// Sidebar, topbar, stepper, footer nav, preview rail

const {
  IconBack, IconChevDown, IconChevRight, IconCheck,
  IconPanel, IconSparkles,
  IconChart, IconUsers, IconBook, IconLayers, IconTimeline,
  IconTag, IconSignal, IconSpark, IconCrown, IconBolt, IconEye,
  IconHash, IconBuilding, IconUser,
} = window.DictoIcons;

// Dicto logo mark (white on brand-red square, like screenshot)
const DictoMark = ({ size = 28 }) => (
  <svg width={size*0.6} height={size*0.6} viewBox="0 0 24 24" fill="none">
    <path d="M6 5h7a6 7 0 010 14H6V5z" fill="#fff"/>
    <circle cx="16" cy="12" r="1.8" fill="#E94E1B"/>
  </svg>
);

const WIZ_STEPS_BASE = [
  { n: 1, lbl: 'Header' },
  { n: 2, lbl: 'Progetto' },
  { n: 3, lbl: 'Knowledge base' },
  { n: 4, lbl: 'Competitor' },
  { n: 5, lbl: 'Provider AI' },
  { n: 6, lbl: 'Personas' },
  { n: 7, lbl: 'Riepilogo' },
];

const WIZ_STEPS = WIZ_STEPS_BASE; // legacy export kept

function getWizSteps(tipologia) {
  const step4Lbl = tipologia === 'personal' ? 'Peer'
    : tipologia === 'topic' ? 'Topic affini'
    : 'Competitor';
  return WIZ_STEPS_BASE.map(s => s.n === 4 ? { ...s, lbl: step4Lbl } : s);
}

// Tipology palette — keep in sync with Step01 tile theme + .tipo-pill
const TIPO_COLORS = {
  brand:    { primary:'#DC2626', dark:'#991B1B', soft:'#FEE2E2', logo:'#DC2626' },
  personal: { primary:'#059669', dark:'#065F46', soft:'#D1FAE5', logo:'#059669' },
  topic:    { primary:'#7C3AED', dark:'#5B21B6', soft:'#EDE9FE', logo:'#7C3AED' },
};

function Sidebar({ strategist = false, tipologia = 'brand' }) {
  const colors = TIPO_COLORS[tipologia] || TIPO_COLORS.brand;
  const items1 = [
    { ic: <IconChart/>,    lbl: 'Panoramica' },
    { ic: <IconSparkles/>, lbl: 'Risposte AI', disabled: true },
    { ic: <IconUsers/>,    lbl: 'Personas', disabled: true },
    { ic: <IconBook/>,     lbl: 'Fonti', disabled: true },
    { ic: <IconLayers/>,   lbl: 'Providers', disabled: true },
    { ic: <IconCheck/>,    lbl: 'Affermazioni AI', disabled: true },
    { ic: <IconTimeline/>, lbl: 'Timeline', disabled: true },
  ];
  const items2 = [
    { ic: <IconTag/>,    lbl: 'Temi', disabled: true },
    { ic: <IconSignal/>, lbl: 'Segnali Emergenti', disabled: true },
    { ic: <IconSpark/>,  lbl: 'Pattern Narrativi', disabled: true },
    { ic: <IconCrown/>,  lbl: 'Archetipo', disabled: true },
    { ic: <IconBolt/>,   lbl: 'Dimensioni', disabled: true },
    { ic: <IconEye/>,    lbl: 'DictoScore', disabled: true },
  ];
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-logo" style={{background: colors.primary, boxShadow: `0 1px 0 rgba(255,255,255,0.25) inset, 0 1px 3px ${colors.primary}40`}}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
            <path d="M6 5h7a6 7 0 010 14H6V5z" fill="#fff"/>
            <circle cx="16" cy="12" r="1.8" fill={colors.dark}/>
          </svg>
        </div>
        <div className="sb-brand-name">Dicto AI</div>
        <div className="sb-brand-tag">BO</div>
        <div className="sb-brand-icons">
          <IconPanel/>
        </div>
      </div>
      <div className="sb-back">
        <IconBack size={14}/> {strategist ? 'Torna ai clienti' : 'Torna ad azienda'}
      </div>
      <div style={{padding:'6px 0 4px'}}>
        <div className="sb-item active">
          <IconSparkles/> Nuovo progetto (analisi)
        </div>
      </div>
      <div className="sb-group">DATI <IconChevDown size={11}/></div>
      {items1.map((it,i) => (
        <div key={i} className={'sb-item ' + (it.disabled ? 'disabled' : '')}>
          {it.ic} {it.lbl}
        </div>
      ))}
      <div className="sb-group">ANALISI <IconChevDown size={11}/></div>
      {items2.map((it,i) => (
        <div key={i} className={'sb-item ' + (it.disabled ? 'disabled' : '')}>
          {it.ic} {it.lbl}
        </div>
      ))}
    </aside>
  );
}

function Topbar({ title = 'Nuovo progetto', crumb = 'Progetti' }) {
  return (
    <div className="topbar">
      <div className="tb-title">
        <span className="crumb">{crumb} ›</span>
        <h1>{title}</h1>
      </div>
      <div className="tb-spacer"/>
      <div className="tb-draft"><span className="dot"/> Bozza salvata</div>
      <div className="tb-avatar">MC</div>
    </div>
  );
}

function Stepper({ active = 1, done = [], tipologia = 'brand' }) {
  const steps = getWizSteps(tipologia);
  const colors = TIPO_COLORS[tipologia] || TIPO_COLORS.brand;
  return (
    <div className="stepper">
      {steps.map((s, i) => {
        const isDone = done.includes(s.n);
        const isActive = s.n === active;
        const cls = 'step ' + (isActive ? 'active' : isDone ? 'done' : '');
        // Active uses tipology color; done uses tipology dark; pending stays gray
        const numStyle = isActive
          ? { background: colors.primary, color:'#fff', borderColor: colors.primary, boxShadow: `0 0 0 4px ${colors.soft}` }
          : isDone
          ? { background: colors.dark, color:'#fff', borderColor: colors.dark }
          : null;
        const lblStyle = isActive ? { color: colors.dark } : null;
        const connectorBg = isDone ? colors.dark : '#DDDDE2';
        return (
          <React.Fragment key={s.n}>
            <div className={cls}>
              <div className="num" style={numStyle}>{isDone ? <IconCheck size={12} stroke={3}/> : String(s.n).padStart(2,'0')}</div>
              <div className="lbl" style={lblStyle}>{s.lbl}</div>
            </div>
            {i < steps.length - 1 && <div className={'connector ' + (isDone ? 'done-line' : '')} style={{flex:1, height:1.5, background: connectorBg, minWidth:12, margin:'0 4px'}}/>}
          </React.Fragment>
        );
      })}
    </div>
  );
}

function FooterNav({ active = 1, canNext = true, nextLabel = 'Continua', onBack, onNext, onExit }) {
  return (
    <div className="footer-nav">
      <div className="footer-status">
        <span className="kbd">{active}</span> / 8 · <span>Tutte le modifiche salvate</span>
      </div>
      <div className="hstack" style={{gap:10}}>
        <button className="btn ghost" onClick={onExit}>Salva ed esci</button>
        {active > 1 && <button className="btn secondary" onClick={onBack}>← Indietro</button>}
        <button className={'btn ' + (canNext ? 'primary' : 'secondary')} disabled={!canNext} onClick={onNext}>
          {nextLabel} {nextLabel === 'Continua' && <IconChevRight size={14}/>}
        </button>
      </div>
    </div>
  );
}

// Preview rail — the live running summary
function Preview({ rows = [] }) {
  return (
    <div className="preview">
      <div className="preview-head">
        <div className="t">Riepilogo progetto</div>
        <IconEye size={14} style={{color:'#8A8A93'}}/>
      </div>
      <div className="preview-body">
        {rows.map((r, i) => (
          <div className="pv-row" key={i}>
            <div className="k">{r.k}</div>
            <div className={'v ' + (!r.v ? 'empty' : '')}>{r.v || <span style={{color:'#B8B8BF'}}>—</span>}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Wizard frame — composition used by every artboard
function Wizard({ step, done = [], title, crumb, canNext = true, nextLabel, children, preview, strategist = false, onBack, onNext, onExit, tipologia = 'brand' }) {
  return (
    <div className="dicto app-frame">
      <Sidebar strategist={strategist} tipologia={tipologia}/>
      <div className="main">
        <Topbar title={title} crumb={crumb}/>
        <Stepper active={step} done={done} tipologia={tipologia}/>
        <div className="body" data-scroll style={preview ? null : {gridTemplateColumns:'1fr'}}>
          <div className="body-scroll" data-scroll>{children}</div>
          {preview && <div>{preview}</div>}
        </div>
        <FooterNav active={step} canNext={canNext} nextLabel={nextLabel} onBack={onBack} onNext={onNext} onExit={onExit}/>
      </div>
    </div>
  );
}

window.DictoShell = { Sidebar, Topbar, Stepper, FooterNav, Preview, Wizard, WIZ_STEPS, TIPO_COLORS };