/* global React */
const { useState, useEffect, useRef } = React;

// Shared atoms ---------------------------------------------------------------

window.GlassCard = function GlassCard({ children, style, feature, onClick, hover }) {
  const base = {
    background: feature ? 'rgba(232,217,189,0.06)' : 'rgba(232,217,189,0.04)',
    border: feature ? '1px solid rgba(196,135,75,0.25)' : '1px solid rgba(232,217,189,0.08)',
    borderRadius: feature ? 20 : 16,
    padding: 18,
    backdropFilter: 'blur(20px) saturate(140%)',
    WebkitBackdropFilter: 'blur(20px) saturate(140%)',
    boxShadow: feature
      ? '0 0 24px rgba(244,201,135,0.06) inset, 0 8px 32px rgba(0,0,0,0.45)'
      : '0 1px 0 rgba(232,217,189,0.04) inset, 0 8px 32px rgba(0,0,0,0.32)',
    transition: 'transform 200ms cubic-bezier(0.2,0,0,1), background 200ms, border-color 200ms',
    cursor: onClick ? 'pointer' : 'default',
    ...style,
  };
  return <div style={base} onClick={onClick}>{children}</div>;
};

window.SectionLabel = function SectionLabel({ children, right }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '20px 4px 10px' }}>
      <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase', color: '#8a7860' }}>{children}</div>
      {right && <div style={{ fontSize: 12, color: '#8a7860', fontFamily: 'Inter, system-ui, sans-serif' }}>{right}</div>}
    </div>
  );
};

window.ScreenHeader = function ScreenHeader({ title, sub }) {
  return (
    <div style={{ padding: '18px 4px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4, color: '#e8d9bd' }}>{title}</div>
        {sub && <div style={{ fontSize: 13, color: '#8a7860', marginTop: 2 }}>{sub}</div>}
      </div>
      <Logo size={28} />
    </div>
  );
};

window.Logo = function Logo({ size = 28, color = '#e8d9bd', onClick }) {
  const handleClick = onClick || (() => window.dispatchEvent(new CustomEvent('open-settings')));
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"
      onClick={handleClick} style={{ cursor: 'pointer' }}>
      <circle cx="50" cy="50" r="46" />
      <path d="M 18 18 L 30 82 L 50 35 L 70 82 L 82 18" />
    </svg>
  );
};

window.Pill = function Pill({ children, selected, onClick, tone }) {
  const tones = {
    good:   { bg: 'rgba(125,169,103,0.10)', bd: 'rgba(125,169,103,0.30)', fg: '#7da967' },
    amber:  { bg: 'rgba(196,135,75,0.10)',  bd: 'rgba(196,135,75,0.30)',  fg: '#f4c987' },
    warn:   { bg: 'rgba(224,167,102,0.10)', bd: 'rgba(224,167,102,0.30)', fg: '#e0a766' },
    danger: { bg: 'rgba(196,69,58,0.10)',   bd: 'rgba(196,69,58,0.30)',   fg: '#c4453a' },
  };
  const t = tones[tone];
  const style = selected ? {
    background: '#c4874b', borderColor: '#c4874b', color: '#180d05',
    boxShadow: '0 0 16px rgba(244,201,135,0.30)',
  } : t ? { background: t.bg, borderColor: t.bd, color: t.fg } : {
    background: 'rgba(232,217,189,0.05)', borderColor: 'rgba(232,217,189,0.10)', color: '#b8a787',
  };
  return (
    <span onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 999,
      fontSize: 11, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
      border: '1px solid', cursor: onClick ? 'pointer' : 'default', userSelect: 'none',
      transition: 'all 150ms cubic-bezier(0.2,0,0,1)',
      ...style,
    }}>{children}</span>
  );
};

