// Screen: Browse library — grid of all themes

function BrowseLibrary({ vibe, setVibe, onPick, user, dates, customThemes, overrides }) {
  const ov = overrides || {};
  const applyOverride = (t) => {
    const o = ov[t.key];
    if (!o) return t;
    return {
      ...t,
      n: o.n || t.n,
      em: o.em || t.em,
      tag: o.description || t.tag,
      palette: o.palette || t.palette,
      grad: o.grad || t.grad,
    };
  };
  const builtIn = [
    { key: 'coastal',   n: 'Last Toast on the Coast', em: '🐚', grad: THEME_GRADIENTS.lasttoast, tag: 'Navy · pearls · champagne',      palette: ['#2d5d8a','#fbeee0','#e8d4c5','#f3b94a'], items: 14 },
    { key: 'fiesta',    n: 'La Fiesta',               em: '🌺', grad: THEME_GRADIENTS.fiesta,    tag: 'Marigold · mezcal · maracas',    palette: ['#f3b94a','#e05a3d','#7a4e8e'],             items: 16 },
    { key: 'nashville', n: 'Nashville Nights',        em: '🤠', grad: THEME_GRADIENTS.nashville, tag: 'Rhinestones · fringe · boots',   palette: ['#f3b94a','#e05a3d','#2a1a1f'],             items: 18 },
    { key: 'bali',      n: 'Boujee in Bali',          em: '🌴', grad: THEME_GRADIENTS.bali,      tag: 'Rattan · gold · frangipani',     palette: ['#e8b87a','#c4605a','#fbeee0'],             items: 15 },
    { key: 'apres',     n: 'Après All Night',         em: '❄️', grad: THEME_GRADIENTS.apres,     tag: 'Fur · fire · mulled wine',       palette: ['#dce4ea','#c88fa4','#2a1a1f'],             items: 12 },
    { key: 'vegas',     n: 'Vegas Baby',              em: '🎰', grad: THEME_GRADIENTS.vegas,     tag: 'Neon · feathers · late nights',  palette: ['#7a4e8e','#e05a3d','#f3b94a'],             items: 20 },
    { key: 'garden',    n: 'English Garden Party',    em: '🌹', grad: THEME_GRADIENTS.garden,    tag: 'Roses · linen · Pimms',          palette: ['#c6d4b8','#f0d4c0','#c88fa4'],             items: 13 },
    { key: 'parisian',  n: 'Parisian Affair',         em: '🥂', grad: THEME_GRADIENTS.parisian,  tag: 'Cream · ribbon · Sancerre',      palette: ['#e8d8c4','#b8939a','#2a1a1f'],             items: 11 },
  ];
  const themes = [
    ...builtIn.map(applyOverride),
    ...((customThemes || []).map(t => ({
      key: t.key,
      n: t.n || t.name,
      em: t.em || '✨',
      grad: t.grad,
      palette: t.palette || ['#e05a3d','#f3b94a','#fbeee0'],
      tag: t.description || 'Custom theme',
      description: t.description,
      items: '—',
      custom: true,
    }))),
  ];

  const pick = (t) => {
    setVibe(t);
    onPick && onPick();
  };

  return (
    <div style={{ background: TBL.cream, minHeight: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '24px 22px 10px' }}>
        <Eyebrow style={{ marginBottom: 8 }}>Library</Eyebrow>
        <div style={{ fontFamily: SERIF, fontSize: 36, lineHeight: 0.98, color: TBL.ink, letterSpacing: -1.2, marginBottom: 4 }}>
          Eight themes,
        </div>
        <div style={{ fontFamily: SERIF, fontSize: 36, lineHeight: 0.98, color: TBL.jam, letterSpacing: -1.2, fontStyle: 'italic', marginBottom: 16 }}>
          ready to remix.
        </div>
        <div style={{ fontSize: 13, color: TBL.subtle, lineHeight: 1.5, marginBottom: 4 }}>
          Tap any theme to load it. You can tweak guests, palette, and budget once it's open.
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '10px 20px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {themes.map(t => {
            const active = vibe && vibe.key === t.key;
            return (
              <button key={t.key} onClick={() => pick(t)} style={{
                background: t.grad,
                border: active ? `2px solid ${TBL.jam}` : `1px solid ${TBL.line}`,
                borderRadius: 14, padding: 14, aspectRatio: '0.78',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                color: TBL.ink, boxShadow: active ? '0 6px 20px rgba(224,90,61,0.25)' : '0 4px 14px rgba(0,0,0,0.06)',
                cursor: 'pointer', textAlign: 'left',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{ fontSize: 26 }}>{t.em}</div>
                  {active && (
                    <div style={{ width: 20, height: 20, borderRadius: 999, background: TBL.jam, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="11" height="11" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 3" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                  )}
                </div>
                <div>
                  <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 17, lineHeight: 1.05, letterSpacing: -0.3, marginBottom: 4 }}>{t.n}</div>
                  <div style={{ fontSize: 10, opacity: 0.75, marginBottom: 10 }}>{t.tag}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <PaletteDots colors={t.palette} size={9}/>
                    <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: 1, opacity: 0.8 }}>{t.items} items</div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BrowseLibrary });