// vita-services.jsx — Services hub + 4 modules: Telemedicina, Nutrición, Psicología, Diagnóstico

const SERVICES = [
  { id: 'citas', icon: 'video', titulo: 'Citas y telemedicina', desc: 'Agenda con tu EPS o plan. Vita lo gestiona.', tag: 'HealthSings' },
  { id: 'nutricion', icon: 'food', titulo: 'Nutrición', desc: 'Tu plan y el nutriólogo ideal para ti.', tag: null },
  { id: 'psicologia', icon: 'brain', titulo: 'Psicología', desc: 'Seguimiento de tu ánimo y tu tratamiento.', tag: null },
  { id: 'diagnostico', icon: 'lab', titulo: 'Diagnóstico', desc: 'Laboratorios, estudios y dónde reclamar.', tag: null },
];

function ServiceHeader({ t, persona, titulo, sub, onBack, right }) {
  return (
    <div style={{ paddingTop: 58, padding: '58px 18px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
        <IconBtn t={t} onClick={onBack} title="Volver"><span style={{ display: 'flex', transform: 'rotate(180deg)' }}>{Icon.chevron({ s: 18, c: t.textSoft, w: 2.5 })}</span></IconBtn>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 24, color: t.text, lineHeight: 1 }}>{titulo}</div>
          {sub && <div style={{ fontSize: 11.5, color: t.muted, fontWeight: 500, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>}
        </div>
      </div>
      {right}
    </div>
  );
}

// ── Hub ─────────────────────────────────────────────────────────
function ServicesScreen({ t, persona, profile, onOpen, onTalk, onToggleTheme, onOpenHome, onOpenHistory, onOpenProfile }) {
  return (
    <Stage t={t}>
      <div style={{ flex: 1, overflow: 'auto', padding: '58px 18px 96px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 30, color: t.text }}>Servicios</div>
          <IconBtn t={t} onClick={onToggleTheme} title="Tema">{t.dark ? Icon.sun({ s: 17 }) : Icon.moon({ s: 17 })}</IconBtn>
        </div>
        <p style={{ fontSize: 14.5, color: t.textSoft, margin: '0 2px 18px', fontWeight: 450, lineHeight: 1.5 }}>Vita coordina todo por ti, con tu EPS y nuestros aliados. Tú solo dices qué necesitas.</p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {SERVICES.map(s => (
            <button key={s.id} onClick={() => onOpen(s.id)} style={{ textAlign: 'left', cursor: 'pointer', border: `1px solid ${t.stroke}`, borderRadius: 22, padding: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 150, WebkitTapHighlightColor: 'transparent', position: 'relative' }}>
              <div style={{ width: 46, height: 46, borderRadius: 14, display: 'grid', placeItems: 'center', background: `linear-gradient(135deg, ${hexA(persona.accent, 0.22)}, ${hexA(persona.accentDeep, 0.1)})` }}>{Icon[s.icon]({ s: 24, c: persona.accent })}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15.5, fontWeight: 700, color: t.text, lineHeight: 1.2 }}>{s.titulo}</div>
                <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 450, lineHeight: 1.4, marginTop: 4 }}>{s.desc}</div>
              </div>
              {s.tag && <span style={{ position: 'absolute', top: 14, right: 14, fontSize: 9.5, fontWeight: 800, letterSpacing: 0.4, color: persona.accent, background: hexA(persona.accent, 0.14), padding: '3px 7px', borderRadius: 6 }}>{s.tag}</span>}
            </button>
          ))}
        </div>

        <button onClick={onTalk} style={{ width: '100%', marginTop: 16, display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 18, cursor: 'pointer', border: `1px solid ${hexA(persona.accent, 0.3)}`, background: hexA(persona.accent, t.dark ? 0.08 : 0.05), textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
          <VitaDot t={t} size={34} active />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>"Vita, agéndame una cita"</div>
            <div style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 450 }}>Pídeme cualquier servicio por voz.</div>
          </div>
          {Icon.mic({ s: 20, c: persona.accent })}
        </button>
      </div>
      <BottomNav t={t} persona={persona} active="servicios" onTalk={onTalk} onOpenHome={onOpenHome} onOpenHistory={onOpenHistory} onOpenProfile={onOpenProfile} onOpenServices={() => {}} />
    </Stage>
  );
}

