// Shared primitives for home-screen variations.
// Theme is 'dark' | 'light' — we derive tokens from that.
/* global React */

const makeTheme = (mode) => {
  if (mode === 'light') return {
    mode,
    bg0: '#F4F5F7', bg1: '#FFFFFF', bg2: '#FFFFFF',
    s1: '#FFFFFF', s2: 'rgba(0,0,0,0.04)',
    b1: 'rgba(0,0,0,0.05)', b2: 'rgba(0,0,0,0.08)', b3: 'rgba(0,0,0,0.12)',
    fg1: '#0A0A0C', fg2: 'rgba(10,10,12,0.72)', fg3: 'rgba(10,10,12,0.52)', fg4: 'rgba(10,10,12,0.38)',
    cardShadow: '0 6px 18px rgba(15,15,30,0.06), 0 2px 6px rgba(15,15,30,0.04)',
    tabFill: 'rgba(18,18,22,0.86)', tabFg: '#fff', tabFgDim: 'rgba(255,255,255,0.55)',
  };
  return {
    mode,
    bg0: '#000', bg1: '#0A0A0C', bg2: '#121216',
    s1: 'rgba(255,255,255,0.04)', s2: 'rgba(255,255,255,0.07)',
    b1: 'rgba(255,255,255,0.06)', b2: 'rgba(255,255,255,0.10)', b3: 'rgba(255,255,255,0.16)',
    fg1: '#fff', fg2: 'rgba(255,255,255,0.72)', fg3: 'rgba(255,255,255,0.52)', fg4: 'rgba(255,255,255,0.32)',
    cardShadow: '0 8px 24px rgba(0,0,0,0.45)',
    tabFill: 'rgba(20,20,24,0.65)', tabFg: '#fff', tabFgDim: 'rgba(255,255,255,0.52)',
  };
};

// Icon tile accent colors (match production palette, re-keyed to holo tones)
const ACCENTS = {
  discover: { icon: '#E63C8A', bloom: 'rgba(240,91,232,0.30)', tile: 'linear-gradient(135deg,#F05BE8,#E63C8A)' },
  latest:   { icon: '#2F7BFF', bloom: 'rgba(91,227,255,0.30)',  tile: 'linear-gradient(135deg,#5BE3FF,#2F7BFF)' },
  memories: { icon: '#2BB869', bloom: 'rgba(111,240,176,0.30)', tile: 'linear-gradient(135deg,#6FF0B0,#2BB869)' },
  captures: { icon: '#F07A1A', bloom: 'rgba(255,138,61,0.30)',  tile: 'linear-gradient(135deg,#FFC14D,#F07A1A)' },
};

// 4-pt sparkle, absolutely positioned
const Sp = ({ size = 10, top, left, right, bottom, o = 0.9, color = '#fff' }) => (
  <div style={{
    position:'absolute', width:size, height:size, top, left, right, bottom,
    background: color, opacity:o,
    clipPath:'polygon(50% 0%,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%)',
    filter:'drop-shadow(0 0 6px rgba(255,255,255,0.55))', pointerEvents:'none',
  }}/>
);

// Status bar — spacer only. iOS frame renders its own real status bar.
const StatusBar = ({ th }) => (<div style={{height: 44}}/>);

// Floating liquid-glass tab bar
const TabBar = ({ th, active='home', darkPill=false }) => {
  const fill = darkPill ? 'rgba(20,20,24,0.85)' : th.tabFill;
  const fg   = darkPill ? '#fff' : th.tabFg;
  const dim  = darkPill ? 'rgba(255,255,255,0.55)' : th.tabFgDim;
  const items = [
    {id:'home', g:'◉'}, {id:'fav', g:'★'}, {id:'stats', g:'◐'}, {id:'set', g:'⚙'}
  ];
  return (
    <div style={{
      position:'absolute', left:'50%', bottom:20, transform:'translateX(-50%)',
      width:'85%', height:60, borderRadius:32,
      background: fill, backdropFilter:'blur(28px) saturate(1.4)',
      WebkitBackdropFilter:'blur(28px) saturate(1.4)',
      border: th.mode==='light' && !darkPill ? '1px solid rgba(255,255,255,0.18)' : '1.5px solid rgba(255,255,255,0.10)',
      boxShadow:'0 18px 40px rgba(0,0,0,0.35)',
      display:'flex', alignItems:'center', justifyContent:'space-around', zIndex:20,
    }}>
      {items.map(i => {
        const sel = i.id === active;
        const holo = 'linear-gradient(135deg,#6B4BFF,#F05BE8,#FF8A3D,#5BE3FF)';
        return (
          <div key={i.id} style={{fontSize:18, width:40, height:40, borderRadius:999,
            display:'flex', alignItems:'center', justifyContent:'center',
            background: sel ? holo : 'transparent',
            color: sel ? '#fff' : dim,
            boxShadow: sel ? '0 4px 14px rgba(240,91,232,0.4)' : 'none',
          }}>{i.g}</div>
        );
      })}
    </div>
  );
};

Object.assign(window, { makeTheme, ACCENTS, Sp, StatusBar, TabBar });