// olivia-tokens.jsx
// Shared design tokens + small UI atoms for Olivia screens.

const OLIVIA = {
  // surfaces
  cream: '#F5EFE6',
  paper: '#FFFCF7',
  paperDeep: '#EFE7D9',
  // ink
  ink: '#3A2E26',
  inkSoft: '#7A6E66',
  inkMute: '#A89E94',
  // brand
  terra: '#D97757',
  terraDeep: '#B85A3D',
  terraTint: '#F2C4A8',
  terraWash: '#FAE7D8',
  sage: '#7A8B6F',
  sageDeep: '#4E6147',
  sageTint: '#C9D3BD',
  butter: '#F4D58D',
  rose: '#E89B8C',
  // borders
  hair: 'rgba(58,46,38,0.10)',
  hairStrong: 'rgba(58,46,38,0.18)',
  // theme-aware surface helpers (overridden by dark palette)
  glass: 'rgba(255,252,247,0.88)',   // frosted tab bar / floating chrome
  sunken: 'rgba(245,239,230,0.55)',  // inset footer band inside cards
  isDark: false,
};

let OLIVIA_FONT_DISPLAY = '"Newsreader", "Iowan Old Style", Georgia, serif';
let OLIVIA_FONT_BODY = '"Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif';
// Mirror onto the shared OLIVIA object so screen files can read live values
// through one stable reference.
OLIVIA.fontDisplay = OLIVIA_FONT_DISPLAY;
OLIVIA.fontBody = OLIVIA_FONT_BODY;
function setOliviaFonts({ display, body }) {
  if (display) OLIVIA_FONT_DISPLAY = display;
  if (body) OLIVIA_FONT_BODY = body;
  OLIVIA.fontDisplay = OLIVIA_FONT_DISPLAY;
  OLIVIA.fontBody = OLIVIA_FONT_BODY;
  // Also update window globals so other Babel scripts that resolve
  // OLIVIA_FONT_DISPLAY/OLIVIA_FONT_BODY via the global scope pick up the change.
  window.OLIVIA_FONT_DISPLAY = OLIVIA_FONT_DISPLAY;
  window.OLIVIA_FONT_BODY = OLIVIA_FONT_BODY;
}

// Inject Google Fonts once
(function injectFonts() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('olivia-fonts')) return;
  const l = document.createElement('link');
  l.id = 'olivia-fonts';
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap';
  document.head.appendChild(l);
})();

// ── Atoms ──────────────────────────────────────────────────────

function PrimaryButton({ children, onClick, color = OLIVIA.terra, textColor = OLIVIA.paper, style }) {
  return (
    <button onClick={onClick} style={{
      appearance: 'none', border: 'none', cursor: 'pointer',
      background: color, color: textColor,
      borderRadius: 999, padding: '16px 24px',
      fontFamily: OLIVIA_FONT_BODY, fontSize: 17, fontWeight: 600,
      letterSpacing: '-0.01em',
      boxShadow: '0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 18px rgba(217,119,87,0.22)',
      width: '100%',
      ...style,
    }}>{children}</button>
  );
}

function GhostButton({ children, onClick, style }) {
  return (
    <button onClick={onClick} style={{
      appearance: 'none', border: 'none', cursor: 'pointer',
      background: 'transparent', color: OLIVIA.inkSoft,
      borderRadius: 999, padding: '12px 16px',
      fontFamily: OLIVIA_FONT_BODY, fontSize: 15, fontWeight: 500,
      ...style,
    }}>{children}</button>
  );
}

function Pill({ children, color = OLIVIA.terra, bg = OLIVIA.terraWash, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px', borderRadius: 999,
      background: bg, color: color,
      fontFamily: OLIVIA_FONT_BODY, fontSize: 12, fontWeight: 600,
      letterSpacing: '0.02em', textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

// Soft card surface used everywhere
function Card({ children, style, padding = 20 }) {
  return (
    <div style={{
      background: OLIVIA.paper,
      borderRadius: 22,
      padding,
      border: `1px solid ${OLIVIA.hair}`,
      boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(58,46,38,0.04), 0 12px 28px rgba(58,46,38,0.06)',
      ...style,
    }}>{children}</div>
  );
}

// "App background" — used inside device frames
function Bg({ children, color = OLIVIA.cream, style }) {
  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: color, color: OLIVIA.ink,
      fontFamily: OLIVIA_FONT_BODY,
      ...style,
    }}>{children}</div>
  );
}

