/* ============================================================
   BIBLIOTECA LEGAL — catálogo de plantillas con buscador
   ============================================================ */

function BibliotecaLegal({ t, lang, isGuest, onUseTemplate, onRegister }) {
  const [query, setQuery] = useState('');
  const q = query.trim().toLowerCase();

  const filtered = LIBRARY.map(cat => ({
    ...cat,
    docs: cat.docs.filter(d => !q || (d.name[lang] || d.name.es).toLowerCase().includes(q)),
  })).filter(cat => cat.docs.length > 0);

  const totalDocs = LIBRARY.reduce((n, c) => n + c.docs.length, 0);

  return (
    <div className="section-pad fade-up">
      <div className="eyebrow">{t('group.workspace')}</div>
      <h1 className="h-title">{t('title.library')}</h1>
      <p className="h-sub">{t('sub.library')}</p>

      {isGuest && (
        <div className="lib-guest-note">
          <Icon name="lock" size={14} /> {t('lib.guestNote')}
          <button onClick={onRegister}>{t('header.guest') === 'Invitado' ? 'Crear cuenta gratis' : 'Crear un compte gratis'}</button>
        </div>
      )}

      <div className="lib-search">
        <Icon name="search" size={17} />
        <input
          className="lib-search-input"
          placeholder={t('lib.search')}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        {query && <button className="lib-clear" onClick={() => setQuery('')}><Icon name="x" size={15} /></button>}
        <span className="lib-total">{totalDocs} {t('lib.docs')}</span>
      </div>

      {filtered.length === 0 ? (
        <div className="lib-empty">
          <div className="le-ic"><Icon name="search" size={24} /></div>
          <h3>{t('lib.noResults')}</h3>
          <p>{t('lib.noResultsDesc')}</p>
        </div>
      ) : (
        <div className="lib-cats">
          {filtered.map(cat => (
            <div key={cat.id} className="lib-cat">
              <div className="lib-cat-head">
                <div className="lib-cat-ic"><Icon name={cat.icon} size={17} /></div>
                <h3>{cat.name[lang] || cat.name.es}</h3>
                <span className="lib-cat-count">{cat.docs.length}</span>
              </div>
              <div className="lib-doc-grid">
                {cat.docs.map((d, i) => (
                  <button key={i} className="lib-doc" onClick={() => onUseTemplate(d)}>
                    <div className="ld-ic"><Icon name="file" size={16} /></div>
                    <span className="ld-name">{d.name[lang] || d.name.es}</span>
                    <span className="ld-use"><Icon name="arrowRight" size={14} /></span>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      <style>{`
        .lib-guest-note { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--violet-soft); background: var(--violet-dim); border: 1px solid var(--violet-line); border-radius: 11px; padding: 11px 14px; margin: 20px 0 0; }
        .lib-guest-note .ic { color: var(--violet-soft); }
        .lib-guest-note button { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--violet); padding: 6px 12px; border-radius: 8px; transition: background .15s; }
        .lib-guest-note button:hover { background: var(--violet-bright); }

        .lib-search { display: flex; align-items: center; gap: 11px; margin: 22px 0 28px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; transition: border-color .15s, box-shadow .15s; }
        .lib-search:focus-within { border-color: var(--violet-line); box-shadow: 0 0 0 3px var(--violet-dim); }
        .lib-search > .ic { color: var(--text-3); flex-shrink: 0; }
        .lib-search-input { flex: 1; background: transparent; border: none; outline: none; padding: 13px 0; font-size: 14px; color: var(--text); }
        .lib-search-input::placeholder { color: var(--text-4); }
        .lib-clear { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); transition: .15s; }
        .lib-clear:hover { color: var(--text); background: var(--surface-3); }
        .lib-total { font-size: 12px; color: var(--text-4); white-space: nowrap; padding-left: 4px; border-left: 1px solid var(--line); }

        .lib-cats { display: flex; flex-direction: column; gap: 30px; }
        .lib-cat-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
        .lib-cat-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); }
        .lib-cat-head h3 { font-size: 16px; font-weight: 600; color: var(--white); letter-spacing: -0.01em; }
        .lib-cat-count { font-size: 11px; background: var(--surface-3); color: var(--text-2); padding: 2px 8px; border-radius: 9px; }
        .lib-doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .lib-doc { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s, transform .12s; }
        .lib-doc:hover { border-color: var(--violet-line); background: var(--surface-2); transform: translateY(-2px); }
        .ld-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
        .ld-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
        .ld-use { color: var(--text-4); transition: color .15s, transform .15s; flex-shrink: 0; }
        .lib-doc:hover .ld-use { color: var(--violet-soft); transform: translateX(3px); }

        .lib-empty { text-align: center; max-width: 380px; margin: 50px auto; display: flex; flex-direction: column; align-items: center; }
        .le-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); margin-bottom: 16px; }
        .lib-empty h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 7px; }
        .lib-empty p { font-size: 13px; color: var(--text-3); }

        @media (max-width: 700px) { .lib-doc-grid { grid-template-columns: 1fr; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { BibliotecaLegal });
