// Small reusable UI bits for BreatheFlow. Dark-first but theme-aware.

function BFPill({ children, accent, muted, bg, fg, theme, style = {} }) {
  const defaultBg = bfIsLightTheme(theme) ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.07)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      fontFamily: BF_FONTS.sans, fontSize: 11, fontWeight: 500,
      letterSpacing: 0.3, textTransform: 'uppercase',
      background: bg || defaultBg,
      color: fg || muted, ...style,
    }}>{children}</span>
  );
}

function BFButton({ children, onClick, variant = 'primary', accentH = 200, theme, size = 'md', style = {}, icon }) {
  const h = size === 'lg' ? 56 : size === 'sm' ? 36 : 48;
  const pad = size === 'lg' ? '0 28px' : size === 'sm' ? '0 14px' : '0 20px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13 : 14;
  const variants = {
    primary: {
      background: bfAccentSolid(accentH),
      color: bfAccentSolidFg(),
      border: `1px solid ${theme?.line || 'rgba(255,255,255,0.12)'}`,
    },
    ghost: {
      background: theme?.cardSoft || 'rgba(255,255,255,0.04)',
      color: theme?.fg || '#fff',
      border: `1px solid ${theme?.line || 'rgba(255,255,255,0.08)'}`,
    },
    soft: {
      background: theme?.card || 'rgba(255,255,255,0.05)',
      color: theme?.fg || '#fff',
      border: `1px solid ${theme?.line || 'rgba(255,255,255,0.06)'}`,
    },
  };
  return (
    <button onClick={onClick} style={{
      height: h, padding: pad, borderRadius: 999, cursor: 'pointer',
      fontFamily: BF_FONTS.sans, fontSize: fs, fontWeight: 500,
      letterSpacing: -0.1,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      transition: 'transform .12s, filter .12s',
      ...variants[variant], ...style,
    }}>
      {icon}
      {children}
    </button>
  );
}

