// vita-ui.jsx — shared UI atoms for the Vita app (bubbles, rings, chips, controls)

function ProgressRing({ value = 0, size = 34, stroke = 3, color, track }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - Math.max(0, Math.min(100, value)) / 100);
  return (
    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
        strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
        style={{ transition: 'stroke-dashoffset 0.7s cubic-bezier(.4,0,.2,1)' }} />
    </svg>
  );
}

function VitaDot({ t, size = 26, active = false }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: `radial-gradient(circle at 32% 28%, ${t.accent}, ${t.accentDeep})`,
      boxShadow: active ? `0 0 0 4px ${hexA(t.accent, 0.18)}` : `0 2px 8px ${hexA(t.accent, 0.4)}`,
      position: 'relative',
    }}>
      <div style={{ position: 'absolute', inset: '22% 22% auto auto', width: size*0.22, height: size*0.22, borderRadius: '50%', background: 'rgba(255,255,255,0.7)' }} />
    </div>
  );
}

function MessageBubble({ m, t, latest }) {
  const isVita = m.role === 'vita';
  const p = t.paleta;
  void latest;
  return (
    <div style={{
      display: 'flex', gap: 10, alignItems: 'flex-start',
      flexDirection: isVita ? 'row' : 'row-reverse',
      animation: 'vitaIn 0.32s cubic-bezier(.2,.7,.3,1) both',
    }}>
      {isVita && <VitaDot t={t} size={28} />}
      <div style={{
        maxWidth: 'min(68ch, 78%)',
        padding: '11px 15px',
        borderRadius: isVita ? '4px 14px 14px 14px' : '14px 4px 14px 14px',
        // Paleta de marca: el paciente en verde muy claro, Vita en blanco.
        // Ambos con texto oscuro — el degradado con texto blanco de antes
        // fallaba contraste y rompía la coherencia del sistema.
        background: isVita ? p.chatSystem : p.chatUser,
        border: `1px solid ${isVita ? p.border : 'transparent'}`,
        color: p.text,
        fontSize: 15, lineHeight: 1.5,
        fontWeight: 400,
        fontFamily: "'Inter', system-ui, sans-serif",
        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
      }}>{m.text}</div>
    </div>
  );
}

function StatePill({ phase, t, persona }) {
  const map = {
    idle: { label: 'Toca para hablar', dot: t.muted },
    listening: { label: 'Te escucho…', dot: t.accent },
    thinking: { label: 'Pensando…', dot: t.accent },
    speaking: { label: 'Vita responde', dot: t.green },
  };
  const s = map[phase] || map.idle;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      padding: '5px 13px 5px 10px', borderRadius: 999,
      background: t.dark ? 'rgba(255,255,255,0.06)' : 'rgba(10,26,51,0.04)',
      border: `1px solid ${t.stroke}`,
      fontSize: 12.5, fontWeight: 600, color: t.textSoft, letterSpacing: 0.1,
      fontFamily: 'Hanken Grotesk, sans-serif',
    }}>
      <span style={{
        width: 7, height: 7, borderRadius: '50%', background: s.dot,
        animation: phase === 'idle' ? 'none' : 'vitaPulse 1.3s ease-in-out infinite',
      }} />
      {s.label}
    </div>
  );
}

function IconBtn({ children, onClick, t, active, title }) {
  return (
    <button onClick={onClick} title={title} style={{
      width: 38, height: 38, borderRadius: 12, cursor: 'pointer',
      display: 'grid', placeItems: 'center',
      border: `1px solid ${active ? hexA(t.accent, 0.5) : t.stroke}`,
      background: active ? hexA(t.accent, 0.14) : (t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)'),
      color: active ? t.accent : t.textSoft,
      transition: 'all .2s', WebkitTapHighlightColor: 'transparent',
    }}>{children}</button>
  );
}

function ProfileChip({ label, value, t }) {
  const val = Array.isArray(value) ? value.join(', ') : value;
  return (
    <div style={{
      flexShrink: 0, padding: '8px 12px', borderRadius: 13,
      background: t.dark ? 'rgba(255,255,255,0.05)' : '#FFFFFF',
      border: `1px solid ${t.stroke}`, minWidth: 0,
      animation: 'vitaIn 0.5s cubic-bezier(.2,.7,.3,1) both',
    }}>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', color: t.muted, marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: t.text, whiteSpace: 'nowrap', maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis' }}>{val}</div>
    </div>
  );
}

Object.assign(window, { ProgressRing, VitaDot, MessageBubble, StatePill, IconBtn, ProfileChip });