// 3B Printing — full Paper Stock showcase page. Mirrors GalleryPage: header, intro,
// filter chips, then a grid. Reuses PaperSwatch (window export from HomePage.jsx) so the
// card here is exactly the one the home carousel shows.
function PapersPage({ lang, setLang, route, cms }) {
  const { CTAButton } = window.Ds3BPrintingDesignSystem_6b9cdf;
  const { t, Header, SectionTitle, SiteFooter, LINE_HREF } = window.Shared;
  const PaperSwatch = window.PaperSwatch;
  const papers = cms.papers;
  const footerContent = cms.sections.footer && cms.sections.footer.content;
  const papersSection = cms.sections.papers;
  const s = t[lang];

  // A paper's gsm may hold several values ("300 | 350"); each becomes its own filter chip.
  const weightsOf = (p) => String(p.gsm == null ? '' : p.gsm).split('|').map((x) => x.trim()).filter(Boolean);
  const weightTags = Array.from(new Set(papers.flatMap(weightsOf)));
  const [selected, setSelected] = React.useState(new Set());

  React.useEffect(() => { window.scrollTo(0, 0); }, []);

  const toggle = (tag) => setSelected((prev) => {
    const next = new Set(prev);
    if (next.has(tag)) next.delete(tag); else next.add(tag);
    return next;
  });

  const items = papers.filter((p) => selected.size === 0 || weightsOf(p).some((w) => selected.has(w)));
  const section = { maxWidth: 1120, margin: '0 auto', padding: 'var(--space-9) var(--space-6) var(--space-9)' };

  const chipStyle = (active) => ({
    padding: '8px 18px', borderRadius: 'var(--radius-ui)', cursor: 'pointer',
    border: `1px solid ${active ? 'var(--ink)' : 'var(--line)'}`,
    background: active ? 'var(--ink)' : 'transparent',
    color: active ? 'var(--bg-light)' : 'var(--ink-faint)',
    fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
    transition: 'all var(--duration-standard) var(--ease-standard)',
  });

  return (
    <div className="page-mobile-pad" style={{ background: 'var(--bg-light)', fontFamily: 'var(--font-body)', color: 'var(--ink)', minHeight: '100vh' }}>
      <Header lang={lang} setLang={setLang} route={route} footerContent={footerContent} />

      <window.EditSection type="papers" id={papersSection && papersSection.id}>
      <section style={section}>
        <a href={window.Shared.url('/')} style={{ display: 'inline-block', marginBottom: 'var(--space-5)', color: 'var(--ink-faint)', textDecoration: 'none', fontSize: 14 }}>
          {s.backHome}
        </a>
        <SectionTitle lang={lang}>{s.papersPageTitle}</SectionTitle>
        <p style={{
          margin: '0 0 var(--space-6)', maxWidth: 620, fontSize: 'var(--text-body-size)',
          lineHeight: lang === 'th' ? 'var(--leading-body-thai)' : 'var(--leading-body)', color: 'var(--ink-soft)',
        }}>{s.papersPageSub}</p>

        {weightTags.length > 1 && (
          <div style={{ marginBottom: 'var(--space-6)' }}>
            <div style={{ fontSize: 14, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--ink-faint)', marginBottom: 'var(--space-2)' }}>
              {s.filterWeight}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)' }}>
              <button onClick={() => setSelected(new Set())} style={chipStyle(selected.size === 0)}>{s.filterAll}</button>
              {weightTags.map((tag) => (
                <button key={tag} onClick={() => toggle(tag)} style={chipStyle(selected.has(tag))}>{tag} {s.paperWeight}</button>
              ))}
            </div>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--space-5)' }}>
          {items.map((paper) => (
            <window.EditItem key={paper.id} table="papers" id={paper.id}>
              <PaperSwatch paper={paper} lang={lang} />
            </window.EditItem>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'var(--space-8)' }}>
          <CTAButton href={LINE_HREF} size="lg">{s.cta}</CTAButton>
        </div>
      </section>
      </window.EditSection>

      <SiteFooter lang={lang} footer={footerContent} />
    </div>
  );
}

window.PapersPage = PapersPage;