// Aina design primitives — all glass-on-aurora.

// Brand
const AINA = {
  victor: { hue: 28,  name: 'Victor', initial: 'V' }, // warm amber
  aina:   { hue: 350, name: 'Aina',   initial: 'A' }, // soft coral/pink
  // accents
  v: 'oklch(0.78 0.14 28)',
  a: 'oklch(0.78 0.14 350)',
  vSoft: 'oklch(0.78 0.14 28 / 0.18)',
  aSoft: 'oklch(0.78 0.14 350 / 0.18)',
};
window.AINA = AINA;

// Glass card — the workhorse
const Glass = ({ children, style, soft, padding = 16, radius = 22, onClick, dark = true }) => (
  <div onClick={onClick} style={{
    position: 'relative',
    borderRadius: radius,
    padding,
    overflow: 'hidden',
    cursor: onClick ? 'pointer' : 'default',
    background: soft
      ? 'rgba(255,255,255,0.045)'
      : 'rgba(255,255,255,0.08)',
    backdropFilter: 'blur(24px) saturate(160%)',
    WebkitBackdropFilter: 'blur(24px) saturate(160%)',
    border: '0.5px solid rgba(255,255,255,0.14)',
    boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px rgba(0,0,0,0.18)',
    color: '#fff',
    ...style,
  }}>
    {children}
  </div>
);
window.Glass = Glass;

// Avatar — gradient ring around initial
const Avatar = ({ who = 'victor', size = 36, ring = true, style }) => {
  const cfg = AINA[who];
  const grad = who === 'victor'
    ? 'linear-gradient(135deg, oklch(0.85 0.13 50), oklch(0.65 0.16 18))'
    : 'linear-gradient(135deg, oklch(0.86 0.11 350), oklch(0.62 0.18 340))';
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: grad,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff',
      fontFamily: '"Instrument Serif", serif',
      fontSize: size * 0.55,
      boxShadow: ring ? `0 0 0 1.5px rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.3)` : 'none',
      flexShrink: 0,
      ...style,
    }}>
      {cfg.initial}
    </div>
  );
};
window.Avatar = Avatar;

// Score ring — circular progress, 0-100
const ScoreRing = ({ value = 72, size = 80, stroke = 6, who = 'victor', label, sub }) => {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value / 100);
  const color = who === 'victor' ? AINA.v : AINA.a;
  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'inline-block' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke="rgba(255,255,255,0.1)" strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke}
                strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round" fill="none"
                style={{ transition: 'stroke-dashoffset 0.6s ease' }}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontSize: size * 0.32, fontWeight: 600, letterSpacing: '-0.02em' }}>{value}</div>
        {sub && <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.5)', marginTop: -2, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{sub}</div>}
      </div>
    </div>
  );
};
window.ScoreRing = ScoreRing;

// Pill button (44px hit target guaranteed)
const PillBtn = ({ children, onClick, style, primary, ghost, size = 'md' }) => {
  const heights = { sm: 36, md: 44, lg: 52 };
  const fs = { sm: 13, md: 15, lg: 16 };
  let bg = 'rgba(255,255,255,0.1)';
  let color = '#fff';
  let border = '0.5px solid rgba(255,255,255,0.18)';
  if (primary) {
    bg = 'rgba(255,255,255,0.96)';
    color = '#0a0612';
    border = 'none';
  }
  if (ghost) {
    bg = 'transparent';
    border = '0.5px solid rgba(255,255,255,0.2)';
  }
  return (
    <button onClick={onClick} style={{
      height: heights[size], minWidth: heights[size],
      padding: '0 18px', borderRadius: heights[size]/2,
      background: bg, color, border,
      fontSize: fs[size], fontWeight: 590, letterSpacing: '-0.01em',
      backdropFilter: primary ? 'none' : 'blur(20px)',
      WebkitBackdropFilter: primary ? 'none' : 'blur(20px)',
      display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'center',
      cursor: 'pointer',
      transition: 'transform 0.15s ease, opacity 0.15s ease',
      ...style,
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.97)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >
      {children}
    </button>
  );
};
window.PillBtn = PillBtn;

// Section header used across cards
const SectionLabel = ({ children, action, icon }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 4px',
    marginBottom: 10,
  }}>
    <div style={{
      fontSize: 11, fontWeight: 590, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.55)',
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      {icon}{children}
    </div>
    {action}
  </div>
);
window.SectionLabel = SectionLabel;

