// Reusable UI primitives — bottom tab bar, floating preview chrome, sheets, etc.

function Card({ children, style = {}, t }) {
  return (
    <div style={{
      background: t.surface, borderRadius: 18, padding: 16,
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
      ...style,
    }}>{children}</div>
  );
}

function PillToggle({ options, value, onChange, t }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: `repeat(${options.length}, 1fr)`,
      gap: 8, padding: 0,
    }}>
      {options.map(opt => {
        const active = value === opt;
        return (
          <button key={opt} onClick={() => onChange(opt)} style={{
            border: 'none', cursor: 'pointer',
            padding: '14px 0', borderRadius: 999,
            background: active ? t.primary : t.surface3,
            color: active ? t.onPrimary : t.text,
            fontSize: 15, fontWeight: 600,
            fontFamily: 'inherit',
            transition: 'all .2s',
          }}>{opt}</button>
        );
      })}
    </div>
  );
}

// Floating top chrome — back / Coach Switcher / theme / Client App Preview
function PreviewChrome({ dark, setDark, onCoachSwitch, coach }) {
  const bg = dark ? 'rgba(40,40,44,0.85)' : 'rgba(255,255,255,0.85)';
  const text = dark ? '#fff' : '#111';
  const muted = dark ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.55)';
  const pill = (children, onClick, style = {}) => (
    <button onClick={onClick} style={{
      height: 30, padding: '0 11px', border: 'none',
      borderRadius: 999, background: bg,
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      boxShadow: '0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06)',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      color: text, fontSize: 12, fontWeight: 600, cursor: 'pointer',
      fontFamily: 'inherit',
      ...style,
    }}>{children}</button>
  );
  return (
    <div style={{
      position: 'absolute', top: 56, left: 0, right: 0, zIndex: 40,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '0 10px', pointerEvents: 'none',
    }}>
      <div style={{ display: 'flex', gap: 6, pointerEvents: 'auto' }}>
        {pill(
          dark
            ? <Icon.Sun size={14} color={text}/>
            : <Icon.Moon size={14} color={text}/>,
          () => setDark(!dark),
          { padding: '0 9px' }
        )}
      </div>
    </div>
  );
}

// Bottom tab bar
function TabBar({ active, setActive, t }) {
  const tabs = [
    { id: 'home',      label: 'Home',      Icon: Icon.Home },
    { id: 'workouts',  label: 'Workouts',  Icon: Icon.Workouts },
    { id: 'nutrition', label: 'Nutrition', Icon: Icon.Nutrition },
    { id: 'chat',      label: 'Chat',      Icon: Icon.Chat },
    { id: 'profile',   label: 'Profile',   Icon: Icon.Profile },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: t.surface,
      borderTop: `1px solid ${t.border}`,
      paddingBottom: 24, paddingTop: 8,
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
    }}>
      {tabs.map(tab => {
        const isActive = active === tab.id;
        return (
          <button key={tab.id} onClick={() => setActive(tab.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            gap: 4, padding: '6px 0', fontFamily: 'inherit',
          }}>
            {isActive ? (
              <div style={{
                width: 38, height: 38, borderRadius: 999,
                background: t.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <tab.Icon size={20} color={t.onPrimary}/>
              </div>
            ) : (
              <div style={{ height: 38, display: 'flex', alignItems: 'center' }}>
                <tab.Icon size={22} color={t.textMuted}/>
              </div>
            )}
            <div style={{
              fontSize: 11, fontWeight: 500,
              color: isActive ? t.text : t.textMuted,
            }}>{tab.label}</div>
          </button>
        );
      })}
    </div>
  );
}