// Small inline iconography (line)
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.8, style }) {
  const sw = strokeWidth;
  const common = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth: sw,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    style,
  };
  switch (name) {
    case 'check': return (
      <svg {...common}><polyline points="4 12 10 18 20 6"/></svg>);
    case 'bell': return (
      <svg {...common}><path d="M6 8a6 6 0 1112 0c0 6 3 7 3 7H3s3-1 3-7z"/><path d="M10 21a2 2 0 004 0"/></svg>);
    case 'heart': return (
      <svg {...common}><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z"/></svg>);
    case 'book': return (
      <svg {...common}><path d="M4 4h7a3 3 0 013 3v13"/><path d="M20 4h-7a3 3 0 00-3 3v13"/></svg>);
    case 'home': return (
      <svg {...common}><path d="M4 11l8-7 8 7"/><path d="M6 10v10h12V10"/></svg>);
    case 'arrow-right': return (
      <svg {...common}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>);
    case 'arrow-left': return (
      <svg {...common}><path d="M19 12H5"/><path d="M11 6l-6 6 6 6"/></svg>);
    case 'sparkle': return (
      <svg {...common}><path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z"/></svg>);
    case 'leaf': return (
      <svg {...common}><path d="M4 20c0-8 5-13 16-14-1 11-6 16-14 16-1 0-2-1-2-2z"/><path d="M4 20l8-8"/></svg>);
    case 'sun': return (
      <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>);
    case 'plus': return (
      <svg {...common}><path d="M12 5v14M5 12h14"/></svg>);
    case 'close': return (
      <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case 'play': return (
      <svg {...common}><path d="M7 5l12 7-12 7z" fill={color}/></svg>);
    case 'gear': return (
      <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>);
    case 'flame': return (
      <svg {...common}><path d="M12 2s5 5 5 10a5 5 0 11-10 0c0-2 2-3 2-5s-1-3 0-4c0 2 3 2 3-1z"/></svg>);
    case 'chevron-right': return (
      <svg {...common}><path d="M9 6l6 6-6 6"/></svg>);
    case 'chevron-down': return (
      <svg {...common}><path d="M6 9l6 6 6-6"/></svg>);
    case 'trash': return (
      <svg {...common}><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>);
    case 'lock': return (
      <svg {...common}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>);
    case 'list': return (
      <svg {...common}><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="3" cy="6" r="1" fill={color} stroke="none"/><circle cx="3" cy="12" r="1" fill={color} stroke="none"/><circle cx="3" cy="18" r="1" fill={color} stroke="none"/></svg>);
    case 'star': return (
      <svg {...common}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>);
    case 'grip': return (
      <svg {...common} stroke="none" fill={color}>
        <circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/>
        <circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/>
        <circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>
      </svg>);
    default: return null;
  }
}

// Reusable bottom tab bar for the app
function OliviaTabBar({ active = 'home', onSelect = () => {} }) {
  const tab = (id, name, label) => {
    const on = active === id;
    return (
      <button onClick={() => onSelect(id)} style={{
        appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
        padding: '8px 12px', flex: 1,
        color: on ? OLIVIA.terra : OLIVIA.inkMute,
      }}>
        <Icon name={name} size={22} strokeWidth={on ? 2.2 : 1.8}/>
        <span style={{
          fontFamily: OLIVIA_FONT_BODY, fontSize: 11, fontWeight: on ? 600 : 500,
          letterSpacing: '0.02em',
        }}>{label}</span>
      </button>
    );
  };
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingBottom: 28, paddingTop: 10,
      background: OLIVIA.glass,
      backdropFilter: 'blur(20px) saturate(160%)',
      WebkitBackdropFilter: 'blur(20px) saturate(160%)',
      borderTop: `1px solid ${OLIVIA.hair}`,
      display: 'flex', justifyContent: 'space-around',
      zIndex: 10,
    }}>
      {tab('home', 'home', 'Today')}
      {tab('streak', 'leaf', 'Garden')}
      {tab('library', 'book', 'Library')}
      {tab('profile', 'gear', 'You')}
    </div>
  );
}

Object.assign(window, {
  OLIVIA, OLIVIA_FONT_DISPLAY, OLIVIA_FONT_BODY, setOliviaFonts,
  PrimaryButton, GhostButton, Pill, Card, Bg, Icon, OliviaTabBar,
});