// Ludilove — shared UI pieces (bottom nav, status bar-ready bits, buttons)

function LLButton({ children, onClick, variant = 'primary', style = {}, icon, size = 'md' }) {
  const base = {
    fontFamily: LL.fontBody,
    fontWeight: 600,
    letterSpacing: 0.2,
    borderRadius: 999,
    border: 'none',
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    transition: 'transform .15s ease, box-shadow .15s ease',
  };
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13, minHeight: 34 },
    md: { padding: '13px 22px', fontSize: 15, minHeight: 46 },
    lg: { padding: '16px 26px', fontSize: 17, minHeight: 54 },
  }[size];
  const variants = {
    primary: { background: LL.navyDeep, color: LL.cream, boxShadow: '0 4px 4px rgba(0,0,0,0.25)' },
    outline: { background: 'transparent', color: LL.navy, border: `2px solid ${LL.navy}` },
    ghost:   { background: 'rgba(23,70,141,0.06)', color: LL.navy },
    danger:  { background: LL.red, color: LL.cream, boxShadow: '0 4px 4px rgba(0,0,0,0.25)' },
  }[variant];
  return (
    <button onClick={onClick} style={{ ...base, ...sizes, ...variants, ...style }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
      onMouseUp={e => e.currentTarget.style.transform = ''}
      onMouseLeave={e => e.currentTarget.style.transform = ''}
    >
      {icon}{children}
    </button>
  );
}

// ──────────────────────────────────────────────────────────────
// Bottom navigation — the 4 glyphs from the mockup (compass/star,
// tickets/session, plus/add, profile)
// ──────────────────────────────────────────────────────────────
const NAV_ITEMS = [
  { id: 'home',     label: 'Accueil' },
  { id: 'discover', label: 'Découvrir' },
  { id: 'add',      label: 'Ajouter' },
  { id: 'session',  label: 'Session' },
  { id: 'profile',  label: 'Profil' },
];

function NavIcon({ id, active }) {
  const c = active ? LL.navyDeep : LL.navy;
  const op = active ? 1 : 0.78;
  switch (id) {
    case 'home':
      // Maison simple
      return (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" opacity={op}>
          <path d="M3 12 L13 3 L23 12 V22 a1 1 0 0 1 -1 1 h-5 v-7 h-4 v7 h-5 a1 1 0 0 1 -1 -1 Z"
            stroke={c} strokeWidth="2" fill="none" strokeLinejoin="round"/>
        </svg>
      );
    case 'discover':
      // The 6-pointed star / compass
      return (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" opacity={op}>
          <path d="M13 1 L15 11 L25 13 L15 15 L13 25 L11 15 L1 13 L11 11 Z" fill={c}/>
        </svg>
      );
    case 'session':
      // Ticket / cards stacked
      return (
        <svg width="28" height="22" viewBox="0 0 28 22" fill="none" opacity={op}>
          <rect x="1" y="4" width="18" height="14" rx="2" stroke={c} strokeWidth="2" fill="none"/>
          <rect x="7" y="1" width="18" height="14" rx="2" stroke={c} strokeWidth="2" fill={LL.cream}/>
        </svg>
      );
    case 'add':
      return (
        <svg width="26" height="26" viewBox="0 0 26 26" opacity={op}>
          <rect x="2" y="2" width="22" height="22" rx="5" stroke={c} strokeWidth="2" fill="none"/>
          <path d="M13 8 V 18 M 8 13 H 18" stroke={c} strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      );
    case 'profile':
      return (
        <svg width="24" height="24" viewBox="0 0 24 24" opacity={op}>
          <circle cx="12" cy="8" r="4" stroke={c} strokeWidth="2" fill="none"/>
          <path d="M3 22 C 4 16 8 14 12 14 C 16 14 20 16 21 22" stroke={c} strokeWidth="2" fill="none" strokeLinecap="round"/>
        </svg>
      );
  }
}