// Floating Action Button — sticky to the bottom of the scroll area so it
// rides with the content (avoids overlapping cards mid-scroll).
function FAB({ onClick, t, menu }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      position: 'sticky', bottom: 90, zIndex: 25,
      display: 'flex', justifyContent: 'flex-end',
      padding: '0 20px',
      pointerEvents: 'none',
      marginTop: -54,
    }}>
      {open && menu && (
        <div style={{
          position: 'absolute', bottom: 66, right: 20,
          background: t.surface, borderRadius: 14, padding: 6,
          boxShadow: '0 12px 32px rgba(0,0,0,0.18)', border: `1px solid ${t.border}`,
          display: 'flex', flexDirection: 'column', minWidth: 160,
          pointerEvents: 'auto',
          animation: 'fadeIn .15s ease',
        }}>
          {menu.map((m, i) => (
            <button key={i} onClick={() => { setOpen(false); m.onClick(); }} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '10px 12px', borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'inherit', textAlign: 'left',
              color: t.text, fontSize: 13, fontWeight: 600,
            }}>
              {m.icon}<span>{m.label}</span>
            </button>
          ))}
        </div>
      )}
      <button onClick={onClick || (() => setOpen(o => !o))} style={{
        width: 54, height: 54, borderRadius: 999,
        background: t.primary, border: 'none', cursor: 'pointer',
        boxShadow: '0 8px 24px rgba(0,0,0,0.18)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'auto',
        transform: open ? 'rotate(45deg)' : 'none',
        transition: 'transform .2s',
      }}>
        <Icon.Plus size={24} color={t.onPrimary}/>
      </button>
    </div>
  );
}

// Header within content area: hamburger, avatar, greeting, action icons
function ContentHeader({ t, coach, greeting = true, leftStyle = 'menu', onMenu, onCommunity, onNotifications }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '110px 18px 16px' }}>
      {leftStyle === 'menu' && (
        <button onClick={onMenu} style={{
          background: 'none', border: 'none', padding: 0, marginRight: 12, cursor: 'pointer',
        }}><Icon.Menu color={t.text}/></button>
      )}
      {greeting && (
        <>
          <div style={{
            width: 44, height: 44, borderRadius: 999,
            background: `linear-gradient(135deg, ${t.primarySoft}, ${t.primary})`,
            marginRight: 12, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: t.onPrimary, fontWeight: 700, fontSize: 16,
            overflow: 'hidden',
          }}>{coach.coach.split(' ').map(n => n[0]).join('').slice(0, 2)}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: t.text, lineHeight: 1.1 }}>
              Hello, {coach.coach.split(' ')[0]} <span style={{ fontSize: 16 }}>👋</span>
            </div>
            <div style={{ fontSize: 12, color: t.textMuted, marginTop: 2 }}>Today Sep 10</div>
          </div>
        </>
      )}
      {!greeting && <div style={{ flex: 1 }}/>}
      <div style={{ display: 'flex', gap: 8 }}>
        <button onClick={onCommunity} style={{
          position: 'relative', border: 'none', cursor: 'pointer',
          width: 36, height: 36, borderRadius: 999, background: t.primarySoft,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Users size={17} color={t.primary}/>
          <div style={{
            position: 'absolute', top: -2, right: -2,
            background: t.primary, color: t.onPrimary,
            fontSize: 10, fontWeight: 700, borderRadius: 999,
            minWidth: 16, height: 16, padding: '0 4px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `2px solid ${t.surface}`,
          }}>3</div>
        </button>
        <button onClick={onNotifications} style={{
          width: 36, height: 36, borderRadius: 999, background: t.surface3, border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          position: 'relative',
        }}>
          <Icon.Bell size={16} color={t.text}/>
          <div style={{
            position: 'absolute', top: 6, right: 8, width: 8, height: 8, borderRadius: 999,
            background: t.primary, border: `2px solid ${t.surface3}`,
          }}/>
        </button>
      </div>
    </div>
  );
}