// Bottom tab bar — liquid glass, 5 tabs
const TabBar = ({ active, onChange }) => {
  const tabs = [
    { id: 'home', icon: <I.Home size={22}/>, label: 'Hoy' },
    { id: 'couple', icon: <I.Heart size={22}/>, label: 'Pareja' },
    { id: 'timeline', icon: <I.Stream size={22}/>, label: 'Timeline' },
    { id: 'cal', icon: <I.Cal size={22}/>, label: 'Mes' },
    { id: 'me', icon: <I.User size={22}/>, label: 'Yo' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 14, left: 14, right: 14, zIndex: 30,
      borderRadius: 32,
      padding: '8px 6px 10px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      background: 'rgba(20, 12, 30, 0.55)',
      backdropFilter: 'blur(28px) saturate(180%)',
      WebkitBackdropFilter: 'blur(28px) saturate(180%)',
      border: '0.5px solid rgba(255,255,255,0.12)',
      boxShadow: '0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 30px rgba(0,0,0,0.4)',
    }}>
      {tabs.map(t => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            flex: 1, height: 50, border: 0, background: 'transparent',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            color: on ? '#fff' : 'rgba(255,255,255,0.5)',
            cursor: 'pointer', gap: 3,
            position: 'relative',
          }}>
            {on && <div style={{
              position: 'absolute', top: 2,
              width: 28, height: 3, borderRadius: 2,
              background: '#fff',
            }}/>}
            {t.icon}
            <span style={{ fontSize: 10, fontWeight: 590, letterSpacing: '0.02em' }}>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
};
window.TabBar = TabBar;

// Bar chart row (mini)
const MiniBars = ({ values = [], color = '#fff', max = 100, height = 36 }) => (
  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height }}>
    {values.map((v, i) => (
      <div key={i} style={{
        flex: 1, height: `${(v/max)*100}%`,
        background: color, opacity: 0.3 + (v/max)*0.7,
        borderRadius: 2, minHeight: 2,
      }}/>
    ))}
  </div>
);
window.MiniBars = MiniBars;

// Reaction chip
const ReactChip = ({ emoji, count, active, onClick }) => (
  <button onClick={onClick} style={{
    height: 28, padding: '0 10px', borderRadius: 14,
    border: `0.5px solid ${active ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,255,0.18)'}`,
    background: active ? 'rgba(255,255,255,0.16)' : 'rgba(255,255,255,0.06)',
    color: '#fff', fontSize: 12, fontWeight: 590,
    display: 'inline-flex', alignItems: 'center', gap: 5,
    cursor: 'pointer',
    backdropFilter: 'blur(10px)',
    WebkitBackdropFilter: 'blur(10px)',
  }}>
    <span style={{ fontSize: 14 }}>{emoji}</span>
    {count > 0 && <span style={{ opacity: 0.8 }}>{count}</span>}
  </button>
);
window.ReactChip = ReactChip;

// Fading scroll header with title
const ScreenTitle = ({ children, sub, right }) => (
  <div style={{
    padding: '8px 4px 18px',
    display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
  }}>
    <div>
      {sub && <div style={{
        fontSize: 11, fontWeight: 590, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.5)', marginBottom: 4,
      }}>{sub}</div>}
      <div className="serif" style={{ fontSize: 38, lineHeight: 1, color: '#fff', letterSpacing: '-0.015em' }}>
        {children}
      </div>
    </div>
    {right}
  </div>
);
window.ScreenTitle = ScreenTitle;