function BottomNav({ current, onNav }) {
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 16,
      height: 68,
      background: LL.navyDeep,
      borderRadius: 20,
      boxShadow: '0 4px 4px rgba(0,0,0,0.25)',
      display: 'flex',
      zIndex: 40,
    }}>
      {NAV_ITEMS.map(item => {
        const active = current === item.id;
        return (
          <button
            key={item.id}
            onClick={() => onNav?.(item.id)}
            style={{
              flex: 1, background: 'transparent', border: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              gap: 2, padding: 0,
              color: LL.cream,
              position: 'relative',
            }}
          >
            <div style={{
              width: 42, height: 42, borderRadius: 12,
              background: active ? LL.cream : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'background .15s ease',
            }}>
              <InvertNavIcon id={item.id} active={active} />
            </div>
          </button>
        );
      })}
    </div>
  );
}

function InvertNavIcon({ id, active }) {
  // On dark nav bar, inactive glyph = cream; active glyph = navy (inside cream pill)
  const c = active ? LL.navyDeep : LL.cream;
  switch (id) {
    case 'home':
      // Maison pleine
      return (
        <svg width="24" height="24" viewBox="0 0 26 26">
          <path d="M3 12 L13 3 L23 12 V22 a1 1 0 0 1 -1 1 h-5 v-7 h-4 v7 h-5 a1 1 0 0 1 -1 -1 Z" fill={c}/>
        </svg>
      );
    case 'discover':
      // chunky 8-point sparkle/starburst
      return (
        <svg width="24" height="24" viewBox="0 0 32 32">
          <path d="M16 0 L18.2 9.5 L24.5 2.5 L21 11 L31 9 L23 14.5 L32 17 L22 18.5 L29 25 L20 21 L22 31 L16.5 22.5 L12 32 L13 22 L4 26 L9.5 18 L0 17 L9 14.5 L2 9.5 L11 11 L8 2 L14 9 Z" fill={c}/>
        </svg>
      );
    case 'session':
      // chunky filled filmstrip / ticket stack
      return (
        <svg width="26" height="20" viewBox="0 0 32 22">
          <rect x="0" y="3" width="22" height="16" rx="3" fill={c}/>
          <rect x="9" y="0" width="22" height="16" rx="3" fill={c}/>
          <rect x="12" y="3" width="16" height="10" rx="1.5" fill={active ? LL.cream : LL.navyDeep}/>
        </svg>
      );
    case 'add':
      // filled rounded square with plus cutout
      return (
        <svg width="24" height="24" viewBox="0 0 26 26">
          <rect x="1" y="1" width="24" height="24" rx="6" fill={c}/>
          <path d="M13 7 V 19 M 7 13 H 19" stroke={active ? LL.cream : LL.navyDeep} strokeWidth="3" strokeLinecap="round"/>
        </svg>
      );
    case 'profile':
      // filled person silhouette
      return (
        <svg width="22" height="22" viewBox="0 0 24 24">
          <circle cx="12" cy="8" r="4.5" fill={c}/>
          <path d="M3 22 C 4 15.5 8 13 12 13 C 16 13 20 15.5 21 22 Z" fill={c}/>
        </svg>
      );
  }
}

// No-op in production — the OS draws the real status bar. We keep the
// component so existing screens can still mount <StatusBar/> unchanged.
function StatusBar() {
  return <div style={{ height: 12 }} />;
}

function Screen({ children, style = {} }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: LL.cream,
      position: 'relative',
      fontFamily: LL.fontBody,
      overflow: 'hidden',
      ...style,
    }}>
      {children}
    </div>
  );
}

function ScreenBody({ children, style = {}, padBottom = 104, padTop = 0 }) {
  return (
    <div style={{
      position: 'absolute', top: 12 + padTop, bottom: 0, left: 0, right: 0,
      overflow: 'auto',
      paddingBottom: padBottom,
      ...style,
    }}>
      {children}
    </div>
  );
}