// Coach switcher sheet
function CoachSheet({ open, onClose, coach, setCoach, presets, t }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 100,
      background: 'rgba(0,0,0,0.45)',
      display: 'flex', alignItems: 'flex-end',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: t.surface, width: '100%', borderRadius: '24px 24px 0 0',
        padding: '12px 18px 32px',
        animation: 'slideUp .25s ease',
      }}>
        <div style={{
          width: 36, height: 4, background: t.textDim, borderRadius: 2,
          margin: '4px auto 14px',
        }}/>
        <div style={{ fontSize: 18, fontWeight: 700, color: t.text, marginBottom: 4 }}>
          Switch coach brand
        </div>
        <div style={{ fontSize: 13, color: t.textMuted, marginBottom: 16 }}>
          Preview the white-label across different coach brand kits.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {presets.map(p => {
            const active = coach.id === p.id;
            return (
              <button key={p.id} onClick={() => { setCoach(p); onClose(); }} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: 12, borderRadius: 14,
                border: `1.5px solid ${active ? p.primary : t.border}`,
                background: active ? t.primarySoft : t.surface2,
                cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10,
                  background: p.primary, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 14, letterSpacing: -0.5,
                  fontFamily: p.font,
                }}>{p.name[0]}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: t.textMuted }}>{p.handle} · {p.coach}</div>
                </div>
                <div style={{
                  display: 'flex', gap: 4,
                }}>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: p.primary }}/>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: p.secondary }}/>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// Map food/recipe keywords → real Unsplash image URLs (fixed, curated)
const FOOD_IMG = {
  oats:              'https://images.unsplash.com/photo-1517673132405-a56a62b18caf?w=600&q=70&auto=format&fit=crop',
  eggs:              'https://images.unsplash.com/photo-1525351484163-7529414344d8?w=600&q=70&auto=format&fit=crop',
  apple:             'https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?w=600&q=70&auto=format&fit=crop',
  chicken:           'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?w=600&q=70&auto=format&fit=crop',
  'grilled chicken': 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?w=600&q=70&auto=format&fit=crop',
  poke:              'https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=600&q=70&auto=format&fit=crop',
  'poke bowl':       'https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=600&q=70&auto=format&fit=crop',
  rice:              'https://images.unsplash.com/photo-1536304993881-ff6e9eefa2a6?w=600&q=70&auto=format&fit=crop',
  veggies:           'https://images.unsplash.com/photo-1540420773420-3366772f4999?w=600&q=70&auto=format&fit=crop',
  shake:             'https://images.unsplash.com/photo-1553530666-ba11a7da3888?w=600&q=70&auto=format&fit=crop',
  smoothie:          'https://images.unsplash.com/photo-1553530666-ba11a7da3888?w=600&q=70&auto=format&fit=crop',
  almonds:           'https://images.unsplash.com/photo-1508061253366-f7da158b6d46?w=600&q=70&auto=format&fit=crop',
  'avocado toast':   'https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?w=600&q=70&auto=format&fit=crop',
  steak:             'https://images.unsplash.com/photo-1558030006-450675393462?w=600&q=70&auto=format&fit=crop',
  pancakes:          'https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=600&q=70&auto=format&fit=crop',
  'meal plan hero':  'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=900&q=70&auto=format&fit=crop',
  'recipe hero':     'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=900&q=70&auto=format&fit=crop',
};

// Image placeholder — if `label` matches a known food keyword OR a `src` is provided,
// renders a real image. Otherwise falls back to a striped placeholder.
function ImgPlaceholder({ label, height = 160, t, dark, accent, src }) {
  const resolved = src || (label && FOOD_IMG[String(label).toLowerCase()]);
  if (resolved) {
    return (
      <div style={{
        height, borderRadius: 14, position: 'relative', overflow: 'hidden',
        background: dark ? '#1a1a1c' : '#E8DFD2',
      }}>
        <img src={resolved} alt={label || ''} loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
      </div>
    );
  }
  return (
    <div style={{
      height, borderRadius: 14, position: 'relative', overflow: 'hidden',
      background: `repeating-linear-gradient(135deg, ${dark ? '#222' : '#E8DFD2'} 0 8px, ${dark ? '#1a1a1c' : '#DDD2C0'} 8px 16px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%)`,
      }}/>
      <div style={{
        fontFamily: 'ui-monospace, SFMono-Regular, monospace',
        fontSize: 11, color: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.55)',
        background: dark ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.7)',
        padding: '4px 8px', borderRadius: 4, position: 'relative', zIndex: 1,
      }}>{label}</div>
    </div>
  );
}

Object.assign(window, { Card, PillToggle, PreviewChrome, TabBar, FAB, ContentHeader, CoachSheet, ImgPlaceholder });