function BFCard({ children, theme, style = {}, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: theme.card,
      border: `1px solid ${theme.line}`,
      borderRadius: 20, padding: 16,
      fontFamily: BF_FONTS.sans, color: theme.fg,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}

// Minimal sharp-line icon set. Stroke-only, 24px grid.
const BFIcon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.6 }) => {
  const paths = {
    home:     <><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"/></>,
    flow:     <><path d="M3 12c3 0 3-4 6-4s3 4 6 4 3-4 6-4"/><path d="M3 18c3 0 3-4 6-4s3 4 6 4 3-4 6-4" opacity=".5"/></>,
    chart:    <><path d="M3 21V5m0 16h18M7 17v-6m5 6V9m5 8v-4"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06A2 2 0 1 1 4.37 16.9l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.1 4.31l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    play:     <><path d="M7 4v16l13-8z" fill="currentColor" stroke="none"/></>,
    pause:    <><path d="M7 4h4v16H7zm6 0h4v16h-4z" fill="currentColor" stroke="none"/></>,
    plus:     <><path d="M12 5v14m-7-7h14"/></>,
    sparkle:  <><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></>,
    moon:     <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
    user:     <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    close:    <><path d="M6 6l12 12M18 6L6 18"/></>,
    chevron:  <><path d="M9 6l6 6-6 6"/></>,
    check:    <><path d="M4 12l5 5L20 6"/></>,
    volume:   <><path d="M4 9v6h4l5 4V5L8 9zm12 3a4 4 0 0 0-1.2-2.8m3 6.8A8 8 0 0 0 19 12a8 8 0 0 0-1.2-4"/></>,
    volumeOff:<><path d="M4 9v6h4l5 4V5L8 9zm10 3l4 4m0-4l-4 4"/></>,
    wind:     <><path d="M3 8h9a3 3 0 1 0-3-3M3 12h15a3 3 0 1 1-3 3M3 16h9"/></>,
    target:   <><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/></>,
    flame:    <><path d="M12 3s5 4 5 9a5 5 0 0 1-10 0c0-2 1-3 2-4-1 3 1 4 2 4s-1-4 1-9z"/></>,
    bed:      <><path d="M3 18V8m0 4h18v6M7 12V9a2 2 0 0 1 2-2h2v5"/></>,
    clock:    <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    trophy:   <><path d="M8 21h8m-4-4v4m-5-17h10v5a5 5 0 0 1-10 0zM7 5H4v2a3 3 0 0 0 3 3m10-5h3v2a3 3 0 0 1-3 3"/></>,
    lock:     <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    arrow:    <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    help:     <><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 .9-1 1.7v.5"/><circle cx="12" cy="17" r=".7" fill="currentColor" stroke="none"/></>,
    heart:          <><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/></>,
    'heart-filled': <><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z" fill="currentColor"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

// Progress ring (for session timer + streak meter)
function BFProgressRing({ progress = 0, size = 40, stroke = 2.5, color = 'currentColor', track = 'rgba(255,255,255,0.1)' }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
        strokeDasharray={c} strokeDashoffset={c * (1 - progress)}
        strokeLinecap="round" transform={`rotate(-90 ${size/2} ${size/2})`} />
    </svg>
  );
}

// Tab bar — a shared control for mobile + web left rail.
// In Kids mode (active profile kind='kid'), BOLT is hidden because
// breath-hold-to-discomfort isn't appropriate for kids. Settings stays
// visible but is PIN-gated on the route side (see BFApp).
function BFTabBar({ tab, setTab, theme, accentH, compact = false, kidsMode = false }) {
  const t = (k, fallback) => (window.BFI18n ? window.BFI18n.t(k) : fallback);
  const items = [
    { id: 'home',     label: t('nav.home',     'Home'),     icon: 'home' },
    { id: 'flow',     label: t('nav.flow',     'Library'),  icon: 'flow' },
    { id: 'bolt',     label: t('nav.bolt',     'BOLT'),     icon: 'target', adultOnly: true },
    { id: 'progress', label: t('nav.progress', 'Progress'), icon: 'chart' },
    { id: 'settings', label: t('nav.settings', 'Profile'),  icon: 'user' },
  ].filter((it) => !(kidsMode && it.adultOnly));
  return (
    <div style={{
      display: 'flex',
      flexDirection: compact ? 'column' : 'row',
      justifyContent: 'space-around',
      padding: compact ? '16px 10px' : '10px 14px max(34px, calc(18px + env(safe-area-inset-bottom, 0px)))',
      gap: compact ? 4 : 0,
      background: compact ? 'transparent' : `${theme.bg}e8`,
      backdropFilter: 'blur(16px)',
      borderTop: compact ? 'none' : `1px solid ${theme.line}`,
      borderRight: compact ? `1px solid ${theme.line}` : 'none',
    }}>
      {items.map(it => {
        const active = tab === it.id;
        return (
          <button key={it.id} onClick={() => setTab(it.id)} style={{
            flex: compact ? 'none' : 1, background: 'transparent', border: 'none', cursor: 'pointer',
            padding: compact ? '14px' : '6px 4px', borderRadius: compact ? 14 : 8,
            display: 'flex', flexDirection: compact ? 'row' : 'column',
            alignItems: 'center', gap: compact ? 12 : 4,
            color: active ? bfAccentText(theme, accentH) : theme.fgFaint,
            fontFamily: BF_FONTS.sans, fontSize: 11, fontWeight: 500,
            letterSpacing: 0.2,
            justifyContent: compact ? 'flex-start' : 'center',
          }}>
            <BFIcon name={it.icon} size={compact ? 20 : 22} />
            <span style={{ fontSize: compact ? 14 : 10 }}>{it.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// Thin tag for patterns.
// `tag` is the English identity (Focus/Calm/Sleep/Balance/Energy) and also
// drives the hue. A localized display label is resolved via BFI18n using a
// flow.tag_* key derived from the tag; falls back to the raw `tag` string.
function BFPatternTag({ tag, accentH, theme }) {
  const hueByTag = { Focus: accentH, Sleep: 260, Calm: 200, Balance: 170, Energy: 45 };
  const h = hueByTag[tag] ?? accentH;
  const keyByTag = {
    Focus:   'flow.tag_focus',
    Calm:    'flow.tag_calm',
    Sleep:   'flow.tag_sleep',
    Balance: 'flow.tag_balance',
    Energy:  'flow.tag_energy',
  };
  const k = keyByTag[tag];
  const label = (k && window.BFI18n) ? (window.BFI18n.t(k) || tag) : tag;
  return (
    <span style={{
      padding: '3px 8px', borderRadius: 6, fontSize: 10, fontWeight: 600,
      letterSpacing: 0.5, textTransform: 'uppercase',
      background: bfAccentTint(theme, h, 0.14),
      color: bfAccentText(theme, h),
      fontFamily: BF_FONTS.sans,
    }}>{label}</span>
  );
}

Object.assign(window, { BFPill, BFButton, BFCard, BFIcon, BFProgressRing, BFTabBar, BFPatternTag });