/* global React, SFIcons */
const RM = window.MADECIDesignSystem_419fb1;
const { Check: RCheck, Shield: RShield, FileText: RFile, ChevronLeft: RBack, Info: RInfo } = SFIcons;

function Field({ label, required, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, letterSpacing: '.02em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}{required && <span style={{ color: 'var(--madeci-red)' }}> *</span>}</span>
      {children}
    </label>
  );
}
const inputStyle = { height: 46, padding: '0 14px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: '#fff', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)', outline: 'none', width: '100%', boxSizing: 'border-box' };
function TextField({ label, required, placeholder, value, onChange, type = 'text' }) {
  return <Field label={label} required={required}><input type={type} value={value} onChange={onChange} placeholder={placeholder} style={inputStyle} onFocus={(e) => e.target.style.borderColor = 'var(--madeci-red)'} onBlur={(e) => e.target.style.borderColor = 'var(--border-default)'} /></Field>;
}
function SelectField({ label, required, value, onChange, options }) {
  return <Field label={label} required={required}><select value={value} onChange={onChange} style={{ ...inputStyle, appearance: 'none', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23606a75\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'m6 9 6 6 6-6\'/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center' }}>{options.map((o) => <option key={o}>{o}</option>)}</select></Field>;
}
function SectionTitle({ n, title, sub }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
      <span style={{ width: 28, height: 28, flex: 'none', borderRadius: 999, background: 'var(--madeci-red)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-data)', fontWeight: 700, fontSize: 14 }}>{n}</span>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--text-strong)' }}>{title}</div>
        {sub && <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{sub}</div>}
      </div>
    </div>
  );
}

const COMUNAS = ['San Antonio', 'Santo Domingo', 'Cartagena', 'El Tabo', 'El Quisco', 'Algarrobo', 'Casablanca', 'Melipilla'];
const REGIONES = ['Región de Valparaíso (V)', 'Región Metropolitana (RM)', 'Región del Libertador B. O\'Higgins (VI)'];
const GIROS = ['Minimarket / Almacén', 'Botillería', 'Restaurante', 'Bar / Pub', 'Hotel', 'Supermercado', 'Comercio mayorista', 'Otro'];

function RegisterDone({ onHome }) {
  return (
    <div className="sf-shell" style={{ maxWidth: 620, margin: '0 auto', padding: '72px 24px 90px', textAlign: 'center' }}>
      <div style={{ width: 76, height: 76, borderRadius: 999, background: 'var(--status-success-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px' }}>
        <RCheck size={40} stroke="var(--status-success)" strokeWidth={2.4} />
      </div>
      <h1 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-.02em' }}>Solicitud recibida</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, color: 'var(--text-muted)', marginTop: 12, lineHeight: 1.55 }}>
        Gracias por registrarte. Un ejecutivo comercial <strong style={{ color: 'var(--text-strong)' }}>validará tus datos y te contactará</strong> para solicitar la documentación que acredite el giro comercial de tu negocio (e-RUT o inicio de actividades).
      </p>
      <div style={{ textAlign: 'left', maxWidth: 460, margin: '22px auto 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {[['Validamos tu información', 'Un ejecutivo revisa la solicitud y te contacta.'], ['Acreditas el giro comercial', 'Nos envías tu e-RUT o inicio de actividades.'], ['Recibes tu invitación', 'Al aprobar, te llega un correo con un enlace para crear tu contraseña y activar tu cuenta.']].map(([t, d], i) => (
          <div key={t} style={{ display: 'flex', gap: 11 }}>
            <span style={{ width: 24, height: 24, flex: 'none', borderRadius: 999, border: '1.5px solid var(--madeci-red)', color: 'var(--madeci-red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-data)', fontWeight: 700, fontSize: 12.5 }}>{i + 1}</span>
            <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, color: 'var(--text-strong)' }}>{t}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)' }}>{d}</div></div>
          </div>
        ))}
      </div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 22, padding: '10px 16px', background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-body)' }}>
        <RShield size={16} stroke="var(--madeci-red)" /> Tiempo de respuesta estimado: 24 h hábiles
      </div>
      <div style={{ marginTop: 30 }}><RM.Button size="lg" onClick={onHome}>Volver al inicio</RM.Button></div>
    </div>
  );
}