// A pill input styled like the mockup — navy stroke, cream fill, drop shadow
function OutlineField({ label, value, onChange, type = 'text', placeholder, rounded = 18 }) {
  return (
    <label style={{
      display: 'block',
      height: 52,
      borderRadius: rounded,
      border: `2px solid ${LL.navy}`,
      background: LL.cream,
      boxShadow: '0 4px 4px rgba(0,0,0,0.15)',
      display: 'flex', alignItems: 'center',
      padding: '0 20px',
      color: LL.navy,
      fontFamily: LL.fontBody,
      fontSize: 15,
    }}>
      {label && <span style={{ whiteSpace: 'nowrap' }}>{label}</span>}
      <input
        type={type}
        value={value || ''}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          flex: 1, border: 'none', outline: 'none', background: 'transparent',
          fontFamily: 'inherit', fontSize: 15, color: LL.navy,
          marginLeft: label ? 4 : 0,
        }}
      />
    </label>
  );
}

function SectionTitle({ children, icon, style = {} }) {
  return (
    <h2 style={{
      fontFamily: LL.fontDisplay,
      fontSize: 32, fontWeight: 800,
      color: LL.navyInk,
      margin: '6px 0 14px',
      letterSpacing: 0.2,
      display: 'flex', alignItems: 'center', gap: 10,
      ...style,
    }}>
      {icon}{children}
    </h2>
  );
}

// 6-pointed spark used as a bullet / accent — lifted straight from the SVG
function SparkIcon({ size = 14, color = LL.navy }) {
  return (
    <svg width={size} height={size + 3} viewBox="0 0 22 25" fill={color}>
      <path d="M11 0 C 11.3 5 15 7 22 8 C 15 9 11.3 11 11 16 C 10.7 11 7 9 0 8 C 7 7 10.7 5 11 0 Z"/>
      <path d="M11 13 C 11.2 19 15 21 22 22 C 15 23 11.2 25 11 25 C 10.8 23 7 21 0 22 C 7 21 10.8 19 11 13 Z" opacity="0"/>
    </svg>
  );
}

// Floating ambient music player — pause-by-default, looped, volume slider.
// Used during a game (ScoreScreen) and on the rules screen so the table has
// a discreet classical soundtrack.
function AudioPlayer({ src, label }) {
  const audioRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [volume, setVolume] = React.useState(0.4);
  const [open, setOpen] = React.useState(false);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    if (audioRef.current) audioRef.current.volume = volume;
  }, [volume]);

  React.useEffect(() => {
    // Stop playback when src changes / on unmount
    setPlaying(false);
    setError(false);
    return () => {
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current.currentTime = 0;
      }
    };
  }, [src]);

  function toggle() {
    const a = audioRef.current;
    if (!a) return;
    if (playing) { a.pause(); setPlaying(false); }
    else {
      a.play().then(() => setPlaying(true)).catch((e) => { setError(true); console.warn('audio:', e.message); });
    }
  }

  if (!src) return null;

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '8px 10px 8px 12px', borderRadius: 999,
      background: LL.cream, border: `1.5px solid ${LL.navy}`,
      boxShadow: '0 4px 12px rgba(14,47,99,0.18)',
      maxWidth: '100%',
    }}>
      <audio ref={audioRef} src={src} loop preload="none"
        onError={() => setError(true)} />
      <button onClick={toggle} aria-label={playing ? 'Pause' : 'Lecture'} style={{
        width: 36, height: 36, borderRadius: '50%', border: 'none',
        background: error ? LL.muted : LL.navy, color: LL.cream, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, padding: 0,
      }}>
        {playing ? (
          <svg width="12" height="12" viewBox="0 0 12 12">
            <rect x="2" y="1" width="3" height="10" fill={LL.cream}/>
            <rect x="7" y="1" width="3" height="10" fill={LL.cream}/>
          </svg>
        ) : (
          <svg width="12" height="12" viewBox="0 0 12 12">
            <path d="M2 1 L11 6 L2 11 Z" fill={LL.cream}/>
          </svg>
        )}
      </button>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: LL.fontBody, fontSize: 11, color: LL.muted,
          letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 600,
        }}>{error ? 'Lecture indisponible' : 'Ambiance'}</div>
        <div style={{
          fontFamily: LL.fontBody, fontSize: 12.5, color: LL.navyInk, fontWeight: 600,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{label || 'Musique classique'}</div>
      </div>
      <button onClick={() => setOpen(o => !o)} aria-label="Volume" style={{
        width: 28, height: 28, borderRadius: '50%', border: `1.5px solid ${LL.navy}`,
        background: 'transparent', cursor: 'pointer', flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
      }}>
        <svg width="13" height="13" viewBox="0 0 16 16">
          <path d="M2 6 H5 L9 2 V14 L5 10 H2 Z" fill={LL.navy}/>
          {volume > 0.01 && <path d="M11 5 Q13 8 11 11" stroke={LL.navy} strokeWidth="1.5" fill="none" strokeLinecap="round"/>}
          {volume > 0.5  && <path d="M13 3 Q16 8 13 13" stroke={LL.navy} strokeWidth="1.5" fill="none" strokeLinecap="round"/>}
        </svg>
      </button>
      {open && (
        <div style={{ position: 'absolute', bottom: 'calc(100% + 8px)', right: 0,
          background: LL.cream, border: `1.5px solid ${LL.navy}`, borderRadius: 14,
          padding: '10px 12px', boxShadow: '0 6px 18px rgba(14,47,99,0.25)',
          width: 160,
        }}>
          <input type="range" min="0" max="1" step="0.05" value={volume}
            onChange={(e) => setVolume(parseFloat(e.target.value))}
            style={{
              width: '100%', height: 6, borderRadius: 999, outline: 'none',
              background: `linear-gradient(90deg, ${LL.navy} 0 ${volume*100}%, ${LL.creamDark} ${volume*100}% 100%)`,
            }}
          />
        </div>
      )}
    </div>
  );
}

