// A7 — Onboarding wizard (6-step). Resumable.
const A7Wizard = () => {
  const [step, setStep] = React.useState(1);
  const [branding, setBranding] = React.useState({ primary: '#8b1a1a', logo: null });
  const [auth, setAuth] = React.useState({ entra: true, google: false, magic: true });
  const [industry, setIndustry] = React.useState('beredskab');
  const [emails, setEmails] = React.useState(['morten.hoejgaard@horsens.dk', 'louise.berg@horsens.dk']);
  const [newEmail, setNewEmail] = React.useState('');

  const steps = [
    { n: 1, t: 'Velkommen', k: 'velkommen' },
    { n: 2, t: 'Gør det til jeres', k: 'branding' },
    { n: 3, t: 'Vælg login-metode', k: 'auth' },
    { n: 4, t: 'Hvilke kategorier har I?', k: 'kategorier' },
    { n: 5, t: 'Inviter holdet', k: 'inviter' },
    { n: 6, t: 'Upload første dokument', k: 'upload' },
  ];

  const industries = {
    beredskab: ['Brandsikring', 'Kemi & datablade', 'Sikkerhed & ATEX', 'Evakuering', 'Drift & vagt', 'HR & overenskomst'],
    kommune: ['Sagsbehandling', 'Persondata', 'Udbud', 'HR', 'Byplan', 'Social & sundhed'],
    advokat: ['Sagsakter', 'Retspraksis', 'Kontrakter', 'Bekendtgørelser', 'Klient-korrespondance'],
    hr: ['Overenskomst', 'Personale-håndbog', 'Onboarding', 'Politikker', 'Arbejdsmiljø'],
  };

  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', background: 'var(--bg-0)' }}>
      {/* Left — step indicator */}
      <aside style={{ width: 300, background: 'var(--bg-1)', borderRight: '1px solid var(--line-soft)', padding: '28px 24px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
          <CMMark/>
          <span style={{ fontWeight: 600, color: 'var(--fg-0)', letterSpacing: '-0.01em' }}>CoreMind Vault</span>
        </div>
        <div className="label" style={{ marginBottom: 16 }}>Opsætning · 1 / 5 gemt</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
          {steps.map(s => {
            const done = s.n < step;
            const cur = s.n === step;
            return (
              <button key={s.n} onClick={() => s.n <= step && setStep(s.n)} disabled={s.n > step}
                style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 10px', borderRadius: 8, background: cur ? 'var(--bg-2)' : 'transparent', cursor: s.n <= step ? 'pointer' : 'default', opacity: s.n > step ? 0.5 : 1 }}>
                <div style={{
                  width: 26, height: 26, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: done ? 'var(--mode-green)' : cur ? 'var(--primary)' : 'var(--bg-2)',
                  border: `1px solid ${done ? 'var(--mode-green)' : cur ? 'var(--primary)' : 'var(--line)'}`,
                  color: done || cur ? 'oklch(0.15 0.02 255)' : 'var(--fg-3)',
                  fontSize: 11, fontWeight: 600, flexShrink: 0,
                }}>
                  {done ? <I name="check" className="icon-sm"/> : s.n}
                </div>
                <div style={{ textAlign: 'left', minWidth: 0 }}>
                  <div style={{ fontSize: 12, color: cur ? 'var(--fg-0)' : 'var(--fg-2)', fontWeight: cur ? 600 : 500 }}>{s.t}</div>
                  {cur && <div style={{ fontSize: 10, color: 'var(--primary-strong)', marginTop: 1 }}>Aktiv</div>}
                </div>
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: 20, padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 8, fontSize: 12 }}>
          <div style={{ color: 'var(--fg-0)', fontWeight: 500, marginBottom: 4 }}>Næsten der — kun {6 - step} trin tilbage</div>
          <div style={{ color: 'var(--fg-3)' }}>Du kan altid vende tilbage senere. Dit arbejde gemmes.</div>
        </div>
      </aside>

      {/* Right — content */}
      <main style={{ flex: 1, overflow: 'auto', padding: '40px 56px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, maxWidth: 680, width: '100%', margin: '0 auto' }}>
          <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 8 }}>Trin {step} af 6</div>
          <h1 style={{ fontSize: 32, letterSpacing: '-0.02em', marginBottom: 8 }}>
            {step === 1 && 'Velkommen til Demo Beredskab'}
            {step === 2 && 'Gør det til jeres'}
            {step === 3 && 'Vælg login-metode'}
            {step === 4 && 'Hvilke kategorier har I?'}
            {step === 5 && 'Inviter holdet'}
            {step === 6 && 'Upload jeres første dokument'}
          </h1>
          <p style={{ fontSize: 14, color: 'var(--fg-2)', marginBottom: 32 }}>
            {step === 1 && 'Vi guider dig gennem 6 korte trin. Det tager under 10 minutter og du er klar til at spørge.'}
            {step === 2 && 'Upload jeres logo og vælg en primary-farve. Det bruges overalt i appen.'}
            {step === 3 && 'Slå login-providers til for jeres organisation. Aktivér flere hvis du er i tvivl.'}
            {step === 4 && 'Start med en industri-skabelon — du kan redigere, slette og tilføje bagefter.'}
            {step === 5 && 'Inviter op til 10 kolleger nu. Resten kan du tilføje senere.'}
            {step === 6 && 'Træk et dokument ind og se ingest-processen live. Derefter er I klar til at spørge.'}
          </p>

          {/* Step 1 */}
          {step === 1 && (
            <div>
              <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 20 }}>
                <div style={{ aspectRatio: '16 / 9', background: 'linear-gradient(135deg, oklch(0.22 0.04 255), oklch(0.18 0.02 255))', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  <button style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--primary)', color: 'var(--primary-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 24px color-mix(in oklch, var(--primary) 40%, transparent)' }}>
                    <I name="play" size={24}/>
                  </button>
                  <span className="chip" style={{ position: 'absolute', bottom: 16, left: 16 }}>30 sekunder</span>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[['Dokumenter', '0 uploaded'], ['Brugere', '1 (dig)'], ['AI-budget', '3.000 kr/md']].map(([k, v]) => (
                  <div key={k} style={{ background: 'var(--bg-1)', border: '1px solid var(--line-soft)', padding: 14, borderRadius: 8 }}>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', marginBottom: 4 }}>{k}</div>
                    <div style={{ fontSize: 14, color: 'var(--fg-0)', fontWeight: 500 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Step 2 — Branding */}
          {step === 2 && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 260px', gap: 32 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div>
                  <label className="label" style={{ display: 'block', marginBottom: 8 }}>Logo</label>
                  <div style={{ border: '2px dashed var(--line)', padding: 20, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 14 }}>
                    <ShieldMark size={48}/>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, color: 'var(--fg-0)', fontWeight: 500 }}>hb-skjold-placeholder.svg</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>SVG · 4 KB · anbefalet 256 × 256</div>
                    </div>
                    <button className="btn btn-ghost btn-sm">Udskift</button>
                  </div>
                </div>
                <div>
                  <label className="label" style={{ display: 'block', marginBottom: 8 }}>Primary-farve</label>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <input type="color" value={branding.primary} onChange={e => setBranding({...branding, primary: e.target.value})} style={{ width: 48, height: 40, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg-2)', cursor: 'pointer' }}/>
                    <div className="input mono" style={{ flex: 1 }}>
                      <input value={branding.primary.toUpperCase()} onChange={e => setBranding({...branding, primary: e.target.value})}/>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                    {['#8b1a1a', '#1a4d8b', '#1a6b3a', '#6b1a5a', '#8b5a1a'].map(c => (
                      <button key={c} onClick={() => setBranding({...branding, primary: c})} style={{ width: 26, height: 26, borderRadius: 6, background: c, border: branding.primary === c ? '2px solid var(--fg-0)' : '1px solid var(--line)' }}/>
                    ))}
                  </div>
                </div>
              </div>

              <div>
                <label className="label" style={{ display: 'block', marginBottom: 8 }}>Preview</label>
                <div className="card" style={{ padding: 14, background: 'var(--bg-0)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, paddingBottom: 10, borderBottom: '1px solid var(--line-soft)' }}>
                    <ShieldMark size={22}/>
                    <span style={{ fontSize: 11, fontWeight: 600 }}>Demo Beredskab</span>
                  </div>
                  <div style={{ background: branding.primary, color: 'white', padding: '8px 10px', borderRadius: '8px 8px 2px 8px', fontSize: 11, fontWeight: 500, textAlign: 'right', marginBottom: 8 }}>Hvad er vagt-protokol?</div>
                  <div style={{ background: 'var(--bg-2)', padding: 8, borderRadius: '8px 8px 8px 2px', fontSize: 11, color: 'var(--fg-1)' }}>Følg § 3.1 i vagt-manualen...</div>
                  <button style={{ marginTop: 10, width: '100%', padding: '6px 8px', background: branding.primary, color: 'white', borderRadius: 5, fontSize: 11, fontWeight: 500 }}>Send</button>
                </div>
              </div>
            </div>
          )}

          {/* Step 3 — Auth */}
          {step === 3 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { k: 'entra', t: 'Microsoft Entra ID (SSO)', d: 'Best practice for kommuner og Microsoft 365-tenants', icon: 'users' },
                { k: 'google', t: 'Google Workspace', d: 'Hvis I bruger Google som identity provider', icon: 'users' },
                { k: 'magic', t: 'Magisk link via email', d: 'Fallback. Altid anbefalet at slå til som backup', icon: 'mail' },
              ].map(p => (
                <label key={p.k} className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', borderColor: auth[p.k] ? 'var(--primary)' : 'var(--line-soft)', background: auth[p.k] ? 'color-mix(in oklch, var(--primary) 4%, var(--bg-1))' : 'var(--bg-1)' }}>
                  <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--bg-2)', color: auth[p.k] ? 'var(--primary-strong)' : 'var(--fg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <I name={p.icon} className="icon-lg"/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, color: 'var(--fg-0)', fontWeight: 500 }}>{p.t}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 2 }}>{p.d}</div>
                  </div>
                  <input type="checkbox" checked={auth[p.k]} onChange={e => setAuth({...auth, [p.k]: e.target.checked})} style={{ accentColor: 'var(--primary)', width: 18, height: 18 }}/>
                </label>
              ))}
              {auth.entra && (
                <div style={{ padding: 14, background: 'color-mix(in oklch, var(--mode-blue) 8%, transparent)', border: '1px solid color-mix(in oklch, var(--mode-blue) 30%, transparent)', borderRadius: 8, fontSize: 12, display: 'flex', gap: 10 }}>
                  <I name="info" className="icon-sm" style={{ color: 'var(--mode-blue)', marginTop: 2 }}/>
                  <div>
                    <div style={{ color: 'var(--fg-0)', fontWeight: 500, marginBottom: 4 }}>Entra ID kræver app-registration</div>
                    <div style={{ color: 'var(--fg-2)', marginBottom: 8 }}>Gå til portal.azure.com → App registrations → New → kom tilbage med tenant_id.</div>
                    <button className="btn btn-soft btn-sm"><I name="external" className="icon-sm"/> Åbn Azure-guide</button>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Step 4 — Kategorier */}
          {step === 4 && (
            <div>
              <div style={{ display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap' }}>
                {[['beredskab', 'Beredskab'], ['kommune', 'Kommune'], ['advokat', 'Advokat'], ['hr', 'HR']].map(([k, l]) => (
                  <button key={k} onClick={() => setIndustry(k)} className={`btn btn-sm ${industry === k ? 'btn-primary' : 'btn-soft'}`}>{l}</button>
                ))}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                {industries[industry].map(c => (
                  <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: 'var(--bg-1)', border: '1px solid var(--line-soft)', borderRadius: 8 }}>
                    <I name="folder" className="icon-sm" style={{ color: 'var(--fg-2)' }}/>
                    <span style={{ fontSize: 13, color: 'var(--fg-0)', flex: 1 }}>{c}</span>
                    <button style={{ color: 'var(--fg-3)', padding: 4 }}><I name="close" className="icon-sm"/></button>
                  </div>
                ))}
                <button className="btn btn-ghost btn-sm" style={{ borderStyle: 'dashed', height: 42 }}><I name="plus" className="icon-sm"/> Tilføj kategori</button>
              </div>
            </div>
          )}

          {/* Step 5 — Invitér */}
          {step === 5 && (
            <div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, padding: 10, background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 8, marginBottom: 12 }}>
                {emails.map(e => (
                  <span key={e} className="chip" style={{ paddingRight: 4, gap: 4 }}>
                    {e}
                    <span className="mono" style={{ color: 'var(--fg-3)', fontSize: 10 }}>medarbejder</span>
                    <button onClick={() => setEmails(emails.filter(x => x !== e))} style={{ color: 'var(--fg-3)', padding: 2 }}><I name="close" className="icon-sm"/></button>
                  </span>
                ))}
                <input value={newEmail} onChange={e => setNewEmail(e.target.value)} onKeyDown={e => {
                  if (e.key === 'Enter' && newEmail) { setEmails([...emails, newEmail]); setNewEmail(''); }
                }} placeholder="Tilføj email · tryk Enter" style={{ flex: 1, minWidth: 200, background: 'none', border: 'none', outline: 'none', color: 'var(--fg-0)', fontSize: 13, padding: '4px 6px' }}/>
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 16 }}>{emails.length} / 10 invitationer · hver bruger får et magisk link</div>

              <div className="card" style={{ padding: 16 }}>
                <div className="label" style={{ marginBottom: 10 }}>Preview af invitations-email</div>
                <div style={{ background: 'var(--bg-0)', border: '1px solid var(--line-soft)', borderRadius: 8, padding: 14, fontSize: 12, color: 'var(--fg-1)' }}>
                  <div style={{ marginBottom: 8 }}><span style={{ color: 'var(--fg-3)' }}>Fra:</span> CoreMind Vault &lt;noreply@coremindx.com&gt;</div>
                  <div style={{ marginBottom: 8 }}><span style={{ color: 'var(--fg-3)' }}>Emne:</span> Du er inviteret til Demo Beredskab</div>
                  <div style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 10, lineHeight: 1.6 }}>
                    <p style={{ marginBottom: 8 }}>Hej,</p>
                    <p style={{ marginBottom: 8 }}>Anders har inviteret dig til <strong>Demo Beredskab</strong> på CoreMind Vault — en AI-assistent til jeres procedurer og dokumenter.</p>
                    <button className="btn btn-primary btn-sm" style={{ pointerEvents: 'none' }}>Log ind</button>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Step 6 — Upload */}
          {step === 6 && (
            <div>
              <div style={{ border: '2px dashed var(--primary)', background: 'color-mix(in oklch, var(--primary) 6%, var(--bg-1))', borderRadius: 12, padding: 32, textAlign: 'center', marginBottom: 16 }}>
                <I name="upload" size={32} style={{ color: 'var(--primary-strong)', marginBottom: 10 }}/>
                <div style={{ fontSize: 15, color: 'var(--fg-0)', fontWeight: 500, marginBottom: 4 }}>Træk jeres første dokument ind</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>PDF, Word, Excel, billeder eller video</div>
              </div>
              <div className="card" style={{ padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                  <I name="filePdf" className="icon-lg"/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, color: 'var(--fg-0)', fontWeight: 500 }}>Brandprocedure-2024.pdf</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>2,4 MB · Brandsikring · Alle medarbejdere</div>
                  </div>
                  <span className="chip blue"><I name="refresh" className="icon-sm" style={{animation:'spin 1s linear infinite'}}/>Genererer embeddings</span>
                </div>
                <div style={{ height: 4, background: 'var(--bg-2)', borderRadius: 2, overflow: 'hidden', marginBottom: 10 }}>
                  <div style={{ width: '72%', height: '100%', background: 'var(--mode-blue)' }}/>
                </div>
                <div style={{ display: 'flex', gap: 4, fontSize: 11, color: 'var(--fg-3)', flexWrap: 'wrap' }}>
                  {['Parser PDF', 'Chunker tekst', 'Genererer embeddings', 'Indekserer', 'Klar'].map((p, i) => (
                    <span key={p} style={{ padding: '2px 8px', borderRadius: 4, background: i < 2 ? 'var(--mode-green-soft)' : i === 2 ? 'var(--mode-blue-soft)' : 'var(--bg-2)', color: i < 2 ? 'var(--mode-green)' : i === 2 ? 'var(--mode-blue)' : 'var(--fg-3)' }}>
                      {i < 2 && <I name="check" className="icon-sm" style={{marginRight:3,verticalAlign:'middle'}}/>} {p}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Nav */}
        <div style={{ maxWidth: 680, width: '100%', margin: '32px auto 0', display: 'flex', alignItems: 'center', gap: 12, paddingTop: 20, borderTop: '1px solid var(--line-soft)' }}>
          <button className="btn btn-ghost btn-sm">Spring over — jeg konfigurerer senere</button>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            {step > 1 && <button className="btn btn-soft" onClick={() => setStep(step - 1)}><I name="chevronLeft" className="icon-sm"/> Tilbage</button>}
            <button className="btn btn-primary" onClick={() => setStep(Math.min(6, step + 1))}>
              {step === 6 ? 'Færdiggør' : 'Næste'} <I name="chevronRight" className="icon-sm"/>
            </button>
          </div>
        </div>
      </main>
      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
    </div>
  );
};
window.A7Wizard = A7Wizard;