function RegisterView({ onSubmit, onBack, onHome }) {
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({ rut: '', razon: '', giro: GIROS[0], tel: '', mail: '', region: REGIONES[0], comuna: 'Cartagena', ciudad: '', dir: '', num: '', contacto: '', cargo: '', acepta: false });
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  if (sent) return <RegisterDone onHome={onHome} />;

  return (
    <div className="sf-shell" style={{ maxWidth: 1120, margin: '0 auto', padding: '28px 24px 90px' }}>
      <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--text-muted)', padding: 0, marginBottom: 16 }}><RBack size={16} /> Volver</button>
      <h1 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-.02em' }}>Registro de cliente comercial</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-muted)', marginTop: 6, maxWidth: 620 }}>Completa los datos de tu negocio. Un ejecutivo validará la información y solicitará la documentación que acredite el giro comercial.</p>

      <div className="sf-register-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 28, alignItems: 'start', marginTop: 26 }}>
        <RM.Card padding="lg">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>

            <div>
              <SectionTitle n="1" title="Información de la empresa" sub="Datos comerciales del negocio" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                <div style={{ gridColumn: '1 / -1' }}><TextField label="RUT de la empresa" required placeholder="Ej. 76.451.220-8" value={f.rut} onChange={set('rut')} /></div>
                <div style={{ gridColumn: '1 / -1' }}><TextField label="Razón social" required placeholder="Nombre legal del negocio" value={f.razon} onChange={set('razon')} /></div>
                <SelectField label="Giro comercial" required value={f.giro} onChange={set('giro')} options={GIROS} />
                <TextField label="Teléfono" required placeholder="+56 9 ..." value={f.tel} onChange={set('tel')} />
                <div style={{ gridColumn: '1 / -1' }}><TextField label="Correo electrónico" required type="email" placeholder="contacto@tunegocio.cl" value={f.mail} onChange={set('mail')} /></div>
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 24 }}>
              <SectionTitle n="2" title="Ubicación del local" sub="Dirección de despacho" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                <SelectField label="Región" required value={f.region} onChange={set('region')} options={REGIONES} />
                <SelectField label="Comuna" required value={f.comuna} onChange={set('comuna')} options={COMUNAS} />
                <div style={{ gridColumn: '1 / -1' }}><TextField label="Ciudad / localidad" placeholder="Ciudad" value={f.ciudad} onChange={set('ciudad')} /></div>
                <TextField label="Dirección" required placeholder="Calle / avenida" value={f.dir} onChange={set('dir')} />
                <TextField label="Número" required placeholder="N°" value={f.num} onChange={set('num')} />
              </div>
            </div>

            <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 24 }}>
              <SectionTitle n="3" title="Contacto y documentación" sub="Quién gestiona la cuenta" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                <TextField label="Nombre del contacto" required placeholder="Nombre y apellido" value={f.contacto} onChange={set('contacto')} />
                <TextField label="Cargo" placeholder="Ej. Dueño, Administrador" value={f.cargo} onChange={set('cargo')} />
              </div>
              <div style={{ marginTop: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, letterSpacing: '.02em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Documento que acredita giro (opcional)</span>
                <label style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8, padding: '16px 18px', border: '1.5px dashed var(--border-strong)', borderRadius: 'var(--radius-sm)', background: 'var(--neutral-50)', cursor: 'pointer' }}>
                  <span style={{ width: 40, height: 40, flex: 'none', borderRadius: 'var(--radius-sm)', background: 'var(--madeci-red-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><RFile size={20} stroke="var(--madeci-red)" /></span>
                  <span>
                    <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: 'var(--text-strong)' }}>Adjunta tu e-RUT o inicio de actividades</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-muted)' }}>PDF o imagen · también puedes enviarlo cuando te contacte el ejecutivo</span>
                  </span>
                  <input type="file" style={{ display: 'none' }} />
                </label>
              </div>
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 18, cursor: 'pointer' }}>
                <input type="checkbox" checked={f.acepta} onChange={(e) => setF((s) => ({ ...s, acepta: e.target.checked }))} style={{ width: 18, height: 18, marginTop: 1, accentColor: 'var(--madeci-red)' }} />
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>Declaro que los datos son correctos y autorizo a MADECI a validar la información. Venta exclusiva a negocios con giro comercial · mayores de 18 años.</span>
              </label>
            </div>

            <RM.Button block size="lg" disabled={!f.acepta} onClick={() => { setSent(true); onSubmit && onSubmit(f); window.scrollTo(0, 0); }}>Enviar solicitud</RM.Button>
          </div>
        </RM.Card>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 96 }}>
          <RM.Card padding="lg">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}><RInfo size={18} stroke="var(--madeci-red)" /><h3 style={{ fontSize: 17, fontWeight: 700 }}>¿Cómo sigue el proceso?</h3></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[['Envías tu solicitud', 'Con los datos de tu negocio.'], ['Validamos la información', 'Un ejecutivo revisa y te contacta.'], ['Acreditas el giro', 'Nos envías tu e-RUT o inicio de actividades.'], ['Activamos tu cuenta', 'Precios mayoristas y despacho habilitados.']].map(([t, d], i) => (
                <div key={t} style={{ display: 'flex', gap: 11 }}>
                  <span style={{ width: 24, height: 24, flex: 'none', borderRadius: 999, border: '1.5px solid var(--madeci-red)', color: 'var(--madeci-red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-data)', fontWeight: 700, fontSize: 12.5 }}>{i + 1}</span>
                  <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--text-strong)' }}>{t}</div><div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{d}</div></div>
                </div>
              ))}
            </div>
          </RM.Card>
          <RM.CommWidget title="¿Necesitas ayuda?" subtitle="Escríbenos y te guiamos en tu registro." />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RegisterView });