/* ============================================================
   Library catalog data + Library page
   ============================================================ */

const LIBRARY = [
  { slug: 'o-que-sao-derivativos', tag: 'Conceito', tema: 'Fundamentos', nivel: 'Iniciante', tipo: 'Post',
    title: 'O que são derivativos, afinal?',
    desc: 'Uma definição rigorosa, partindo do conceito de contrato a termo e construindo até os contratos exóticos.',
    meta: ['12 min · Leitura', 'Iniciante'], date: '2026-05-10' },
  { slug: 'hedge-cafe-arabica', tag: 'Caso prático', tema: 'Agropecuário', nivel: 'Intermediário', tipo: 'Post',
    title: 'Hedge de safra: produtor de café arábica em Minas Gerais',
    desc: 'Como um produtor estrutura proteção contra queda de preço usando contratos futuros e opções de venda.',
    meta: ['18 min · Caso', 'Agro'], date: '2026-05-08' },
  { slug: 'cupom-cambial-2026', tag: 'Análise', tema: 'Câmbio', nivel: 'Avançado', tipo: 'Post',
    title: 'O cupom cambial e a estrutura a termo da curva de juros em dólar',
    desc: 'Como o mercado precifica o diferencial de juros via DDI, FRC e curva de cupom cambial.',
    meta: ['25 min · Análise', 'Avançado'], date: '2026-05-02' },
  { slug: 'intro-derivativos', tag: 'Vídeo-aula', tema: 'Fundamentos', nivel: 'Iniciante', tipo: 'Aula',
    title: 'Introdução aos derivativos — aula 1 de 8',
    desc: 'Definição, finalidade econômica e tipologia. Primeira aula da trilha introdutória.',
    meta: ['28 min · Vídeo', 'Trilha base'], date: '2026-04-28' },
  { slug: 'opcoes-europeias-vs-americanas', tag: 'Conceito', tema: 'Opções', nivel: 'Intermediário', tipo: 'Post',
    title: 'Opções europeias vs. americanas: por que a diferença importa',
    desc: 'Quando o exercício antecipado tem valor, e por que isso afeta o prêmio. Caso prático com puts sobre ações.',
    meta: ['14 min · Conceito', 'Opções'], date: '2026-04-25' },
  { slug: 'ddm-vs-dol', tag: 'Operacional', tema: 'Câmbio', nivel: 'Intermediário', tipo: 'Post',
    title: 'WDO e DOL: diferenças operacionais, custos e liquidez',
    desc: 'Comparação prática entre os dois contratos futuros de dólar da B3, com foco em uso por pessoa física.',
    meta: ['10 min · Prático', 'Câmbio'], date: '2026-04-20' },
  { slug: 'modelo-bs-derivacao', tag: 'Quant', tema: 'Modelagem', nivel: 'Avançado', tipo: 'Post',
    title: 'A derivação do modelo de Black-Scholes em sete passos',
    desc: 'Da hipótese de movimento browniano à equação diferencial parcial — sem pular passagens.',
    meta: ['35 min · Quant', 'Avançado'], date: '2026-04-12' },
  { slug: 'boi-gordo-2026', tag: 'Mercado', tema: 'Agropecuário', nivel: 'Intermediário', tipo: 'Post',
    title: 'Boi gordo: curva futura e expectativa de oferta para 2026/2027',
    desc: 'Análise da curva BGI da B3 e leitura econômica das expectativas de oferta e demanda.',
    meta: ['16 min · Mercado', 'Agro'], date: '2026-04-08' },
  { slug: 'swaps-introducao', tag: 'Conceito', tema: 'Juros', nivel: 'Intermediário', tipo: 'Post',
    title: 'Swaps no Brasil: pré × CDI, IPCA × pré e o mercado de balcão',
    desc: 'O que são swaps, como funcionam e por que o mercado brasileiro tem características próprias.',
    meta: ['20 min · Conceito', 'Juros'], date: '2026-04-02' },
  { slug: 'volatilidade-implicita', tag: 'Quant', tema: 'Opções', nivel: 'Avançado', tipo: 'Aula',
    title: 'Volatilidade implícita e o smile do mercado brasileiro',
    desc: 'Aula em vídeo sobre superfícies de volatilidade implícita observadas no mercado de opções local.',
    meta: ['42 min · Vídeo', 'Quant'], date: '2026-03-28' },
  { slug: 'agro-derivativos-clima', tag: 'Pesquisa', tema: 'Clima', nivel: 'Avançado', tipo: 'Post',
    title: 'Derivativos climáticos no agronegócio brasileiro: o que existe e o que falta',
    desc: 'Panorama dos contratos climáticos disponíveis e perspectivas para o mercado nacional.',
    meta: ['28 min · Pesquisa', 'Clima'], date: '2026-03-20' },
  { slug: 'futuros-energia', tag: 'Mercado', tema: 'Energia', nivel: 'Intermediário', tipo: 'Post',
    title: 'Derivativos de energia elétrica: PLD, futuros e o papel da CCEE',
    desc: 'Como o mercado de eletricidade no Brasil se relaciona com instrumentos derivativos.',
    meta: ['22 min · Mercado', 'Energia'], date: '2026-03-15' },
];

