const ScreenBiblioteca = () => {
  const { biblioteca } = VELYX;
  const [cat, setCat] = React.useState('todos');
  const [q, setQ] = React.useState('');
  const [copied, setCopied] = React.useState(null);

  const cats = [
    ['todos','Todos', biblioteca.length],
    ['prompts','Prompts', biblioteca.filter(b => b.cat==='prompts').length],
    ['templates','Templates', biblioteca.filter(b => b.cat==='templates').length],
    ['frameworks','Frameworks', biblioteca.filter(b => b.cat==='frameworks').length],
    ['checklists','Checklists', biblioteca.filter(b => b.cat==='checklists').length],
  ];

  const items = biblioteca.filter(b => (cat === 'todos' || b.cat === cat) && (q === '' || (b.title + b.desc).toLowerCase().includes(q.toLowerCase())));

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="07 Biblioteca">
      <PageHeader
        eyebrow="Artefatos"
        title="Biblioteca"
        desc="Prompts, templates, frameworks e checklists pra copiar, adaptar e usar no seu fluxo hoje."
      />

      {/* Search */}
      <div className="mb-5 relative">
        <I.search size={15} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-mute2"/>
        <input value={q} onChange={e => setQ(e.target.value)}
          placeholder="Buscar por título, tipo, tag..."
          className="w-full h-11 pl-10 pr-4 rounded-[8px] bg-panel hairline text-ink text-[13.5px] placeholder:text-mute2 focus:outline-none focus:shadow-[inset_0_0_0_1px_#D8FF3C]"/>
      </div>

      {/* Categories */}
      <div className="flex items-center gap-1.5 mb-6">
        {cats.map(([id, label, count]) => (
          <button key={id} onClick={() => setCat(id)}
            className={`h-8 px-3.5 rounded-[6px] text-[12.5px] t-fast flex items-center gap-2
              ${cat === id ? 'bg-white/[0.08] text-ink hairline2' : 'text-mute hover:text-ink hover:bg-white/[0.04]'}`}>
            {label}
            <span className="font-mono text-[10.5px] text-mute2">{count}</span>
          </button>
        ))}
        <div className="ml-auto text-mute2 text-[11.5px] font-mono">{items.length} resultados</div>
      </div>

      {/* Items */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
        {items.map(it => (
          <Card key={it.id} className="p-5 group">
            <div className="flex items-start justify-between mb-3">
              <Badge tone="neutral">{it.type}</Badge>
              <span className="font-mono text-[10.5px] text-mute2 uppercase">.{it.fmt}</span>
            </div>
            <h3 className="text-[15.5px] font-semibold text-ink tracking-tightest leading-snug mb-1.5">{it.title}</h3>
            <p className="text-mute text-[13px] leading-relaxed mb-5 line-clamp-2">{it.desc}</p>
            <div className="flex items-center gap-2">
              <Button variant="secondary" size="sm" icon={<I.copy size={12}/>}
                onClick={() => { setCopied(it.id); setTimeout(() => setCopied(null), 1400); }}>
                {copied === it.id ? 'Copiado' : 'Copiar'}
              </Button>
              <Button variant="ghost" size="sm" icon={<I.download size={12}/>}>Baixar</Button>
            </div>
          </Card>
        ))}
      </div>

      {items.length === 0 && (
        <div className="py-20 text-center text-mute text-[13px]">
          Nenhum artefato encontrado pra "{q}".
        </div>
      )}
    </div>
  );
};

window.ScreenBiblioteca = ScreenBiblioteca;