// Publications — uses SITE.publications

const FILTERS = [
  ['ALL', null],
  ['Published', 'published'],
  ['Forthcoming', 'forthcoming'],
];

const Publications = () => {
  const [filter, setFilter] = React.useState(null);
  const [open, setOpen] = React.useState(null);
  const all = SITE.publications;
  const list = filter ? all.filter(p => p.status === filter) : all;

  return (
    <section id="publications" className="section" data-screen-label="Publications">
      <div className="shell">
        <div className="reveal"><SectionHead idx="II" eyebrow="Publications & Working Papers"
          title="A continuous public record of what we are wrong and right about." numeral="II" /></div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32 }}>
          {FILTERS.map(([label, tag]) => (
            <button key={label} onClick={() => setFilter(tag)}
              style={{
                background: filter === tag ? 'var(--ink)' : 'transparent',
                color: filter === tag ? 'var(--bg)' : 'var(--ink-2)',
                border: '1px solid ' + (filter === tag ? 'var(--ink)' : 'var(--hairline-strong)'),
                padding: '7px 14px', borderRadius: 999, fontSize: 12, letterSpacing: '-0.01em',
                cursor: 'pointer',
              }}>{label}</button>
          ))}
          <div style={{ flex: 1 }} />
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', alignSelf: 'center' }}>
            {list.length} OF {all.length} · WORKING PAPER SERIES
          </span>
        </div>

        <div style={{ borderTop: '1px solid var(--hairline)' }}>
          {list.map((p, i) => {
            const isOpen = open === p.no;
            const isForth = p.status === 'forthcoming';
            return (
              <article key={p.no}
                onClick={() => setOpen(isOpen ? null : p.no)}
                style={{
                  borderBottom: '1px solid var(--hairline)',
                  padding: '24px 0', cursor: 'pointer',
                }}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '120px 110px 1fr 160px 140px',
                  gap: 24, alignItems: 'baseline',
                }} className="paper-row">
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{p.no}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{p.date}</div>
                  <div>
                    <div className="serif" style={{
                      fontSize: 22, lineHeight: 1.25,
                      color: isForth ? 'var(--ink-3)' : 'var(--ink)',
                      letterSpacing: '-0.005em', fontWeight: 400,
                    }}>{p.title}</div>
                    <div className="serif" style={{ marginTop: 4, fontSize: 14, fontStyle: 'italic', color: 'var(--ink-3)' }}>
                      {p.subtitle}
                    </div>
                    <div className="mono" style={{ marginTop: 8, fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
                      {p.authors}
                    </div>
                  </div>
                  <div className="mono upper" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{p.domain}</div>
                  <div style={{ textAlign: 'right' }}>
                    <span className="mono" style={{
                      fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
                      padding: '4px 10px',
                      border: '1px solid ' + (isForth ? 'var(--hairline-strong)' : 'var(--accent)'),
                      color: isForth ? 'var(--ink-3)' : 'var(--accent)',
                      borderRadius: 999,
                      whiteSpace: 'nowrap',
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                    }}>
                      <span style={{
                        width: 5, height: 5, borderRadius: '50%',
                        background: isForth ? 'var(--ink-3)' : 'var(--accent)',
                        opacity: isForth ? 0.5 : 1,
                      }} />
                      {isForth ? 'Forthcoming' : 'Published'}
                    </span>
                  </div>
                </div>
                {isOpen && (
                  <div className="fade-up" style={{
                    marginTop: 18,
                    paddingLeft: 254,
                    paddingRight: 60,
                  }}>
                    <p style={{
                      margin: '0 0 12px', fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.6,
                    }}>{p.desc}</p>
                    <p className="serif" style={{
                      margin: 0, fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 780,
                    }}>{p.abstract}</p>
                    <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {p.tags.map(t => (
                        <span key={t} className="mono" style={{
                          fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                          border: '1px solid var(--hairline-strong)', padding: '4px 9px',
                          color: 'var(--ink-3)',
                        }}>{t}</span>
                      ))}
                    </div>
                    <div style={{ display: 'flex', gap: 16, marginTop: 18, flexWrap: 'wrap' }}>
                      {p.ssrnUrl ? (
                        <a className="link-arrow" href={p.ssrnUrl} target="_blank" rel="noopener noreferrer"
                          onClick={(e) => e.stopPropagation()}>Read on SSRN <ArrowSm /></a>
                      ) : (
                        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>SSRN · TBA</span>
                      )}
                    </div>
                  </div>
                )}
              </article>
            );
          })}
        </div>

        <div style={{ marginTop: 36, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14 }}>
          <a className="link-arrow" href={SITE.links.ssrn} target="_blank" rel="noopener noreferrer">
            Full author archive on SSRN <ArrowSm />
          </a>
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>SSRN · LinkedIn</span>
        </div>
      </div>
    </section>
  );
};

window.Publications = Publications;