// vita-care2.jsx — Full Care screen: today timeline, medication adherence, therapies, controls

function CareScreen({ t, persona, profile, tasks, done, streaks, onToggle, postCita, onOpenPostCita, controles, terapias, onBack, onTalk, onOpenHome, onOpenHistory, onOpenProfile, onOpenServices }) {
  const accent = persona.accent;
  const completed = tasks.filter(x => done[x.id]).length;
  const pct = tasks.length ? Math.round(completed / tasks.length * 100) : 0;

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Mi cuidado" sub="Vita te acompaña cada día" onBack={onBack}
        right={<IconBtn t={t} onClick={onTalk} title="Hablar con Vita">{Icon.mic({ s: 18, c: accent })}</IconBtn>} />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 96px' }}>
        {/* day progress hero */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 15, padding: 16, borderRadius: 20, marginBottom: 18, background: `linear-gradient(135deg, ${hexA(accent, t.dark ? 0.18 : 0.1)}, ${hexA(accent, 0.03)})`, border: `1px solid ${hexA(accent, 0.22)}` }}>
          <div style={{ position: 'relative', width: 60, height: 60, flexShrink: 0 }}>
            <ProgressRing value={pct} size={60} stroke={5} color={accent} track={t.dark ? 'rgba(255,255,255,0.1)' : 'rgba(10,26,51,0.08)'} />
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 15, fontWeight: 800, color: t.text }}>{pct}%</div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 22, color: t.text, lineHeight: 1.1 }}>Hoy llevas {completed} de {tasks.length}</div>
            <div style={{ fontSize: 13, color: t.textSoft, fontWeight: 450, marginTop: 2 }}>{pct === 100 ? '¡Día perfecto de autocuidado! 💚' : 'Cada paso cuenta. Yo te recuerdo el resto.'}</div>
          </div>
        </div>

        {/* post-cita check-in */}
        {postCita && <PostCitaCard t={t} persona={persona} cita={postCita} onOpen={onOpenPostCita} onDismiss={() => {}} />}

        {/* today's timeline by block */}
        {BLOQUES.map(b => {
          const bt = tasks.filter(x => x.bloque === b.k);
          if (!bt.length) return null;
          return (
            <div key={b.k} style={{ marginBottom: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 2px 11px' }}>
                <span style={{ width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon[b.icon]({ s: 15, c: accent })}</span>
                <span style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.textSoft }}>{b.label}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {bt.map(task => <CareRow key={task.id} t={t} persona={persona} task={task} done={!!done[task.id]} onToggle={() => onToggle(task.id)} />)}
              </div>
            </div>
          );
        })}

        {/* medication adherence */}
        {streaks && streaks.length > 0 && (
          <div style={{ marginBottom: 18 }}>
            <SecTitle t={t}>Tu constancia</SecTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {streaks.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                  <span style={{ width: 42, height: 42, flexShrink: 0, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon.pill({ s: 20, c: accent })}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.nombre}</div>
                    <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 500 }}>{s.pauta}</div>
                    {/* week dots */}
                    <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
                      {s.semana.map((on, j) => <span key={j} style={{ width: 14, height: 14, borderRadius: 4, background: on ? accent : (t.dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,26,51,0.07)') }} />)}
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                    {Icon.flame({ s: 20, c: '#E6A93C', fill: hexA('#E6A93C', 0.25) })}
                    <span style={{ fontSize: 14, fontWeight: 800, color: t.text }}>{s.racha}</span>
                    <span style={{ fontSize: 9.5, color: t.muted, fontWeight: 600 }}>días</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* therapies follow-up */}
        {terapias && terapias.length > 0 && (
          <div style={{ marginBottom: 18 }}>
            <SecTitle t={t}>Tus terapias en curso</SecTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {terapias.map((ter, i) => (
                <div key={i} style={{ padding: 16, borderRadius: 18, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 12 }}>
                    <span style={{ width: 40, height: 40, flexShrink: 0, borderRadius: 12, display: 'grid', placeItems: 'center', background: hexA(ter.color, 0.14) }}>{Icon[ter.icon]({ s: 20, c: ter.color })}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{ter.nombre}</div>
                      <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 500 }}>{ter.profesional}</div>
                    </div>
                    <span style={{ fontSize: 11, fontWeight: 700, color: ter.color, background: hexA(ter.color, 0.14), padding: '4px 9px', borderRadius: 999 }}>{ter.hechas}/{ter.total}</span>
                  </div>
                  {/* progress bar */}
                  <div style={{ height: 7, borderRadius: 999, background: t.dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,26,51,0.06)', overflow: 'hidden', marginBottom: 9 }}>
                    <div style={{ width: (ter.hechas / ter.total * 100) + '%', height: '100%', borderRadius: 999, background: `linear-gradient(90deg, ${ter.color}, ${hexA(ter.color, 0.6)})` }} />
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: t.textSoft, fontWeight: 500 }}>
                    {Icon.calendar({ s: 14, c: t.muted })} Próxima: {ter.proxima}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* upcoming controls */}
        {controles && controles.length > 0 && (
          <div>
            <SecTitle t={t}>Próximos controles</SecTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {controles.map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
                  <div style={{ width: 46, height: 46, flexShrink: 0, borderRadius: 13, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: hexA(accent, 0.13), color: accent }}>
                    <span style={{ fontSize: 16, fontWeight: 800, lineHeight: 1 }}>{c.dia}</span>
                    <span style={{ fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase' }}>{c.mes}</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>{c.titulo}</div>
                    <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 500 }}>{c.detalle}</div>
                  </div>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: t.green, background: hexA(t.green, 0.13), padding: '5px 10px', borderRadius: 999, flexShrink: 0 }}>{Icon.bell({ s: 13, c: t.green })} Te recuerdo</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <BottomNav t={t} persona={persona} active="inicio" onTalk={onTalk} onOpenHome={onOpenHome} onOpenHistory={onOpenHistory} onOpenProfile={onOpenProfile} onOpenServices={onOpenServices} />
    </Stage>
  );
}

// Build demo adherence/therapy/control data from patient state
function buildCareDetails({ profile, seguimiento }) {
  const meds = Array.isArray(profile.medicamentos) ? profile.medicamentos : (profile.medicamentos ? [profile.medicamentos] : []);
  const streaks = meds.slice(0, 2).map((m, i) => ({
    nombre: m, pauta: i === 0 ? '1 vez al día · mañana' : '1 vez al día',
    racha: i === 0 ? 12 : 6, semana: [true, true, true, true, true, i === 0, false],
  }));
  const terapias = [];
  // psychology in treatment → therapy follow-up
  terapias.push({ nombre: 'Terapia psicológica', profesional: 'Dr. Suárez', icon: 'brain', color: '#A98CD9', hechas: 3, total: 8, proxima: 'Jueves 4:00 p.m.' });
  // if cardiac risk → cardiac rehab walking
  const cardio = (Array.isArray(profile.condiciones) ? profile.condiciones : [profile.condiciones]).some(c => /hipert|coraz|cardi/i.test(c || ''));
  if (cardio) terapias.push({ nombre: 'Acondicionamiento cardiaco', profesional: 'Fisioterapia · PREVENT', icon: 'walk', color: '#73C58E', hechas: 5, total: 12, proxima: 'Lunes 9:00 a.m.' });

  const controles = [
    { dia: '18', mes: 'Jun', titulo: 'Control de presión arterial', detalle: 'Con medicina general · virtual' },
    { dia: '02', mes: 'Jul', titulo: 'Control nutricional', detalle: 'Dra. Marcela Ruiz' },
  ];
  return { streaks, terapias, controles };
}

Object.assign(window, { CareScreen, buildCareDetails });