// Shared SunSync primitives
// All components are mode-aware via the `dark` prop they receive.

const c = (light, dark, isDark) => (isDark ? dark : light);

// ─── Background: sunlight gradient ──────────────────────────
function SunBackdrop({ dark, hue = 'day', children, style = {} }) {
  // hue: 'day' | 'dusk' | 'extreme' | 'calm' | 'night'
  const palettes = {
    day: dark
      ? ['#1A1208', '#1F140A', '#15110A']
      : ['#FFE9C4', '#FAF5ED', '#EFE3D0'],
    dusk: dark
      ? ['#2A1810', '#1A100A', '#0F0907']
      : ['#FFD3A8', '#FAE6D0', '#F5E0D2'],
    extreme: dark
      ? ['#3A1A0A', '#1F0E08', '#0F0805']
      : ['#FFC9A0', '#FBDAB8', '#F4E2CC'],
    calm: dark
      ? ['#0F1820', '#0C1218', '#0A0E12']
      : ['#DCEAF1', '#F0F4F6', '#FAF5ED'],
    night: dark
      ? ['#0A0F1A', '#070A12', '#05080F']
      : ['#D4DEEA', '#E8EBF0', '#F4EFE7'],
  };
  const [a, b, d] = palettes[hue];
  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'hidden',
      background: `linear-gradient(180deg, ${a} 0%, ${b} 55%, ${d} 100%)`,
      ...style,
    }}>
      {/* aurora blobs */}
      <div className="aurora-1" style={{
        position: 'absolute', top: '-10%', right: '-20%', width: '90%', height: '60%',
        borderRadius: '50%',
        background: `radial-gradient(circle, ${dark ? 'rgba(228,165,90,0.18)' : 'rgba(255,180,90,0.55)'} 0%, transparent 65%)`,
        filter: 'blur(40px)',
      }} />
      <div className="aurora-2" style={{
        position: 'absolute', bottom: '-20%', left: '-15%', width: '80%', height: '55%',
        borderRadius: '50%',
        background: `radial-gradient(circle, ${dark ? 'rgba(120,160,200,0.12)' : 'rgba(166,200,219,0.45)'} 0%, transparent 70%)`,
        filter: 'blur(40px)',
      }} />
      {children}
    </div>
  );
}

// ─── Frosted glass card ─────────────────────────────────────
function Glass({ dark, children, style = {}, radius = 28, padding = 20, onClick }) {
  return (
    <div onClick={onClick} style={{
      borderRadius: radius,
      padding,
      background: dark ? 'rgba(40,32,22,0.5)' : 'rgba(255,255,255,0.55)',
      backdropFilter: 'blur(24px) saturate(160%)',
      WebkitBackdropFilter: 'blur(24px) saturate(160%)',
      border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.7)',
      boxShadow: dark
        ? '0 1px 1px rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.4)'
        : '0 1px 1px rgba(255,255,255,0.9) inset, 0 12px 32px rgba(31,27,22,0.06)',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ─── UV ring with glow ──────────────────────────────────────
function UVRing({ value = 7, max = 11, size = 240, label = 'High', dark = false, animate = true }) {
  const stroke = 14;
  const r = (size - stroke) / 2;
  const C = 2 * Math.PI * r;
  const pct = Math.min(value / max, 1);
  const dash = pct * C;
  // UV palette
  const stops = [
    { v: 0.18, c: '#8FBE7E' },   // low (green)
    { v: 0.45, c: '#E8C04A' },   // moderate (gold)
    { v: 0.72, c: '#E8A24A' },   // high (amber)
    { v: 1.0,  c: '#D9624A' },   // extreme (coral)
  ];
  const gid = `uv-grad-${Math.round(value * 100)}`;

  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      {/* glow halo */}
      <div className="glow-breath" style={{
        position: 'absolute', inset: -10,
        background: `radial-gradient(circle, ${dark ? 'rgba(232,162,74,0.35)' : 'rgba(232,162,74,0.45)'} 0%, transparent 65%)`,
        borderRadius: '50%',
      }} />
      <svg width={size} height={size} style={{ position: 'relative', transform: 'rotate(-90deg)' }}>
        <defs>
          <linearGradient id={gid} x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#F2C46B" />
            <stop offset="55%" stopColor="#E8A24A" />
            <stop offset="100%" stopColor="#D9624A" />
          </linearGradient>
        </defs>
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)'} strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={`url(#${gid})`} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={`${dash} ${C}`} />
        {/* tick at end */}
      </svg>
      {/* center content */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 0,
      }}>
        <div style={{
          fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
          color: dark ? '#A89F92' : '#6B6258',
          fontFamily: 'Geist', fontWeight: 500,
        }}>UV Index</div>
        <div className="font-display" style={{
          fontSize: size * 0.48, lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16',
          marginTop: 4, marginBottom: 4, fontStyle: 'italic',
        }}>{value}</div>
        <div style={{
          fontFamily: 'Geist', fontSize: 13, fontWeight: 500,
          color: dark ? '#F4B567' : '#C99750', letterSpacing: 0.2,
        }}>{label}</div>
      </div>
    </div>
  );
}

