// ============================================================
// OnboardingWizard.jsx — Sessione 84 (gap #4 Empty state nuovo tenant)
//
// Wizard mostrato quando il tenant ha 0 progetti.
// Detection: bootstrap.PROJECTS.length === 0
// Step:
//  1. Welcome (introduzione)
//  2. Verifica config base (calendari/categorie/capex/doc_types)
//  3. Crea primo progetto (form minimale)
//  4. Done + redirect a Dashboard
// ============================================================
function OnboardingWizard({ onComplete }) {
  const { user, pushToast, seed } = useStore();
  const [step, setStep] = React.useState(1);

  // Step 2 — fetch config presence
  const [config, setConfig] = React.useState(null);
  const [configLoading, setConfigLoading] = React.useState(true);

  // Step 3 — first project form
  const [proj, setProj] = React.useState({
    code: '',
    name: '',
    site: '',
    category: '',
    capexClass: 'growth',
    budgetEur: 100000,
    startDate: new Date().toISOString().slice(0, 10),
    endDate: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10),
  });
  const [creating, setCreating] = React.useState(false);
  const [createdProjectId, setCreatedProjectId] = React.useState(null);

  React.useEffect(() => {
    if (step !== 2 && step !== 3) return;
    let cancelled = false;
    setConfigLoading(true);
    (async () => {
      try {
        const [cats, cls, dts, cals, sites] = await Promise.all([
          fetch('/api/config/categories', { headers: { 'X-Actor-Persona-Id': user?.id || '' } }).then(r => r.ok ? r.json() : { data: [] }),
          fetch('/api/config/capex-classes', { headers: { 'X-Actor-Persona-Id': user?.id || '' } }).then(r => r.ok ? r.json() : { data: [] }),
          fetch('/api/config/doc-types', { headers: { 'X-Actor-Persona-Id': user?.id || '' } }).then(r => r.ok ? r.json() : { data: [] }),
          fetch('/api/config/calendars', { headers: { 'X-Actor-Persona-Id': user?.id || '' } }).then(r => r.ok ? r.json() : { data: [] }),
          fetch('/api/config/sites', { headers: { 'X-Actor-Persona-Id': user?.id || '' } }).then(r => r.ok ? r.json() : { data: [] }),
        ]);
        if (cancelled) return;
        setConfig({
          categories: cats.data || [],
          capexClasses: cls.data || [],
          docTypes: dts.data || [],
          calendars: cals.data || [],
          sites: sites.data || [],
        });
        // Auto-fill capex + first category/site se presenti
        const firstCat = (cats.data || [])[0]?.code;
        const firstSite = (sites.data || [])[0]?.code;
        // I codici classe CAPEX dal DTO sono UPPERCASE (rowToDto). L'API progetti
        // (createProjectSchema) accetta solo i 9 codici canonici minuscoli: qui si
        // normalizza sempre a lowercase.
        const firstClass = (cls.data || []).find(c => (c.code || '').toLowerCase() === 'growth') || (cls.data || [])[0];
        setProj(prev => ({
          ...prev,
          category: prev.category || firstCat || '',
          site: prev.site || firstSite || '',
          capexClass: prev.capexClass || (firstClass?.code || 'growth').toLowerCase(),
        }));
      } catch (err) {
        if (!cancelled) pushToast({ title: 'Errore fetch config', desc: err?.message || 'fail', tone: 'err' });
      } finally { if (!cancelled) setConfigLoading(false); }
    })();
    return () => { cancelled = true; };
  }, [step, user?.id]);

  const createFirstProject = async () => {
    if (!proj.code || !proj.name || !proj.site || !proj.category || !proj.startDate || !proj.endDate) {
      pushToast({ title: 'Campi obbligatori', desc: 'Compila code, name, site, categoria e le date.', tone: 'err' });
      return;
    }
    setCreating(true);
    try {
      const r = await fetch('/api/projects', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Actor-Persona-Id': user?.id || '' },
        body: JSON.stringify({
          code: proj.code,
          name: proj.name,
          site: proj.site,
          category: proj.category,
          // createProjectSchema vuole `budget`/`start`/`end` e il codice classe
          // CAPEX minuscolo (il DTO lo espone uppercase).
          capexClass: (proj.capexClass || 'growth').toLowerCase(),
          budget: parseInt(proj.budgetEur, 10) || 0,
          start: proj.startDate,
          end: proj.endDate,
          health: 'ok',
          progress: 0,
          phase: 'requisito',
          priority: 'media',
        }),
      });
      const j = await r.json();
      if (!r.ok) {
        pushToast({ title: 'Creazione progetto fallita', desc: j?.error || `HTTP ${r.status}`, tone: 'err' });
        return;
      }
      setCreatedProjectId(j.data.id);
      pushToast({ title: 'Primo progetto creato', desc: `${j.data.code} — ${j.data.name}`, tone: 'ok' });
      setStep(4);
    } catch (err) {
      pushToast({ title: 'Errore di rete', desc: err?.message || 'fetch fallito', tone: 'err' });
    } finally { setCreating(false); }
  };

  // Step indicator
  const StepIndicator = () => (
    <div className="row" style={{ gap: 8, justifyContent: 'center', marginBottom: 30 }}>
      {[1, 2, 3, 4].map(s => (
        <div key={s} style={{
          width: 32, height: 32, borderRadius: '50%',
          background: s === step ? 'var(--accent)' : s < step ? 'var(--ok)' : 'var(--bg-2)',
          color: s <= step ? 'white' : 'var(--text-3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, fontWeight: 600, border: '1px solid var(--line)',
        }} data-testid={`onb-step-${s}`}>{s < step ? '✓' : s}</div>
      ))}
    </div>
  );

  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'var(--bg)', zIndex: 999,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start',
      padding: '40px 20px', overflowY: 'auto',
    }} data-testid="onboarding-wizard-overlay">
      <div style={{ maxWidth: 720, width: '100%' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div className="eyebrow">Onboarding nuovo tenant</div>
          <h1 className="page-title" style={{ fontSize: 32, marginTop: 8 }}>Benvenuto su Veridanto</h1>
          <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 6 }}>
            Industrial Investment Governance · setup guidato in 4 passi
          </div>
        </div>

        <StepIndicator/>

        {/* STEP 1: Welcome */}
        {step === 1 && (
          <div className="card" data-testid="onb-step-content-1">
            <div className="card-body" style={{ padding: 30 }}>
              <h2 style={{ fontSize: 22, marginBottom: 14 }}>Iniziamo</h2>
              <div style={{ fontSize: 13.5, lineHeight: 1.7, color: 'var(--text-1)' }}>
                <p>Sei l'amministratore di un nuovo tenant Veridanto. Prima di iniziare a usare la piattaforma, ti guideremo nella configurazione minima necessaria:</p>
                <ul style={{ paddingLeft: 24, marginTop: 12 }}>
                  <li><b>Step 2 — Verifica setup base</b>: categorie merceologiche, classi CAPEX, tipi documento, calendari e siti. Se non presenti, vengono creati i default Italia (4+6+1+sample).</li>
                  <li><b>Step 3 — Crea il primo progetto CAPEX</b>: form minimale (code, name, site, budget). Dopo potrai aggiungere RdA, milestone, baseline EV.</li>
                  <li><b>Step 4 — Pronto</b>: link diretti a Dashboard, Customizing avanzato (workflow approvazione, checklist rules, SLA), Settings (provider AI, email).</li>
                </ul>
                <p style={{ marginTop: 12, padding: 10, background: 'var(--bg-2)', borderRadius: 6, fontSize: 12, color: 'var(--text-2)' }}>
                  💡 Per onboarding di tenant aggiuntivi, vai in <b>Impostazioni → Onboarding tenant</b> (richiede ruolo SUPERADMIN).
                </p>
              </div>
            </div>
            <div className="row" style={{ padding: 20, justifyContent: 'flex-end', borderTop: '1px solid var(--line)' }}>
              <Btn variant="primary" size="md" onClick={() => setStep(2)} data-testid="onb-step-1-next">
                Iniziamo <Icon name="arrow-right" size={12}/>
              </Btn>
            </div>
          </div>
        )}

        {/* STEP 2: Verifica config */}
        {step === 2 && (
          <div className="card" data-testid="onb-step-content-2">
            <div className="card-body" style={{ padding: 30 }}>
              <h2 style={{ fontSize: 22, marginBottom: 14 }}>Setup base</h2>
              {configLoading ? (
                <div style={{ color: 'var(--text-3)', fontSize: 12 }}>Caricamento configurazione…</div>
              ) : (
                <>
                  <div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 14 }}>
                    Ecco la configurazione attuale del tuo tenant. Tutto modificabile in <b>Customizing</b>.
                  </div>
                  <table className="tbl dense" data-testid="onb-config-table">
                    <thead><tr><th>Entità</th><th className="num">Count</th><th>Stato</th></tr></thead>
                    <tbody>
                      <tr><td>Categorie merceologiche</td><td className="num">{config?.categories?.length || 0}</td><td>{(config?.categories?.length || 0) > 0 ? <Chip kind="ok" dot>ok</Chip> : <Chip kind="warn" dot>vuoto</Chip>}</td></tr>
                      <tr><td>Classi CAPEX</td><td className="num">{config?.capexClasses?.length || 0}</td><td>{(config?.capexClasses?.length || 0) > 0 ? <Chip kind="ok" dot>ok</Chip> : <Chip kind="warn" dot>vuoto</Chip>}</td></tr>
                      <tr><td>Tipi documento</td><td className="num">{config?.docTypes?.length || 0}</td><td>{(config?.docTypes?.length || 0) > 0 ? <Chip kind="ok" dot>ok</Chip> : <Chip kind="warn" dot>vuoto</Chip>}</td></tr>
                      <tr><td>Calendari</td><td className="num">{config?.calendars?.length || 0}</td><td>{(config?.calendars?.length || 0) > 0 ? <Chip kind="ok" dot>ok</Chip> : <Chip kind="warn" dot>vuoto</Chip>}</td></tr>
                      <tr><td>Siti</td><td className="num">{config?.sites?.length || 0}</td><td>{(config?.sites?.length || 0) > 0 ? <Chip kind="ok" dot>ok</Chip> : <Chip kind="warn" dot>vuoto</Chip>}</td></tr>
                    </tbody>
                  </table>
                  {((config?.categories?.length || 0) === 0 || (config?.sites?.length || 0) === 0) && (
                    <div style={{ marginTop: 14, padding: 12, background: 'rgba(220,180,80,0.1)', border: '1px solid var(--warn)', borderRadius: 8, fontSize: 12, color: 'var(--warn)' }}>
                      ⚠️ Mancano categorie e/o siti. Vai in <b>Customizing</b> per crearli, poi torna qui.
                    </div>
                  )}
                </>
              )}
            </div>
            <div className="row" style={{ padding: 20, justifyContent: 'space-between', borderTop: '1px solid var(--line)' }}>
              <Btn variant="ghost" size="md" onClick={() => setStep(1)}>← Indietro</Btn>
              <Btn variant="primary" size="md" onClick={() => setStep(3)} disabled={configLoading || (config?.categories?.length || 0) === 0 || (config?.sites?.length || 0) === 0} data-testid="onb-step-2-next">
                Crea primo progetto <Icon name="arrow-right" size={12}/>
              </Btn>
            </div>
          </div>
        )}

        {/* STEP 3: First project */}
        {step === 3 && (
          <div className="card" data-testid="onb-step-content-3">
            <div className="card-body" style={{ padding: 30 }}>
              <h2 style={{ fontSize: 22, marginBottom: 14 }}>Primo progetto CAPEX</h2>
              <div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 18 }}>
                Crea un progetto demo. Una volta creato vedrai la Dashboard popolata e potrai aggiungere RdA, milestone, baseline EV.
              </div>
              <div className="grid grid-2" style={{ gap: 10 }}>
                <div className="field">
                  <label>Code progetto * (es. P-2026-001)</label>
                  <input value={proj.code} onChange={(e) => setProj({...proj, code: e.target.value.toUpperCase()})} placeholder="P-2026-001" data-testid="onb-proj-code"/>
                </div>
                <div className="field">
                  <label>Nome progetto *</label>
                  <input value={proj.name} onChange={(e) => setProj({...proj, name: e.target.value})} placeholder="Nuova linea produttiva" data-testid="onb-proj-name"/>
                </div>
                <div className="field">
                  <label>Sito *</label>
                  <select value={proj.site} onChange={(e) => setProj({...proj, site: e.target.value})} data-testid="onb-proj-site">
                    <option value="">-- seleziona sito --</option>
                    {(config?.sites || []).map(s => (<option key={s.id} value={s.code}>{s.name} ({s.code})</option>))}
                  </select>
                </div>
                <div className="field">
                  <label>Categoria *</label>
                  <select value={proj.category} onChange={(e) => setProj({...proj, category: e.target.value})} data-testid="onb-proj-category">
                    <option value="">-- seleziona --</option>
                    {(config?.categories || []).map(c => (<option key={c.id} value={c.code || c.name}>{c.name}</option>))}
                  </select>
                </div>
                <div className="field">
                  <label>Classe CAPEX</label>
                  <select value={proj.capexClass} onChange={(e) => setProj({...proj, capexClass: e.target.value})}>
                    {(config?.capexClasses || []).map(c => (<option key={c.id} value={(c.code || '').toLowerCase()}>{c.name}</option>))}
                  </select>
                </div>
                <div className="field">
                  <label>Budget €</label>
                  <input type="number" value={proj.budgetEur} onChange={(e) => setProj({...proj, budgetEur: e.target.value})} data-testid="onb-proj-budget"/>
                </div>
                <div className="field">
                  <label>Start date</label>
                  <input type="date" value={proj.startDate} onChange={(e) => setProj({...proj, startDate: e.target.value})}/>
                </div>
                <div className="field">
                  <label>End date</label>
                  <input type="date" value={proj.endDate} onChange={(e) => setProj({...proj, endDate: e.target.value})}/>
                </div>
              </div>
            </div>
            <div className="row" style={{ padding: 20, justifyContent: 'space-between', borderTop: '1px solid var(--line)' }}>
              <Btn variant="ghost" size="md" onClick={() => setStep(2)}>← Indietro</Btn>
              <Btn variant="primary" size="md" onClick={createFirstProject} disabled={creating} data-testid="onb-create-project">
                {creating ? 'Creazione…' : 'Crea progetto'} <Icon name="check" size={12}/>
              </Btn>
            </div>
          </div>
        )}

        {/* STEP 4: Done */}
        {step === 4 && (
          <div className="card" data-testid="onb-step-content-4">
            <div className="card-body" style={{ padding: 30, textAlign: 'center' }}>
              <div style={{ fontSize: 48, lineHeight: 1 }}>🎉</div>
              <h2 style={{ fontSize: 24, marginTop: 14 }}>Setup completo</h2>
              <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 10 }}>
                Hai creato il tuo primo progetto (<code className="mono">{createdProjectId}</code>). Da ora la Dashboard è popolata e puoi iniziare a usare Veridanto.
              </div>
              <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, textAlign: 'left' }}>
                <div style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 8 }}>
                  <div className="eyebrow">Prossimi step suggeriti</div>
                  <ul style={{ fontSize: 12, marginTop: 6, paddingLeft: 18, lineHeight: 1.7 }}>
                    <li>Configura provider AI (Settings → Provider AI)</li>
                    <li>Configura SMTP per email (Settings → Provider Email)</li>
                    <li>Definisci checklist rule (Customizing → Checklist)</li>
                    <li>Crea workflow approvazione (Customizing → Workflows)</li>
                  </ul>
                </div>
                <div style={{ padding: 14, border: '1px solid var(--line)', borderRadius: 8 }}>
                  <div className="eyebrow">Risorse</div>
                  <ul style={{ fontSize: 12, marginTop: 6, paddingLeft: 18, lineHeight: 1.7 }}>
                    <li>Cliccando su un progetto puoi creare RdA, baseline EV, gestire workflow</li>
                    <li>Reports → pivot config-driven + export XLSX/PPTX + share link</li>
                    <li>Audit log: tracking completo tutte le mutation con hash chain</li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="row" style={{ padding: 20, justifyContent: 'center', borderTop: '1px solid var(--line)' }}>
              <Btn variant="primary" size="md" onClick={onComplete} data-testid="onb-finish">
                Vai alla Dashboard <Icon name="arrow-right" size={12}/>
              </Btn>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
Object.assign(window, { OnboardingWizard });