// ════ 1. CITAS / TELEMEDICINA — agendadas de verdad contra el backend ════
const MOTIVOS_CITA = [
  { k: 'general', label: 'Medicina general', icon: 'pulse' },
  { k: 'especialista', label: 'Especialista', icon: 'heart' },
  { k: 'control', label: 'Control', icon: 'calendar' },
  { k: 'urgente', label: 'Me siento mal hoy', icon: 'alert' },
];

function fmtFechaHora(iso) {
  try {
    const d = new Date(iso);
    return d.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' }) + ' · ' + d.toLocaleTimeString('es-CO', { hour: 'numeric', minute: '2-digit' });
  } catch (e) { return iso; }
}

// Formato que <input type="datetime-local"> necesita, con una hora por
// defecto razonable (mañana a las 10:00) para no arrancar en blanco.
function proximaFechaSugerida() {
  const d = new Date(Date.now() + 24 * 3600 * 1000);
  d.setHours(10, 0, 0, 0);
  const pad = (n) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function CitasService({ t, persona, profile, onBack, onSchedule, onEnterCall }) {
  const { api } = window.VitaCore.estado;
  const { data: misCitas } = api.citas.useObtenerMisCitasQuery();
  const { data: medicosData, isLoading: cargandoMedicos } = api.citas.useObtenerMedicosQuery();
  const [agendarCita] = api.citas.useAgendarMiCitaMutation();

  const [step, setStep] = React.useState('motivo'); // motivo | medico | buscando | confirmada | error
  const [motivo, setMotivo] = React.useState(null);
  const [medicoId, setMedicoId] = React.useState(null);
  const [fechaHora, setFechaHora] = React.useState(proximaFechaSugerida());
  const [citaCreada, setCitaCreada] = React.useState(null);
  const [error, setError] = React.useState(null);
  const accent = persona.accent;
  const cobertura = [profile.eps, profile.prepagada && profile.prepagada !== 'Ninguna' ? profile.prepagada : null].filter(Boolean).join(' · ') || 'Tu EPS';

  const medicos = (medicosData && medicosData.data) || [];

  const confirmar = async () => {
    if (!medicoId) return;
    setStep('buscando');
    setError(null);
    try {
      const cita = await agendarCita({
        medicoId,
        fechaHora: new Date(fechaHora).toISOString(),
        motivo: (motivo && motivo.label) || 'Consulta',
      }).unwrap();
      setCitaCreada(cita);
      setStep('confirmada');
    } catch (e) {
      setError((e && e.data && e.data.message) || 'No pudimos agendar tu cita. Intenta de nuevo.');
      setStep('error');
    }
  };

  const reiniciar = () => { setStep('motivo'); setMotivo(null); setMedicoId(null); setCitaCreada(null); setError(null); };

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Citas y telemedicina" sub={cobertura} onBack={onBack} />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 30px' }}>
        {/* HealthSings partner banner */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: 13, borderRadius: 16, marginBottom: 18, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, display: 'grid', placeItems: 'center', background: hexA(accent, 0.14) }}>{Icon.video({ s: 20, c: accent })}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>Telemedicina con IA · HealthSings</div>
            <div style={{ fontSize: 12, color: t.muted, fontWeight: 450 }}>VITA gestiona y conecta con tu plan</div>
          </div>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: t.green, boxShadow: `0 0 0 3px ${hexA(t.green, 0.2)}` }} />
        </div>

        {step === 'motivo' && (
          <>
            {misCitas && misCitas.data.length > 0 && (
              <div style={{ marginBottom: 22 }}>
                <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: t.muted, marginBottom: 10 }}>Tus próximas citas</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {misCitas.data.slice(0, 3).map(c => (
                    <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 13, borderRadius: 14, border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF' }}>
                      <span style={{ width: 36, height: 36, flexShrink: 0, borderRadius: 10, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon.video({ s: 17, c: accent })}</span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Dr(a). {c.medico.usuario.nombre} {c.medico.usuario.apellido} · {c.medico.especialidad}</div>
                        <div style={{ fontSize: 12, color: t.muted, fontWeight: 500 }}>{fmtFechaHora(c.fechaHora)} · {c.estado.nombre}</div>
                      </div>
                      {Icon.chevron({ s: 16, c: t.muted })}
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div style={{ fontSize: 16, fontWeight: 700, color: t.text, marginBottom: 4 }}>¿Para qué necesitas la cita?</div>
            <div style={{ fontSize: 13, color: t.muted, marginBottom: 16, fontWeight: 450 }}>Vita busca el cupo y la gestiona con tu EPS.</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {MOTIVOS_CITA.map(m => (
                <button key={m.k} onClick={() => { setMotivo(m); setStep('medico'); }} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 15, borderRadius: 16, cursor: 'pointer', border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
                  <span style={{ width: 42, height: 42, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon[m.icon]({ s: 21, c: m.k === 'urgente' ? t.coral : accent })}</span>
                  <span style={{ flex: 1, fontSize: 15, fontWeight: 600, color: t.text }}>{m.label}</span>
                  {Icon.chevron({ s: 18, c: t.muted })}
                </button>
              ))}
            </div>
          </>
        )}

        {step === 'medico' && (
          <div style={{ animation: 'vitaIn .3s both' }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: t.text, marginBottom: 4 }}>Elige médico y horario</div>
            <div style={{ fontSize: 13, color: t.muted, marginBottom: 16, fontWeight: 450 }}>{motivo && motivo.label}</div>

            {cargandoMedicos && <div style={{ padding: '30px 0', textAlign: 'center' }}><Spinner c={accent} /></div>}
            {!cargandoMedicos && medicos.length === 0 && (
              <div style={{ padding: '22px 16px', borderRadius: 18, border: `1.5px dashed ${t.strokeStrong}`, textAlign: 'center', color: t.muted, fontSize: 13.5, marginBottom: 16 }}>
                Por ahora no hay médicos disponibles en la plataforma. Intenta más tarde.
              </div>
            )}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
              {medicos.map(m => {
                const sel = m.id === medicoId;
                return (
                  <button key={m.id} onClick={() => setMedicoId(m.id)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 16, cursor: 'pointer', textAlign: 'left', border: `1.5px solid ${sel ? accent : t.stroke}`, background: sel ? hexA(accent, t.dark ? 0.12 : 0.07) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF'), WebkitTapHighlightColor: 'transparent' }}>
                    <span style={{ width: 40, height: 40, borderRadius: 11, flexShrink: 0, display: 'grid', placeItems: 'center', background: hexA(accent, 0.14), fontFamily: 'Instrument Serif, serif', fontSize: 17, color: accent }}>{(m.usuario.nombre || '?').charAt(0).toUpperCase()}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>Dr(a). {m.usuario.nombre} {m.usuario.apellido}</div>
                      <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 500 }}>{m.especialidad}</div>
                    </div>
                    {sel && Icon.check({ s: 18, c: accent, w: 3 })}
                  </button>
                );
              })}
            </div>

            {medicoId && (
              <>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text, marginBottom: 8 }}>¿Cuándo?</div>
                <input type="datetime-local" value={fechaHora} onChange={e => setFechaHora(e.target.value)}
                  style={{ width: '100%', padding: '13px 14px', borderRadius: 14, border: `1.5px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.06)' : '#FFFFFF', color: t.text, fontSize: 14.5, fontFamily: "'Inter', system-ui, sans-serif", marginBottom: 18 }} />
                <button onClick={confirmar} style={{ width: '100%', padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700 }}>Agendar cita</button>
              </>
            )}
            <button onClick={() => setStep('motivo')} style={{ width: '100%', marginTop: 10, border: 'none', background: 'transparent', cursor: 'pointer', color: t.muted, fontSize: 13, fontWeight: 500, fontFamily: 'Hanken Grotesk, sans-serif' }}>Atrás</button>
          </div>
        )}

        {step === 'buscando' && (
          <div style={{ textAlign: 'center', padding: '50px 20px' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><Spinner c={accent} /></div>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 23, color: t.text, marginBottom: 8 }}>Agendando tu cita…</div>
            <div style={{ fontSize: 13.5, color: t.muted }}>Confirmando con tu EPS y reservando el cupo.</div>
          </div>
        )}

        {step === 'error' && (
          <div style={{ textAlign: 'center', padding: '40px 20px' }}>
            <div style={{ fontSize: 15, color: t.coral, fontWeight: 600, marginBottom: 16 }}>{error}</div>
            <button onClick={() => setStep('medico')} style={{ padding: '12px 22px', borderRadius: 14, border: `1px solid ${t.strokeStrong}`, background: 'transparent', color: t.text, cursor: 'pointer', fontWeight: 600 }}>Reintentar</button>
          </div>
        )}

        {step === 'confirmada' && citaCreada && (
          <div style={{ animation: 'vitaIn .4s both' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 13px', borderRadius: 999, background: hexA(t.green, 0.16), color: t.green, fontSize: 12.5, fontWeight: 700, marginBottom: 14 }}>{Icon.check({ s: 14, c: t.green, w: 3 })} Cita confirmada</div>
            <div style={{ borderRadius: 22, overflow: 'hidden', border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', marginBottom: 16 }}>
              <div style={{ padding: 18, background: `linear-gradient(135deg, ${hexA(accent, 0.2)}, ${hexA(accent, 0.05)})`, display: 'flex', alignItems: 'center', gap: 13 }}>
                <div style={{ width: 50, height: 50, borderRadius: 14, display: 'grid', placeItems: 'center', background: accent }}>{Icon.video({ s: 26, c: t.onAccent })}</div>
                <div><div style={{ fontSize: 17, fontWeight: 700, color: t.text }}>Dr(a). {citaCreada.medico.usuario.nombre} {citaCreada.medico.usuario.apellido}</div><div style={{ fontSize: 13, color: t.textSoft, fontWeight: 500 }}>{citaCreada.medico.especialidad} · Videollamada</div></div>
              </div>
              <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[['Cuándo', fmtFechaHora(citaCreada.fechaHora)], ['Estado', citaCreada.estado.nombre], ['Cobertura', cobertura]].map(([k, v], i) => (
                  <div key={i} style={{ display: 'flex', gap: 12 }}><span style={{ width: 78, flexShrink: 0, fontSize: 12.5, color: t.muted, fontWeight: 600 }}>{k}</span><span style={{ fontSize: 13.5, color: t.text, fontWeight: 500 }}>{v}</span></div>
                ))}
              </div>
            </div>
            <button onClick={() => onEnterCall && onEnterCall({ esp: citaCreada.medico.especialidad, medico: `${citaCreada.medico.usuario.nombre} ${citaCreada.medico.usuario.apellido}`, motivo: citaCreada.motivo, citaId: citaCreada.id })} style={{ width: '100%', padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, boxShadow: `0 10px 26px ${hexA(accent, 0.4)}` }}>{Icon.video({ s: 19, c: t.onAccent })} Entrar a la consulta ahora</button>
            <button onClick={() => onSchedule && onSchedule({ id: citaCreada.id, tipo: 'cita', titulo: citaCreada.medico.especialidad + ' — Dr(a). ' + citaCreada.medico.usuario.nombre, detalle: fmtFechaHora(citaCreada.fechaHora) + ' · videollamada', estado: 'agendado' })} style={{ width: '100%', marginTop: 9, padding: '14px', borderRadius: 14, border: `1px solid ${t.strokeStrong}`, cursor: 'pointer', background: 'transparent', color: t.text, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>{Icon.bell({ s: 17, c: t.textSoft })} Es más tarde · recúérdamela</button>
            <button onClick={reiniciar} style={{ width: '100%', marginTop: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: t.muted, fontSize: 13, fontWeight: 500, fontFamily: 'Hanken Grotesk, sans-serif' }}>Agendar otra</button>
          </div>
        )}
      </div>
    </Stage>
  );
}

function ConnectingSteps({ t, accent, steps }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => { const iv = setInterval(() => setN(x => Math.min(steps.length, x + 1)), 750); return () => clearInterval(iv); }, []);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9, maxWidth: 270, margin: '0 auto', textAlign: 'left' }}>
      {steps.map((s, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, opacity: i <= n ? 1 : 0.3, transition: 'opacity .3s' }}>
          <span style={{ width: 20, height: 20, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: i < n ? t.green : 'transparent', border: i >= n ? `2px solid ${t.stroke}` : 'none' }}>{i < n && Icon.check({ s: 12, c: '#fff', w: 3 })}</span>
          <span style={{ fontSize: 13, color: t.textSoft, fontWeight: 500 }}>{s}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { SERVICES, ServicesScreen, ServiceHeader, CitasService, ConnectingSteps });