const { Card, Button, Icon, Badge, Field, Input, Select, Checkbox, RadioGroup, Alert, Dialog } = window.SURASegurosDesignSystem_faeb0e;

function InstagramIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

const EPS_OPTIONS = [
  { value: 'sura', label: 'EPS SURA' },
  { value: 'otra', label: 'Otra EPS del contributivo' },
  { value: 'especial', label: 'Régimen especial' },
  { value: 'subsidiado', label: 'Régimen subsidiado (SISBÉN)' }
];
const EPS_LABELS = { sura: 'EPS SURA', otra: 'Otra EPS del contributivo', especial: 'Régimen especial', subsidiado: 'Régimen subsidiado (SISBÉN)' };

// Reglas de afiliación por edad y tipo de EPS, según las condiciones de aseguramiento vigentes.
function sugerirPlanes(edadStr, eps) {
  const edad = Number(edadStr);
  if (!edad || edad <= 0) return null;
  if (eps === 'subsidiado') return { planes: [], subsidiado: true };
  const sura = eps === 'sura';
  if (edad > 79) return { planes: ['plus'], unico: true };
  if (edad >= 65) return sura ? { planes: ['sesenta', 'plus'] } : { planes: ['plus'], unico: true };
  if (edad >= 60) return sura ? { planes: ['sesenta', 'modular', 'plus'] } : { planes: ['modular', 'plus'] };
  return sura ? { planes: ['preferencial', 'modular', 'plus'] } : { planes: ['modular', 'plus'] };
}

function mensajeSugerencia(rec, D) {
  if (!rec) return 'Cuéntanos tu edad en el paso 1 para mostrarte los planes disponibles para ti.';
  if (rec.subsidiado) return 'Estando en régimen subsidiado no es posible afiliarse a planes voluntarios de salud: solo aplican para régimen contributivo (cotizante, beneficiario o pensionado).';
  const nombres = rec.planes.map((id) => D.planes.find((p) => p.id === id).nombre);
  if (rec.unico) return `Según tu edad, tu única opción de aseguramiento es ${nombres[0]}.`;
  return `Según tu edad y tu EPS, puedes afiliarte a: ${nombres.join(', ')}.`;
}

const MODULAR_ORDEN = [
  { id: 'domiciliaria', label: 'Atención Domiciliaria' },
  { id: 'maternidad', label: 'Maternidad' },
  { id: 'alto-costo', label: 'Alto Costo' },
  { id: 'cirugia', label: 'Cirugía Ambulatoria' }
];