// ─── Protection ring (smaller, sits at bottom of dashboard) ─
function ProtectionRing({ pct = 64, size = 120, dark = false, label = '', showValue = true }) {
  const stroke = 10;
  const r = (size - stroke) / 2;
  const C = 2 * Math.PI * r;
  const dash = (pct / 100) * C;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.07)'} strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={dark ? '#8FB4C8' : '#7AA7BF'} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={`${dash} ${C}`} />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        {showValue && <div className="font-display" style={{
          fontSize: 34, lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16',
          fontStyle: 'italic',
        }}>{pct}<span style={{ fontSize: 14, verticalAlign: 'super' }}>%</span></div>}
        {showValue && label && <div style={{ fontSize: 10, color: dark ? '#A89F92' : '#6B6258', marginTop: 2, letterSpacing: 0.8, textTransform: 'uppercase', fontFamily: 'Geist', fontWeight: 500 }}>{label}</div>}
      </div>
    </div>
  );
}

// ─── Tab bar ────────────────────────────────────────────────
function TabBar({ active = 'home', dark = false, showLearn = false }) {
  const tabs = showLearn
    ? [
        { id: 'home', label: 'Today', icon: 'sun' },
        { id: 'apply', label: 'Apply', icon: 'drop' },
        { id: 'learn', label: 'Learn', icon: 'book' },
        { id: 'insights', label: 'Insights', icon: 'chart' },
        { id: 'me', label: 'You', icon: 'user' },
      ]
    : [
        { id: 'home', label: 'Today', icon: 'sun' },
        { id: 'apply', label: 'Apply', icon: 'drop' },
        { id: 'insights', label: 'Insights', icon: 'chart' },
        { id: 'me', label: 'You', icon: 'user' },
      ];
  const ink = dark ? '#A89F92' : '#A89F92';
  const inkActive = dark ? '#F2EBDF' : '#1F1B16';

  const Icon = ({ name, c }) => {
    const props = { width: 24, height: 24, fill: 'none', stroke: c, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (name === 'sun') return (
      <svg {...props} viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
      </svg>
    );
    if (name === 'drop') return (
      <svg {...props} viewBox="0 0 24 24">
        <path d="M12 3.5C12 3.5 5 11 5 15a7 7 0 0 0 14 0c0-4-7-11.5-7-11.5z" />
      </svg>
    );
    if (name === 'chart') return (
      <svg {...props} viewBox="0 0 24 24">
        <path d="M3 17l5-5 4 4 8-9" />
        <path d="M14 7h6v6" />
      </svg>
    );
    if (name === 'book') return (
      <svg {...props} viewBox="0 0 24 24">
        <path d="M4 4.5A1.5 1.5 0 0 1 5.5 3H18a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2z" />
        <path d="M4 19.5A1.5 1.5 0 0 1 5.5 18H19" />
        <path d="M9 7.5h6M9 11h4" />
      </svg>
    );
    return (
      <svg {...props} viewBox="0 0 24 24">
        <circle cx="12" cy="8" r="4" />
        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" />
      </svg>
    );
  };

  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 14,
      height: 76, borderRadius: 32,
      background: dark ? 'rgba(34,28,22,0.78)' : 'rgba(255,255,255,0.78)',
      backdropFilter: 'blur(28px) saturate(180%)',
      WebkitBackdropFilter: 'blur(28px) saturate(180%)',
      border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.9)',
      boxShadow: dark ? '0 12px 40px rgba(0,0,0,0.5)' : '0 12px 40px rgba(31,27,22,0.1)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      padding: '0 12px',
      zIndex: 30,
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          opacity: t.id === active ? 1 : 0.55,
        }}>
          <Icon name={t.icon} c={t.id === active ? inkActive : ink} />
          <div style={{
            fontSize: 10, fontFamily: 'Geist', fontWeight: 500, letterSpacing: 0.2,
            color: t.id === active ? inkActive : ink,
          }}>{t.label}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Pill button ────────────────────────────────────────────