// Modal confirmation — used for destructive actions (delete from library, etc).
function ConfirmDialog({ title, message, confirmLabel = 'Confirmer', cancelLabel = 'Annuler', onConfirm, onCancel, danger }) {
  return (
    <div onClick={onCancel} style={{
      position: 'absolute', inset: 0, zIndex: 200,
      background: 'rgba(14,47,99,0.55)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 22,
      animation: 'll-fade-in .18s ease',
    }}>
      <style>{`@keyframes ll-fade-in { from { opacity: 0 } to { opacity: 1 } }
        @keyframes ll-pop { from { transform: scale(.92); opacity: 0 } to { transform: scale(1); opacity: 1 } }`}</style>
      <div onClick={e => e.stopPropagation()} style={{
        background: LL.cream, borderRadius: 22,
        border: `2px solid ${LL.navy}`,
        padding: 22, width: '100%', maxWidth: 320,
        boxShadow: '0 12px 40px rgba(0,0,0,0.35)',
        animation: 'll-pop .22s cubic-bezier(.18,1.4,.4,1)',
      }}>
        <div style={{
          fontFamily: LL.fontDisplay, fontSize: 20, fontWeight: 800,
          color: LL.navyInk, marginBottom: 8,
        }}>{title}</div>
        <div style={{
          fontFamily: LL.fontBody, fontSize: 14, color: LL.mutedInk,
          lineHeight: 1.5, marginBottom: 20,
        }}>{message}</div>
        <div style={{ display: 'flex', gap: 10 }}>
          <LLButton onClick={onCancel} variant="outline" size="md" style={{ flex: 1 }}>
            {cancelLabel}
          </LLButton>
          <LLButton onClick={onConfirm} variant={danger ? 'danger' : 'primary'} size="md" style={{ flex: 1 }}>
            {confirmLabel}
          </LLButton>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  LLButton, BottomNav, NavIcon, StatusBar, Screen, ScreenBody,
  OutlineField, SectionTitle, SparkIcon, ConfirmDialog, AudioPlayer,
});