window.Btn = function Btn({ children, kind = 'primary', onClick, full, disabled, style }) {
  const kinds = {
    primary: { bg: '#c4874b', fg: '#180d05', bd: 'transparent' },
    ghost:   { bg: 'transparent', fg: '#e0a766', bd: 'rgba(232,217,189,0.10)' },
    danger:  { bg: '#c4453a', fg: '#fff', bd: 'transparent' },
  };
  const k = kinds[kind];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      display: full ? 'block' : 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      width: full ? '100%' : 'auto',
      padding: '12px 18px', borderRadius: 12, fontSize: 15, fontWeight: 600,
      background: k.bg, color: k.fg, border: `1px solid ${k.bd}`,
      fontFamily: 'inherit', cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.4 : 1,
      transition: 'transform 100ms, background 150ms',
      ...style,
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >{children}</button>
  );
};

// Number that pulses on change
window.PulseNum = function PulseNum({ value, size = 36, color = '#ffffff', unit }) {
  const [pulse, setPulse] = useState(false);
  const prev = useRef(value);
  useEffect(() => {
    if (prev.current !== value) {
      setPulse(true);
      const t = setTimeout(() => setPulse(false), 600);
      prev.current = value;
      return () => clearTimeout(t);
    }
  }, [value]);
  return (
    <span style={{
      fontFamily: 'Inter, -apple-system, sans-serif', fontWeight: 600, fontSize: size,
      letterSpacing: -0.8, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      color, textShadow: pulse ? '0 0 24px rgba(244,201,135,0.6)' : '0 0 24px rgba(244,201,135,0.0)',
      transition: 'text-shadow 600ms cubic-bezier(0.2,0,0,1)',
      display: 'inline-flex', alignItems: 'baseline',
    }}>
      {value}
      {unit && <span style={{ fontSize: size * 0.4, color: '#8a7860', marginLeft: 4, fontWeight: 500, letterSpacing: 0 }}>{unit}</span>}
    </span>
  );
};

// Tab icons — SF-style, simple, clean
window.TabIcons = {
  wam: <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19V9.5l8-5 8 5V19a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1Z"/></svg>,
  gym: <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8v8M18 8v8M3 11v2M21 11v2M9 12h6"/></svg>,
  tasks: <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M9 4h6a2 2 0 0 1 2 2v0H7v0a2 2 0 0 1 2-2Z"/><rect x="5" y="6" width="14" height="14" rx="3"/><path d="M9 13l2 2 4-4"/></svg>,
  reflect: <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20 14a8 8 0 0 1-9.6 7.84A8 8 0 0 1 6.16 9.6 8 8 0 0 0 20 14Z"/></svg>,
};

window.TabBar = function TabBar({ active, onChange }) {
  const tabs = [
    { id: 'wam', label: 'WAM' },
    { id: 'gym', label: 'Gym' },
    { id: 'tasks', label: 'Tasks' },
    { id: 'reflect', label: 'Reflect' },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 14, zIndex: 50,
      background: 'rgba(10,8,6,0.85)',
      border: '1px solid rgba(232,217,189,0.08)',
      borderRadius: 22,
      backdropFilter: 'blur(24px) saturate(160%)',
      WebkitBackdropFilter: 'blur(24px) saturate(160%)',
      display: 'flex', padding: 6, gap: 4,
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            padding: '10px 4px', background: isActive ? 'rgba(196,135,75,0.10)' : 'transparent',
            border: 'none', borderRadius: 16, cursor: 'pointer',
            color: isActive ? '#f4c987' : '#5a4d3c',
            fontFamily: 'inherit', fontSize: 12, fontWeight: 500, letterSpacing: -0.1,
            transition: 'background 200ms, color 200ms',
            filter: isActive ? 'drop-shadow(0 0 6px rgba(244,201,135,0.5))' : 'none',
          }}>
            {TabIcons[t.id]}
            <span>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
};

Object.assign(window, {
  GlassCard: window.GlassCard, SectionLabel: window.SectionLabel,
  ScreenHeader: window.ScreenHeader, Logo: window.Logo, Pill: window.Pill,
  Btn: window.Btn, PulseNum: window.PulseNum, TabBar: window.TabBar,
  TabIcons: window.TabIcons,
});