// White-label brand onboarding modal — accessible from the Tweaks panel.
// Shows the brand-configuration screen with live preview.

function OnboardingModal({ open, onClose, theme, setTheme }) {
  const [tone, setTone] = React.useState('cercano');
  const [step, setStep] = React.useState(1);
  if (!open) return null;

  const tones = [
    { id: 'formal',   label: 'Formal',   sub: 'Usted, lenguaje cuidado' },
    { id: 'casual',   label: 'Casual',   sub: 'Tú, relajado y directo' },
    { id: 'tecnico',  label: 'Técnico',  sub: 'Términos del sector' },
    { id: 'cercano',  label: 'Cercano',  sub: 'Como un amigo del negocio' },
  ];

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, zIndex: 2147483640,
      background:'rgba(10,18,36,.55)', backdropFilter:'blur(6px)',
      display:'flex', alignItems:'center', justifyContent:'center',
      padding: 24,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        background:'#fff', borderRadius: 22, maxWidth: 1040, width:'100%',
        maxHeight: '90vh', overflow:'auto',
        boxShadow:'0 40px 100px -20px rgba(8,20,40,.5)',
        display:'grid', gridTemplateColumns:'minmax(320px, 440px) 1fr',
      }}>
        {/* Left — form */}
        <div style={{ padding: '32px 32px 28px', borderRight:'1px solid var(--line)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 22 }}>
            <div className="eyebrow"><span className="dot"/>Onboarding · Paso {step}/3</div>
            <button onClick={onClose} style={{ color:'var(--ink-mute)' }}><Icon.x/></button>
          </div>

          <h2 style={{ fontSize: 26, lineHeight:1.15, marginBottom: 8, letterSpacing:'-0.02em' }}>
            Configura la identidad de tu negocio.
          </h2>
          <p className="text-muted" style={{ fontSize: 14, marginBottom: 24 }}>
            En 3 pasos tu plataforma se viste con la marca de tu empresa. Tus clientes nunca verán a AI Company.
          </p>

          {/* Step 1 — Identity */}
          <div style={{ display:'flex', flexDirection:'column', gap: 14, marginBottom: 22 }}>
            <div>
              <label style={{ fontSize:12, fontWeight:600, color:'var(--ink-soft)', display:'block', marginBottom:6 }}>Nombre de la empresa</label>
              <input type="text" value={theme.brandName} onChange={e=>setTheme({ brandName: e.target.value })} placeholder="Mi Tienda" />
            </div>
            <div>
              <label style={{ fontSize:12, fontWeight:600, color:'var(--ink-soft)', display:'block', marginBottom:6 }}>Logo (placeholder)</label>
              <div style={{
                border:'2px dashed var(--line-strong)', borderRadius: 12,
                padding: 16, display:'flex', alignItems:'center', gap: 12,
                background:'var(--bg-subtle)',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10, background: theme.primary, color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontWeight: 800, fontSize: 18, letterSpacing:'-0.02em',
                }}>{(theme.brandName || 'M').slice(0,1).toUpperCase()}</div>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>Arrastra tu logo aquí</div>
                  <div style={{ fontSize: 12, color:'var(--ink-mute)' }}>PNG, SVG · hasta 2 MB</div>
                </div>
                <button className="btn btn-outline" style={{ padding:'6px 12px', fontSize: 12 }}>Subir</button>
              </div>
            </div>

            <div>
              <label style={{ fontSize:12, fontWeight:600, color:'var(--ink-soft)', display:'block', marginBottom:6 }}>Colores de marca</label>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
                {[
                  { k:'primary',   label:'Primario'  },
                  { k:'secondary', label:'Secundario'},
                  { k:'accent',    label:'Acento'    },
                ].map(c => (
                  <div key={c.k} style={{
                    border:'1px solid var(--line)', borderRadius: 10,
                    padding:'8px 10px', display:'flex', alignItems:'center', gap: 8,
                  }}>
                    <label style={{
                      width: 26, height: 26, borderRadius: 6, background: theme[c.k],
                      cursor:'pointer', border:'1px solid rgba(0,0,0,.1)', position:'relative',
                    }}>
                      <input type="color" value={theme[c.k]} onChange={e=>setTheme({ [c.k]: e.target.value })}
                        style={{ position:'absolute', inset:0, opacity:0, cursor:'pointer' }}/>
                    </label>
                    <div>
                      <div style={{ fontSize: 11, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.04em', fontWeight: 600 }}>{c.label}</div>
                      <div className="mono" style={{ fontSize: 11 }}>{theme[c.k].toUpperCase()}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <label style={{ fontSize:12, fontWeight:600, color:'var(--ink-soft)', display:'block', marginBottom:6 }}>Tono de comunicación</label>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
                {tones.map(t => (
                  <button key={t.id} onClick={()=>setTone(t.id)} style={{
                    textAlign:'left', padding:'10px 12px', borderRadius: 10,
                    border: '1px solid ' + (tone === t.id ? 'var(--brand-primary)' : 'var(--line)'),
                    background: tone === t.id ? 'color-mix(in oklab, var(--brand-primary), white 92%)' : '#fff',
                  }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{t.label}</div>
                    <div style={{ fontSize: 11, color:'var(--ink-mute)' }}>{t.sub}</div>
                  </button>
                ))}
              </div>
            </div>
          </div>

          <div style={{ display:'flex', gap: 10, marginTop: 4 }}>
            <button className="btn btn-outline" onClick={onClose} style={{ flex:1, justifyContent:'center' }}>Cancelar</button>
            <button className="btn btn-primary" style={{ flex:2, justifyContent:'center' }}>
              Continuar a vista previa <Icon.arrow/>
            </button>
          </div>
        </div>

        {/* Right — live preview */}
        <div style={{
          background:'var(--bg-subtle)', padding: 28,
          display:'flex', flexDirection:'column', gap: 16, minWidth: 0,
        }}>
          <div style={{ fontSize: 12, fontWeight: 600, color:'var(--ink-mute)', textTransform:'uppercase', letterSpacing:'.06em' }}>
            Vista previa en tiempo real
          </div>

          {/* Mini-header preview */}
          <div style={{
            background:'#fff', borderRadius: 14, border:'1px solid var(--line)',
            padding:'12px 16px', display:'flex', alignItems:'center', gap: 12,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8, background: theme.primary, color:'#fff',
              display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800,
            }}>{(theme.brandName || 'M').slice(0,1).toUpperCase()}</div>
            <span style={{ fontWeight: 700, color:'#0F172A' }}>{theme.brandName || 'Mi Tienda'}</span>
            <span style={{ marginLeft:'auto', fontSize: 12, color:'var(--ink-mute)' }}>panel</span>
            <button style={{
              padding:'6px 12px', borderRadius: 8, background: theme.accent,
              color:'#fff', fontSize: 12, fontWeight: 600,
            }}>Nuevo pedido</button>
          </div>

          {/* Dashboard preview */}
          <div style={{
            background:'#fff', borderRadius: 14, border:'1px solid var(--line)',
            padding: 16, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10,
          }}>
            {[
              { k:'Ventas hoy',   v:'$3,248', tone:'good' },
              { k:'Pedidos',      v:'42',     tone:'good' },
              { k:'CSAT',         v:'4.9',    tone:'good' },
              { k:'Stock bajo',   v:'3',      tone:'warn' },
            ].map(s => (
              <div key={s.k} style={{
                border:'1px solid var(--line)', borderRadius: 10, padding:'10px 12px',
              }}>
                <div style={{ fontSize: 11, color:'var(--ink-mute)' }}>{s.k}</div>
                <div style={{ fontSize: 20, fontWeight: 700, color: s.tone === 'warn' ? '#E0A800' : theme.primary, marginTop: 2 }}>{s.v}</div>
              </div>
            ))}
          </div>

          {/* Chat preview using theme colors */}
          <div style={{
            background:'#fff', borderRadius: 14, border:'1px solid var(--line)',
            padding: 14, fontSize: 12.5, color:'#1F2937',
          }}>
            <div style={{
              display:'flex', alignItems:'center', gap: 8, marginBottom: 10,
              paddingBottom: 8, borderBottom:'1px solid var(--line)',
            }}>
              <span className="pulse-dot"/>
              <span style={{ fontWeight: 600 }}># general — {theme.brandName || 'Mi Tienda'}</span>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
              <div style={{ display:'flex', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: 999, background: theme.primary, color:'#fff', fontSize: 10, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center' }}>D</div>
                <div><b style={{ color:'#0F172A' }}>Director</b> · Bienvenido. He configurado tu equipo inicial.</div>
              </div>
              <div style={{ display:'flex', gap: 8 }}>
                <div style={{ width: 22, height: 22, borderRadius: 999, background: theme.secondary, color:'#fff', fontSize: 10, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center' }}>M</div>
                <div><b style={{ color:'#0F172A' }}>Marketing</b> · Listo el primer post — espera tu aprobación.</div>
              </div>
            </div>
          </div>

          <div style={{ fontSize: 11.5, color:'var(--ink-mute)', textAlign:'center', marginTop:'auto' }}>
            Tu equipo, tu marca. Tus clientes nunca verán a AI Company.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingModal });