// W2Go shared UI atoms — photo placeholders, buttons, chips, navbar, etc.

const { useState, useEffect, useRef, useMemo } = React;

// ─── Photo placeholder ─────────────────────────────────────────
// Striped slot with monospace caption — drop a real product shot in later.
function Photo({ tag = 'food shot', tone = 'cream', radius = 18, height = 200, width = '100%',
                 stripes = true, scrim = false, src, alt, children, style = {} }) {
  const tones = {
    cream:    { bg: '#EFE6D6', fg: '#7A6E58', stripe: 'rgba(0,76,75,0.06)' },
    green:    { bg: '#0F5C5B', fg: '#CBE3E2', stripe: 'rgba(255,255,255,0.05)' },
    onyx:     { bg: '#1F2222', fg: '#9BA09F', stripe: 'rgba(255,255,255,0.04)' },
    charcoal: { bg: '#3B353E', fg: '#B6AEB7', stripe: 'rgba(255,255,255,0.05)' },
    warm:     { bg: '#E9D6BC', fg: '#735C3A', stripe: 'rgba(0,0,0,0.05)' },
  };
  const t = tones[tone] || tones.cream;
  return (
    <div style={{
      position: 'relative', width, height, borderRadius: radius, overflow: 'hidden',
      background: t.bg, color: t.fg, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
      ...style
    }}>
      {src ? (
        <img src={src} alt={alt || tag} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block'
        }}/>
      ) : (stripes && <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(135deg, ${t.stripe} 0 2px, transparent 2px 14px)`
      }}/>)}
      {scrim && <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55))'
      }}/>}
      {!src && (
        <div style={{
          position: 'absolute', top: 10, left: 12,
          fontFamily: 'ui-monospace, "SF Mono", monospace', fontSize: 10, letterSpacing: 0.6,
          textTransform: 'uppercase', opacity: 0.75
        }}>img · {tag}</div>
      )}
      <div style={{ position: 'relative', zIndex: 1, width: '100%' }}>{children}</div>
    </div>
  );
}

// ─── Buttons ───────────────────────────────────────────────────
function Btn({ children, kind = 'primary', size = 'lg', icon, iconRight, onClick, full, style = {}, disabled, animate = false }) {
  const sizes = {
    lg: { h: 56, px: 26, fs: 16, r: 999 },
    md: { h: 46, px: 20, fs: 14, r: 999 },
    sm: { h: 36, px: 14, fs: 13, r: 999 },
  };
  const kinds = {
    primary:  { bg: 'var(--w-onyx)',      fg: 'var(--w-cream)' },
    onyx:     { bg: 'var(--w-onyx)',      fg: 'var(--w-cream)' },
    green:    { bg: 'var(--w-green)',     fg: 'var(--w-cream)' },
    cream:    { bg: 'var(--w-cream)',     fg: 'var(--w-onyx)' },
    ghost:    { bg: 'transparent',        fg: 'var(--w-onyx)', border: '1.5px solid rgba(23,25,25,0.18)' },
    ghostInv: { bg: 'transparent',        fg: 'var(--w-cream)', border: '1.5px solid rgba(249,242,232,0.35)' },
    danger:   { bg: '#C24A2C',            fg: '#fff' },
  };
  const s = sizes[size]; const k = kinds[kind];
  return (
    <button onClick={disabled ? null : onClick} disabled={disabled} style={{
      height: s.h, borderRadius: s.r, padding: `0 ${s.px}px`, fontSize: s.fs,
      background: k.bg, color: k.fg, border: k.border || 'none',
      width: full ? '100%' : 'auto',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      fontFamily: 'inherit', fontWeight: 600, letterSpacing: 0.1, cursor: 'pointer',
      opacity: disabled ? 0.45 : 1,
      boxShadow: kind === 'primary' || kind === 'onyx' ? '0 6px 18px -8px rgba(23,25,25,0.6)' :
                 kind === 'green' ? '0 6px 18px -8px rgba(0,76,75,0.55)' : 'none',
      transition: 'transform .12s ease',
      ...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)'}>
      {icon}{children}{iconRight}
    </button>
  );
}

// ─── Chip / tag ────────────────────────────────────────────────
function Chip({ children, active, onClick, kind = 'default', style = {} }) {
  const kinds = {
    default: { bg: 'rgba(23,25,25,0.06)',  fg: 'var(--w-onyx)',  abg: 'var(--w-onyx)', afg: 'var(--w-cream)' },
    green:   { bg: 'rgba(0,76,75,0.10)',   fg: 'var(--w-green)', abg: 'var(--w-green)', afg: 'var(--w-cream)' },
    cream:   { bg: 'var(--w-cream)',       fg: 'var(--w-onyx)',  abg: 'var(--w-cream)', afg: 'var(--w-onyx)' },
  };
  const k = kinds[kind];
  return (
    <button onClick={onClick} style={{
      height: 34, padding: '0 14px', borderRadius: 999, border: 'none', cursor: 'pointer',
      background: active ? k.abg : k.bg, color: active ? k.afg : k.fg,
      fontFamily: 'inherit', fontWeight: 600, fontSize: 13, letterSpacing: 0.2,
      display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', flex: 'none',
      ...style
    }}>{children}</button>
  );
}

// ─── Tiny tag (top-left of food cards) ────────────────────────
function TinyTag({ children, color = '#004C4B' }) {
  return <span style={{
    fontSize: 9.5, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase',
    color: '#F9F2E8', background: color, padding: '5px 8px 4px', borderRadius: 4,
    fontFamily: 'inherit'
  }}>{children}</span>;
}

// ─── Top bar (back / title / right) ───────────────────────────
function TopBar({ onBack, title, right, dark = false, transparent = false, style = {} }) {
  const fg = dark ? '#F9F2E8' : '#171919';
  return (
    <div style={{
      height: 52, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 14px', background: transparent ? 'transparent' : (dark ? 'var(--w-onyx)' : 'var(--w-cream)'),
      color: fg, ...style
    }}>
      <button onClick={onBack} style={{
        width: 40, height: 40, borderRadius: 999, background: transparent ? 'rgba(249,242,232,0.85)' : 'rgba(23,25,25,0.06)',
        border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#171919',
      }}><Ic.Back size={20}/></button>
      <div style={{ fontWeight: 600, fontSize: 15, letterSpacing: 0.1 }}>{title}</div>
      <div style={{ width: 40, display: 'flex', justifyContent: 'flex-end' }}>{right}</div>
    </div>
  );
}

// ─── Bottom tab bar ───────────────────────────────────────────
function TabBar({ active, onChange, badge = 0 }) {
  const tabs = [
    { id: 'home',    label: 'Home',    icon: Ic.Home },
    { id: 'search',  label: 'Browse',  icon: Ic.Search },
    { id: 'cart',    label: 'Bag',     icon: Ic.Bag, badge },
    { id: 'orders',  label: 'Orders',  icon: Ic.Receipt },
    { id: 'account', label: 'You',     icon: Ic.User },
  ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingTop: 8, paddingBottom: 28, background: 'rgba(249,242,232,0.92)',
      backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
      borderTop: '0.5px solid rgba(23,25,25,0.08)',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center', zIndex: 5
    }}>
      {tabs.map(t => {
        const isActive = active === t.id;
        const I = t.icon;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer', position: 'relative',
            color: isActive ? 'var(--w-green)' : 'rgba(23,25,25,0.45)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            padding: '6px 12px', fontFamily: 'inherit', fontSize: 10.5, fontWeight: 600, letterSpacing: 0.3,
          }}>
            <div style={{ position: 'relative' }}>
              <I size={24} stroke={isActive ? 2 : 1.6}/>
              {t.badge > 0 && <span style={{
                position: 'absolute', top: -4, right: -8, minWidth: 16, height: 16, padding: '0 4px',
                background: 'var(--w-green)', color: 'var(--w-cream)', borderRadius: 999,
                fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}>{t.badge}</span>}
            </div>
            <span>{t.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ─── Bottom CTA dock ──────────────────────────────────────────
function BottomDock({ children, dark = false, style = {} }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      padding: '16px 18px 34px', background: dark ? 'var(--w-onyx)' : 'var(--w-cream)',
      borderTop: dark ? '0.5px solid rgba(255,255,255,0.06)' : '0.5px solid rgba(23,25,25,0.06)',
      zIndex: 5, ...style
    }}>{children}</div>
  );
}

// ─── W2GO wordmark ────────────────────────────────────────────
// Bold sans, all-caps, condensed — echoes the real W2GO mark
// where "2" sits on the same baseline as W and GO.
function Wordmark({ size = 40, color = '#F9F2E8', sub = 'CRAFTED BY W DOHA' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color, fontFamily: 'inherit', textAlign: 'center' }}>
      <div style={{
        fontWeight: 900, fontSize: size, letterSpacing: -size * 0.04, lineHeight: 1,
        display: 'flex', alignItems: 'baseline', justifyContent: 'center'
      }}>
        W<span style={{ display: 'inline-block', transform: 'translateY(-0.01em)' }}>2</span>GO
      </div>
      {sub && <div style={{
        fontSize: Math.max(9, size * 0.13),
        letterSpacing: size * 0.10, marginTop: size * 0.22, opacity: 0.78, fontWeight: 600,
        whiteSpace: 'nowrap'
      }}>{sub}</div>}
    </div>
  );
}

// ─── Scroll-area utility (auto bottom padding) ────────────────
function Scroll({ children, pad = 120, style = {} }) {
  return (
    <div style={{
      flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingBottom: pad,
      WebkitOverflowScrolling: 'touch', ...style
    }}>{children}</div>
  );
}

Object.assign(window, { Photo, Btn, Chip, TinyTag, TopBar, TabBar, BottomDock, Wordmark, Scroll });