// Wizard de bienvenida — primera instalación de Desasf.
// Solo se muestra cuando /api/install/status devuelve needsSetup=true.
function WelcomeWizard() {
  const [empresa, setEmpresa] = React.useState({
    empresa_nombre: '', empresa_ruc: '', empresa_direccion: '',
  });
  const [admin, setAdmin] = React.useState({
    apellidos: '', nombres: '', email: '', username: '', password: '', password2: '',
  });
  const [error, setError]     = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [done, setDone]       = React.useState(false);

  function set(part, k, v) {
    if (part === 'empresa') setEmpresa(prev => ({ ...prev, [k]: v }));
    else                    setAdmin(prev   => ({ ...prev, [k]: v }));
  }

  async function submit(e) {
    if (e?.preventDefault) e.preventDefault();
    setError('');
    if (!empresa.empresa_nombre.trim()) {
      return setError('El nombre de la organización es obligatorio.');
    }
    if (!admin.apellidos.trim() || !admin.nombres.trim()) {
      return setError('Apellidos y nombres son obligatorios.');
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(admin.email)) {
      return setError('Email inválido.');
    }
    if (!/^[a-z0-9._-]{3,40}$/i.test(admin.username)) {
      return setError('Username debe tener 3-40 caracteres alfanuméricos (puntos, guiones, _).');
    }
    if (admin.password.length < 8) {
      return setError('La contraseña debe tener al menos 8 caracteres.');
    }
    if (admin.password !== admin.password2) {
      return setError('Las contraseñas no coinciden.');
    }

    setLoading(true);
    try {
      const res = await fetch('/api/install/bootstrap', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          empresa_nombre:    empresa.empresa_nombre.trim(),
          empresa_ruc:       empresa.empresa_ruc.trim(),
          empresa_direccion: empresa.empresa_direccion.trim(),
          admin: {
            apellidos: admin.apellidos.trim(),
            nombres:   admin.nombres.trim(),
            email:     admin.email.trim().toLowerCase(),
            username:  admin.username.trim().toLowerCase(),
            password:  admin.password,
          },
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Error en la instalación');
      setDone(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  if (done) {
    return (
      <div className="app app--login">
        <div className="login" style={{ gridTemplateColumns: '1fr', maxWidth: 540, margin: '0 auto' }}>
          <div className="login__form" style={{ padding: 48, textAlign: 'center' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 72, height: 72, borderRadius: '50%', background: 'var(--hi-vis)',
              color: 'var(--ink-0)', fontSize: 32, fontWeight: 700, marginBottom: 22 }}>✓</div>
            <h2 style={{ fontFamily: 'var(--cond)', fontSize: 28, fontWeight: 700, margin: '0 0 10px' }}>
              ¡Bienvenido a Desasf!
            </h2>
            <p style={{ color: 'var(--ink-5)', fontSize: 14, margin: '0 0 28px' }}>
              {empresa.empresa_nombre} ya está configurada. Ya puedes iniciar sesión con
              <strong style={{ color: 'var(--ink-1)' }}> {admin.email}</strong>.
            </p>
            <button className="btn btn--accent"
              style={{ width: '100%', height: 44, justifyContent: 'center', fontSize: 14 }}
              onClick={() => { window.location.reload(); }}>
              Ir al login {Icon?.arrow}
            </button>
          </div>
        </div>
      </div>
    );
  }

  const inputStyle = { marginBottom: 12 };
  const sectionTitle = {
    fontFamily: 'var(--cond)', fontSize: 13, fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    color: 'var(--ink-5)', margin: '24px 0 12px',
  };

  return (
    <div className="app app--login">
      <div className="login">
        <div className="login__hero">
          <div className="hex-bg"/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
            <DesasfLogo size={40}/>
            <div>
              <div style={{ fontFamily: 'var(--cond)', fontWeight: 700, fontSize: 18, letterSpacing: '0.02em' }}>DESASF</div>
              <div style={{ fontSize: 11, color: 'var(--ink-6)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Setup inicial</div>
            </div>
          </div>

          <div style={{ position: 'relative', maxWidth: 460 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', background: 'var(--hi-vis)', color: 'var(--ink-0)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 22 }}>
              Bienvenido
            </div>
            <h2 style={{ fontFamily: 'var(--cond)', fontSize: 38, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.01em', margin: '0 0 16px' }}>
              Configura tu organización en menos de un minuto.
            </h2>
            <p style={{ color: 'var(--ink-6)', fontSize: 14, lineHeight: 1.5, margin: 0 }}>
              Solo necesitamos el nombre de tu empresa y los datos del primer administrador.
              Después podrás invitar al resto del equipo desde el panel.
            </p>
            <div style={{ marginTop: 28, padding: '14px 16px', background: 'var(--ink-9)', border: '1px solid var(--line)', borderRadius: 6, fontSize: 12, color: 'var(--ink-5)', lineHeight: 1.55 }}>
              <div style={{ fontWeight: 700, color: 'var(--ink-2)', marginBottom: 4 }}>Importante</div>
              Este wizard solo aparece una vez. La cuenta que crees aquí será la cuenta
              administradora principal — guárdala bien.
            </div>
          </div>

          <div style={{ position: 'relative', fontSize: 11, color: 'var(--ink-6)' }}>
            <span>© 2026 Desasf — software de gestión multi-cliente</span>
          </div>
          <div style={{ position: 'absolute', right: 0, bottom: 0, height: 8, left: 0 }} className="caution-stripe"/>
        </div>

        <div className="login__form">
          <div style={{ maxWidth: 420, width: '100%' }}>
            <h2 style={{ fontFamily: 'var(--cond)', fontSize: 24, fontWeight: 700, margin: '0 0 4px', letterSpacing: '-0.01em' }}>
              Instalación de Desasf
            </h2>
            <p style={{ color: 'var(--ink-5)', margin: '0 0 18px', fontSize: 13 }}>
              Completa los datos para activar el sistema.
            </p>

            <div style={sectionTitle}>1. Tu organización</div>

            <label className="label">Nombre o razón social *</label>
            <input className="input" placeholder="Ej. Mi Empresa S.A.C." value={empresa.empresa_nombre}
              onChange={e => set('empresa', 'empresa_nombre', e.target.value)} style={inputStyle}/>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div>
                <label className="label">RUC / ID fiscal</label>
                <input className="input" placeholder="20XXXXXXXXX" value={empresa.empresa_ruc}
                  onChange={e => set('empresa', 'empresa_ruc', e.target.value)} style={inputStyle}/>
              </div>
              <div>
                <label className="label">Dirección</label>
                <input className="input" placeholder="Ciudad, país" value={empresa.empresa_direccion}
                  onChange={e => set('empresa', 'empresa_direccion', e.target.value)} style={inputStyle}/>
              </div>
            </div>

            <div style={sectionTitle}>2. Tu cuenta de administrador</div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div>
                <label className="label">Apellidos *</label>
                <input className="input" value={admin.apellidos}
                  onChange={e => set('admin', 'apellidos', e.target.value)} style={inputStyle}/>
              </div>
              <div>
                <label className="label">Nombres *</label>
                <input className="input" value={admin.nombres}
                  onChange={e => set('admin', 'nombres', e.target.value)} style={inputStyle}/>
              </div>
            </div>

            <label className="label">Email *</label>
            <input className="input" type="email" placeholder="admin@miempresa.com"
              value={admin.email} onChange={e => set('admin', 'email', e.target.value)} style={inputStyle}/>

            <label className="label">Username *</label>
            <input className="input" placeholder="admin" autoCapitalize="none"
              value={admin.username} onChange={e => set('admin', 'username', e.target.value)} style={inputStyle}/>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div>
                <label className="label">Contraseña *</label>
                <input className="input" type="password" placeholder="Mín. 8 caracteres"
                  value={admin.password} onChange={e => set('admin', 'password', e.target.value)} style={inputStyle}/>
              </div>
              <div>
                <label className="label">Confirmar *</label>
                <input className="input" type="password"
                  value={admin.password2} onChange={e => set('admin', 'password2', e.target.value)} style={inputStyle}/>
              </div>
            </div>

            {error && (
              <div style={{ padding: '10px 14px', background: 'var(--status-danger-bg)',
                color: 'var(--status-danger)', borderRadius: 6, marginBottom: 14, fontSize: 13, marginTop: 6 }}>
                {error}
              </div>
            )}

            <button
              className="btn btn--accent"
              style={{ width: '100%', height: 44, justifyContent: 'center', fontSize: 14, marginTop: 14 }}
              onClick={submit}
              disabled={loading}>
              {loading ? 'Configurando…' : 'Completar instalación'} {Icon?.arrow}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.WelcomeWizard = WelcomeWizard;