// 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';
  return (
    <div style={{
      display: 'flex', gap: 9, alignItems: 'flex-end',
      flexDirection: isVita ? 'row' : 'row-reverse',
      animation: 'vitaIn 0.4s cubic-bezier(.2,.7,.3,1) both',
    }}>
      {isVita && <VitaDot t={t} size={24} />}
      <div style={{
        maxWidth: '76%',
        padding: isVita ? '11px 15px' : '10px 14px',
        borderRadius: isVita ? '4px 17px 17px 17px' : '17px 17px 4px 17px',
        background: isVita
          ? (t.dark ? 'rgba(255,255,255,0.06)' : '#FFFFFF')
          : `linear-gradient(135deg, ${t.accent}, ${t.accentDeep})`,
        border: isVita ? `1px solid ${t.stroke}` : 'none',
        color: isVita ? t.text : t.onAccent,
        fontSize: 15.5, lineHeight: 1.4, letterSpacing: -0.1,
        fontWeight: isVita ? 450 : 500,
        boxShadow: isVita ? 'none' : `0 6px 18px ${hexA(t.accent, 0.3)}`,
        fontFamily: 'Hanken Grotesk, sans-serif',
      }}>{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 });