function BibliotecaPage() {
  const { params } = useHashRoute();
  const [tema, setTema] = useState(params.tema || 'Todos');
  const [tipo, setTipo] = useState(params.tipo || 'Todos');
  const [nivel, setNivel] = useState(params.nivel || 'Todos');
  const [q, setQ] = useState('');

  const temas = ['Todos', ...Array.from(new Set(LIBRARY.map(i => i.tema)))];
  const tipos = ['Todos', 'Post', 'Aula'];
  const niveis = ['Todos', 'Iniciante', 'Intermediário', 'Avançado'];

  const filtered = LIBRARY.filter(it => {
    if (tema !== 'Todos' && it.tema !== tema) return false;
    if (tipo !== 'Todos' && it.tipo !== tipo) return false;
    if (nivel !== 'Todos' && it.nivel !== nivel) return false;
    if (q && !(it.title + ' ' + it.desc).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  }).sort((a, b) => b.date.localeCompare(a.date));

  return (
    <Page>
      <section style={{padding: 'var(--s-7) 0 var(--s-5)', borderBottom: '1px solid var(--rule)'}}>
        <div className="container">
          <div className="crumb" style={{marginBottom: 'var(--s-4)'}}>
            <a href="#/">Início</a>
            <span className="crumb-sep"></span>
            <span>Biblioteca</span>
          </div>
          <div style={{display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--s-7)', alignItems: 'end'}}>
            <div>
              <div className="eyebrow eyebrow-accent">Acervo editorial · {LIBRARY.length} títulos</div>
              <h1 style={{fontSize: 'clamp(2rem, 4vw, 3.25rem)', fontWeight: 400, letterSpacing: '-0.02em', marginTop: 'var(--s-3)'}}>
                Biblioteca
              </h1>
              <p style={{color: 'var(--fg-muted)', maxWidth: '60ch', marginTop: 'var(--s-3)'}}>
                Posts conceituais, casos práticos, notas técnicas e vídeo-aulas sobre derivativos
                financeiros, agropecuários e de commodities.
              </p>
            </div>
            <div style={{minWidth: 280}}>
              <input
                className="form-input"
                placeholder="Buscar por título ou tema…"
                value={q}
                onChange={e => setQ(e.target.value)}
              />
            </div>
          </div>
        </div>
      </section>

      <section style={{padding: 'var(--s-5) 0', borderBottom: '1px solid var(--rule)', background: 'var(--bg-elev)'}}>
        <div className="container" style={{display: 'flex', gap: 'var(--s-6)', flexWrap: 'wrap'}}>
          <FilterRow label="Tema" options={temas} value={tema} onChange={setTema} />
          <FilterRow label="Formato" options={tipos} value={tipo} onChange={setTipo} />
          <FilterRow label="Nível" options={niveis} value={nivel} onChange={setNivel} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="mono" style={{color: 'var(--fg-muted)', fontSize: 11, marginBottom: 'var(--s-5)'}}>
            {filtered.length} resultado{filtered.length !== 1 ? 's' : ''}
          </div>
          {filtered.length === 0 ? (
            <div className="notice notice-warn">
              <div>
                <strong>Nenhum resultado encontrado.</strong> Tente ampliar os filtros ou limpar a busca.
              </div>
            </div>
          ) : (
            <div className="card-grid">
              {filtered.map(it => (
                <Link key={it.slug} to={(it.tipo === 'Aula' ? '/aula/' : '/post/') + it.slug} className="card">
                  <div className="card-tag">{it.tag}</div>
                  <h3>{it.title}</h3>
                  <div className="card-desc">{it.desc}</div>
                  <div className="card-meta">
                    {it.meta.map(m => <span key={m}>{m}</span>)}
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>
    </Page>
  );
}

function FilterRow({ label, options, value, onChange }) {
  return (
    <div style={{display: 'flex', gap: 'var(--s-3)', alignItems: 'center', flexWrap: 'wrap'}}>
      <span className="eyebrow" style={{fontSize: 10}}>{label}</span>
      <div className="pill-row">
        {options.map(o => (
          <button key={o} className={'pill' + (value === o ? ' active' : '')}
                  style={{cursor: 'pointer'}}
                  onClick={() => onChange(o)}>
            {o}
          </button>
        ))}
      </div>
    </div>
  );
}

window.BibliotecaPage = BibliotecaPage;
window.LIBRARY = LIBRARY;