function PillBtn({ children, dark, primary, full, style = {}, onClick, size = 'md' }) {
  const heights = { sm: 38, md: 52, lg: 58 };
  const h = heights[size];
  return (
    <button onClick={onClick} style={{
      height: h, padding: '0 22px',
      borderRadius: h / 2,
      border: 'none',
      width: full ? '100%' : 'auto',
      background: primary
        ? (dark ? '#F2EBDF' : '#1F1B16')
        : (dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.06)'),
      color: primary
        ? (dark ? '#1F1B16' : '#FAF5ED')
        : (dark ? '#F2EBDF' : '#1F1B16'),
      fontFamily: 'Geist', fontSize: 16, fontWeight: 500, letterSpacing: 0.1,
      cursor: 'pointer',
      boxShadow: primary && !dark ? '0 8px 20px rgba(31,27,22,0.2)' : 'none',
      ...style,
    }}>{children}</button>
  );
}

// ─── Image placeholder (when real photography goes) ─────────
function PhotoSlot({ label = 'product shot', height = 140, dark = false, radius = 20, style = {} }) {
  return (
    <div className="ph-stripes" style={{
      height, borderRadius: radius,
      background: dark
        ? 'linear-gradient(135deg, #2A2218, #1F1810)'
        : 'linear-gradient(135deg, #F0E2C6, #E8D9BC)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: dark ? '#7A7065' : '#A89F92',
      fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 0.5,
      ...style,
    }}>
      {label}
    </div>
  );
}

// ─── Small SVG glyphs used across screens ───────────────────
const Glyph = {
  Sun: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
    </svg>
  ),
  Drop: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3.5C12 3.5 5 11 5 15a7 7 0 0 0 14 0c0-4-7-11.5-7-11.5z" />
    </svg>
  ),
  Clock: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  ),
  Bell: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 16v-5a6 6 0 0 0-12 0v5l-2 3h16z" />
      <path d="M10 21a2 2 0 0 0 4 0" />
    </svg>
  ),
  Map: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 21s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>
  ),
  Sparkle: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" />
      <path d="M19 16l.8 2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-1z" />
    </svg>
  ),
  Watch: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="6" width="12" height="12" rx="3" />
      <path d="M9 6V3h6v3M9 18v3h6v-3" />
    </svg>
  ),
  Check: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7" />
    </svg>
  ),
  Plus: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  Wave: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0" />
      <path d="M2 17c2-2 4-2 6 0s4 2 6 0 4-2 6 0" />
    </svg>
  ),
  Chevron: ({ s = 14, c = 'currentColor', dir = 'right' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: dir === 'down' ? 'rotate(90deg)' : dir === 'up' ? 'rotate(-90deg)' : dir === 'left' ? 'rotate(180deg)' : 'none' }}>
      <path d="M9 6l6 6-6 6" />
    </svg>
  ),
  Lock: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="10" rx="3" />
      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  Family: ({ s = 18, c = 'currentColor' }) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="9" cy="9" r="3" />
      <circle cx="17" cy="11" r="2.2" />
      <path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2 2-3.5 4-3.5s3.5 1.5 3.5 3.5" />
    </svg>
  ),
};

Object.assign(window, {
  SunBackdrop, Glass, UVRing, ProtectionRing, TabBar, PillBtn, PhotoSlot, Glyph,
});