function Cotizar({ go, planId }) {
  const D = window.SURA_DATA;
  const [paso, setPaso] = React.useState(1);
  const [form, setForm] = React.useState({ nombre: '', edad: '', eps: 'sura', plan: planId || 'modular', dato: '', datos: false });
  const [modulosModular, setModulosModular] = React.useState(['basico']);
  const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v && v.target ? v.target.value : v }));
  const toggleModulo = (id) => {
    setModulosModular((prev) => {
      if (id === 'basico') return ['basico'];
      const sinBasico = prev.filter((x) => x !== 'basico');
      return sinBasico.includes(id) ? sinBasico.filter((x) => x !== id) : [...sinBasico, id];
    });
  };
  const listo = form.nombre.trim().length > 2 && form.datos;
  const rec = sugerirPlanes(form.edad, form.eps);

  const irAPaso2 = () => {
    if (rec && !rec.subsidiado && rec.planes.length && !rec.planes.includes(form.plan)) {
      setForm((f) => ({ ...f, plan: rec.planes[0] }));
    }
    setPaso(2);
  };

  const enviarSolicitud = () => {
    const planElegido = D.planes.find((p) => p.id === form.plan);
    const epsLabel = EPS_LABELS[form.eps];
    const modulosLabel = form.plan === 'modular'
      ? (modulosModular.includes('basico') ? 'Solo Básico' : modulosModular.map((id) => MODULAR_ORDEN.find((m) => m.id === id).label).join(', '))
      : null;
    const lineas = [
      `Hola Mariangel, soy ${form.nombre} y quiero cotizar un plan de salud SURA.`,
      form.edad ? `Edad del afiliado principal: ${form.edad} años.` : null,
      `EPS actual: ${epsLabel}.`,
      rec && rec.subsidiado ? 'Sé que el régimen subsidiado no puede afiliarse a planes voluntarios de salud, pero quisiera que me orientes.' : planElegido ? `Plan de interés: ${planElegido.familia} · ${planElegido.nombre}.` : null,
      modulosLabel ? `Módulos que me interesan: ${modulosLabel}.` : null,
      form.dato ? `Mi WhatsApp: ${form.dato}.` : null
    ].filter(Boolean);
    const mensaje = encodeURIComponent(lineas.join('\n'));
    window.open(`https://wa.me/${D.asesora.telefonoRaw}?text=${mensaje}`, '_blank', 'noopener');
    setPaso(4);
  };

  return (
    <div>
      <Section tone="blanco" style={{ paddingBottom: 'var(--space-12)' }}>
        <div className="r-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <div>
            <h1>Cotización sin costo</h1>
            <p className="sura-lead" style={{ marginTop: 'var(--space-4)', color: 'var(--gris-700)', maxWidth: '42ch' }}>
              Coloca tus datos para poder iniciar nuestra conversación por WhatsApp.
            </p>
          </div>
          <img src={ILU + 'viajero-aeropuerto.png'} alt="" style={{ width: '62%', margin: '0 auto' }} />
        </div>
      </Section>

      <Section style={{ paddingTop: 'var(--space-10)' }}>
        <div className="r-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-12)', alignItems: 'start' }}>
          <Card padding="var(--space-8)" elevation="md">
            <div style={{ display: 'flex', gap: 'var(--space-2)', marginBottom: 'var(--space-8)' }}>
              {[1, 2, 3].map((n) => (
                <span key={n} style={{ flex: 1, height: 5, borderRadius: 'var(--radius-pill)', background: n <= paso ? 'var(--azul-sura)' : 'var(--gris-200)', transition: 'background var(--dur-base) var(--ease-standard)' }} />
              ))}
            </div>

            {paso === 1 ? (
              <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
                <h3>1. Tus datos</h3>
                <Field label="Nombre y apellido" htmlFor="c-nombre" required>
                  <Input id="c-nombre" value={form.nombre} onChange={set('nombre')} placeholder="Escribe tu nombre" />
                </Field>
                <div className="r-grid-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)' }}>
                  <Field label="Edad del afiliado principal" htmlFor="c-edad">
                    <Input id="c-edad" type="number" value={form.edad} onChange={set('edad')} placeholder="38" />
                  </Field>
                  <Field label="Tu EPS actual" htmlFor="c-eps">
                    <Select id="c-eps" value={form.eps} onChange={set('eps')} options={EPS_OPTIONS} />
                  </Field>
                </div>
              </div>
            ) : null}

            {paso === 2 ? (
              <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
                <h3>2. El plan que te interesa</h3>
                <Alert tone={!rec ? 'info' : rec.subsidiado || rec.unico ? 'atencion' : 'exito'} basePath={IC}
                  title={!rec ? 'Falta tu edad' : rec.subsidiado ? 'Régimen subsidiado' : rec.unico ? 'Una sola opción disponible' : 'Planes disponibles para ti'}>
                  {mensajeSugerencia(rec, D)}
                </Alert>
                {!rec || !rec.subsidiado ? (
                  <RadioGroup name="plan" value={form.plan} onChange={set('plan')} options={D.planes.map((p) => {
                    const elegible = rec ? rec.planes.includes(p.id) : null;
                    return {
                      value: p.id,
                      label: <span>
                        <strong>{p.familia}</strong> · {p.nombre}
                        {elegible === true ? <span style={{ color: 'var(--exito)', fontWeight: 'var(--fw-bold)' }}> · Disponible para ti</span> : elegible === false ? <span style={{ color: 'var(--gris-500)' }}> · No aplica según tu edad o EPS</span> : null}
                        <br /><span style={{ fontSize: 'var(--fs-caption)', color: 'var(--text-muted)' }}>{p.resumen}</span>
                      </span>
                    };
                  })} />
                ) : null}
                {form.plan === 'modular' && (!rec || !rec.subsidiado) ? (
                  <Card tone="suave" padding="var(--space-6)">
                    <div className="sura-overline">Salud Modular</div>
                    <h4 style={{ marginTop: 'var(--space-2)' }}>¿Qué módulos te interesan?</h4>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'var(--space-4)' }}>
                      <Checkbox checked={modulosModular.includes('basico')} onChange={() => toggleModulo('basico')} label="Solo Básico" />
                      {MODULAR_ORDEN.map((m) => (
                        <Checkbox key={m.id} checked={modulosModular.includes(m.id)} onChange={() => toggleModulo(m.id)} label={m.label} />
                      ))}
                    </div>
                  </Card>
                ) : null}
                <Alert tone="info" basePath={IC} title="Ten en cuenta">
                  <div style={{ display: 'grid', gap: 'var(--space-2)' }}>
                    <span>Los planes voluntarios de salud solo aplican para régimen contributivo (cotizante, beneficiario o pensionado). El régimen subsidiado no puede afiliarse.</span>
                    <span>Si estás en otra EPS del régimen contributivo, puedes considerar trasladarte a EPS SURA para acceder al Plan Salud para Todos, al Plan Complementario 60 más, y disfrutar de una cobertura más completa en el Plan de Salud Modular.</span>
                  </div>
                </Alert>
              </div>
            ) : null}

            {paso === 3 ? (
              <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
                <h3>3. Cómo te contacto</h3>
                <Field label="Tu número de WhatsApp" htmlFor="c-dato">
                  <Input id="c-dato" value={form.dato} onChange={set('dato')} placeholder="300 000 0000" />
                </Field>
                <Checkbox checked={form.datos} onChange={set('datos')} label="Autorizo el tratamiento de mis datos personales para recibir la cotización." />
              </div>
            ) : null}

            {paso === 4 ? (
              <div style={{ display: 'grid', gap: 'var(--space-5)', placeItems: 'start' }}>
                <Badge tone="exito">Solicitud enviada</Badge>
                <h3>Listo, {form.nombre.split(' ')[0] || 'gracias'}</h3>
                <p style={{ margin: 0, color: 'var(--gris-700)' }}>
                  Te escribo hoy mismo por WhatsApp con la tarifa 2026 del plan que elegiste.
                </p>
                <div className="sura-tagline" style={{ fontSize: 'var(--fs-h3)', color: 'var(--azul-sura)' }}>Asegúrate de vivir</div>
                <Button variant="secondary" onClick={() => { setPaso(1); go('inicio'); }}>Volver al inicio</Button>
              </div>
            ) : null}

            {paso < 4 ? (
              <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', justifyContent: 'space-between' }}>
                <Button variant="ghost" disabled={paso === 1} onClick={() => setPaso(paso - 1)}>Atrás</Button>
                <Button disabled={paso === 3 && !listo} onClick={() => (paso === 3 ? enviarSolicitud() : paso === 1 ? irAPaso2() : setPaso(paso + 1))}>
                  {paso === 3 ? 'Enviar solicitud' : 'Continuar'}
                </Button>
              </div>
            ) : null}
          </Card>

          <div style={{ display: 'grid', gap: 'var(--space-5)' }}>
            <Card tone="azul" padding="var(--space-8)">
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
                <img src="./assets/fotos/mariangel-hero.jpg" alt={D.asesora.nombre} style={{ width: 88, height: 88, borderRadius: '50%', objectFit: 'cover', objectPosition: '50% 18%', border: '3px solid var(--amarillo-alegre)', flex: '0 0 auto' }} />
                <div>
                  <div className="sura-overline" style={{ color: 'var(--comp-azul-claro)' }}>Tu asesora</div>
                  <h3 style={{ color: 'var(--blanco)', marginTop: 'var(--space-2)' }}>{D.asesora.nombre}</h3>
                </div>
              </div>
              <p style={{ color: 'oklch(1 0 0 / 0.86)', marginTop: 'var(--space-4)' }}>{D.asesora.rol}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'var(--space-6)' }}>
                {[['nav/phone-call', D.asesora.telefono], ['nav/contact-book', D.asesora.correo]].map(([ic, t]) => (
                  <span key={t} style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', color: 'var(--blanco)' }}>
                    <Icon name={ic} size={20} basePath={IC} />{t}
                  </span>
                ))}
                <span style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', color: 'var(--blanco)' }}>
                  <InstagramIcon size={20} />{D.asesora.instagramHandle}
                </span>
              </div>
            </Card>
            <Card tone="aqua" padding="var(--space-6)">
              <div style={{ fontSize: 'var(--fs-small)', color: 'var(--gris-700)' }}>
                Las tarifas están expresadas en pesos colombianos, incluyen IVA y aplican a partir del 01 de enero de 2026. Las tarifas varían según la edad del afiliado y el tipo de plan elegido.
              </div>
            </Card>
          </div>
        </div>
      </Section>

      <section style={{ background: 'var(--azul-vivo)', color: 'var(--blanco)', padding: 'var(--section-y) 0' }}>
        <div className="r-grid r-reverse" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--space-6)', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <img src={ILU + 'seguro-activo-4-pasos.png'} alt="" style={{ width: '100%', borderRadius: 'var(--radius-xl)' }} />
          <div>
            <h2 style={{ color: 'var(--blanco)' }}>¡Afiliarte es muy fácil! Yo te acompaño paso a paso</h2>
            <ol style={{ listStyle: 'none', padding: 0, margin: 'var(--space-8) 0 0', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              {['Elegimos juntos el plan ideal', 'Recibes la cotización en tu correo', 'Realizas la firma virtual de aceptación', 'SURA confirma tu afiliación', 'Te explico cómo pagar y usar tu plan'].map((p, i) => (
                <li key={p} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', fontSize: 'var(--fs-lead)' }}>
                  <span style={{ width: 36, height: 36, flex: '0 0 auto', borderRadius: 'var(--radius-pill)', background: 'var(--amarillo-alegre)', color: 'var(--aqua-sura)', display: 'grid', placeItems: 'center', fontWeight: 'var(--fw-extrabold)' }}>{i + 1}</span>
                  {p}
                </li>
              ))}
            </ol>
            <div className="sura-tagline" style={{ fontSize: 'var(--fs-h3)', color: 'var(--amarillo-alegre)', marginTop: 'var(--space-8)' }}>Todo el proceso es virtual y se realiza vía correo electrónico</div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Cotizar });