/* ============================================================
   RepositoryView — Aba "Repositório"
   v7.6: cards de setor lado a lado, colapsáveis (FECHADOS por padrão),
   com 3 sub-abas: "POPs gerados", "Histórico" (com detalhes ricos) e
   "Arquivados" (PDFs upados). POPCard segue o layout de referência
   (título completo sem truncar, autor em bloco separado, botão "Abrir"
   + dropdown com "Carregar para o formulário" e "Excluir").
   Persistência da escolha de expansão por setor em localStorage.
   ============================================================ */

const { useState, useMemo, useEffect, useRef } = React;
const Icon = (props) => window.Icon ? React.createElement(window.Icon, props) : null;

// Setores oficiais do mapa mental — v7.10: Marketing removido,
// Jurídico passou a ocupar uma das 3 colunas do grid do repositório.
const SETORES = [
  { id: 'graduacao',   label: 'Graduação',     desc: 'Cursos de graduação presencial' },
  { id: 'pos',         label: 'Pós-Graduação', desc: 'Lato sensu, EAD e curadoria' },
  { id: 'juridico',    label: 'Jurídico',      desc: 'Contratos, conformidade e processos' },
];

// Chave para lembrar quais setores estão expandidos
const EXPANSION_KEY = 'pop_repo_expansion_v1';

// Agrupa items por mês/ano (Português) — items já vêm ordenados desc
function groupByMonth(items) {
  const groups = {};
  const order = [];
  for (const it of items) {
    const d = new Date(it.savedAt);
    const key = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0');
    const label = d.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
    if (!groups[key]) { groups[key] = { key, label, items: [] }; order.push(key); }
    groups[key].items.push(it);
  }
  return order.map(k => groups[k]);
}

// Formata bytes → string curta (ex: "1.4 MB")
function formatBytes(bytes) {
  if (!bytes && bytes !== 0) return '';
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

// Quebra o campo "autor" (string única "Nome — email@..." ou "Nome / email@...")
// em { nome, email } para exibição em duas linhas. Aceita vários separadores.
function parseAutor(autorStr) {
  if (!autorStr) return { nome: '', email: '' };
  const s = String(autorStr).trim();
  // Tenta encontrar email primeiro
  const emailMatch = s.match(/[\w._%+-]+@[\w.-]+\.[A-Za-z]{2,}/);
  if (emailMatch) {
    const email = emailMatch[0];
    // Remove o email e separadores comuns para extrair o nome
    let nome = s.replace(email, '')
                .replace(/[—–\-|/,;:]+\s*$/g, '')
                .replace(/^\s*[—–\-|/,;:]+/g, '')
                .trim();
    // Se sobrou parêntese ou < >, limpa
    nome = nome.replace(/[<>()]/g, '').trim();
    return { nome, email };
  }
  // Sem email — tenta separar por traço/barra/vírgula
  const parts = s.split(/\s*[—–|/,;]\s*/);
  if (parts.length >= 2) return { nome: parts[0].trim(), email: parts.slice(1).join(' ').trim() };
  return { nome: s, email: '' };
}

// Dropdown de ações (chevron) para POPCard
const CardMenu = ({ onLoad, onRemove }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onDocClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div className="card-menu" ref={ref}>
      <button
        type="button"
        className={"card-menu__trigger" + (open ? ' is-open' : '')}
        onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}
        aria-haspopup="menu"
        aria-expanded={open}
        title="Mais ações"
      >
        <Icon name="chevron-down" size={16}/>
      </button>
      {open && (
        <div className="card-menu__pop" role="menu">
          <button
            type="button"
            className="card-menu__item"
            role="menuitem"
            onClick={() => { setOpen(false); onLoad && onLoad(); }}
          >
            <Icon name="arrow-up-right" size={14}/>
            <span>Carregar para o formulário</span>
          </button>
          <div className="card-menu__sep" />
          <button
            type="button"
            className="card-menu__item card-menu__item--danger"
            role="menuitem"
            onClick={() => { setOpen(false); onRemove && onRemove(); }}
          >
            <Icon name="trash" size={14}/>
            <span>Excluir</span>
          </button>
        </div>
      )}
    </div>
  );
};

// Card de um POP gerado (POPs gerados / histórico — versão compacta)
const POPCard = ({ item, onLoad, onDownload, onRemove, setorId }) => {
  const d = new Date(item.savedAt);
  const { nome, email } = parseAutor(item.data?.autor);

  return (
    <article className="repo-card">
      <div className="repo-card__icon" data-sector={setorId || item.data?.setor || 'pos'}>
        <Icon name="file-text" size={18}/>
      </div>

      <div className="repo-card__body">
        <h3 className="repo-card__title" title={item.title}>{item.title}</h3>

        <div className="repo-card__meta">
          <span className="repo-card__chip">v{item.versao || '1.0'}</span>
          <span className="repo-card__bullet" aria-hidden="true">•</span>
          <span className="repo-card__date">{d.toLocaleDateString('pt-BR')}</span>
        </div>

        {(nome || email) && (
          <div className="repo-card__author">
            <span className="repo-card__author-label">Feito por:</span>
            <span className="repo-card__author-value">
              {nome}{nome && email ? ' / ' : ''}{email}
            </span>
          </div>
        )}
      </div>

      <div className="repo-card__actions">
        <button
          className="repo-card__open"
          onClick={() => onLoad(item)}
          title="Carregar no formulário"
          aria-label="Abrir POP"
          type="button"
        >
          <Icon name="arrow-up-right" size={16}/>
        </button>
        <CardMenu
          onLoad={() => onLoad(item)}
          onRemove={() => onRemove(item)}
        />
      </div>
    </article>
  );
};

// Card detalhado para a aba Histórico — mostra mais infos sobre a versão
const HistoryCard = ({ item, onLoad, onDownload, onRemove, setorId }) => {
  const d = new Date(item.savedAt);
  const { nome, email } = parseAutor(item.data?.autor);
  const validador = parseAutor(item.data?.validador);
  const passos = (item.data?.procedimentos || []).filter(s => (s.text || '').trim()).length;
  const imgs = (item.data?.procedimentos || []).reduce((a, s) => a + (s.imagens?.length || 0), 0);
  const vids = (item.data?.procedimentos || []).reduce((a, s) => a + (s.videos?.length || 0), 0);
  const lnks = (item.data?.procedimentos || []).reduce((a, s) => a + (s.links?.length || 0), 0);
  const anexos = imgs + vids + lnks;

  const dataPrimeira = item.data?.dataPrimeira ? new Date(item.data.dataPrimeira + 'T00:00:00') : null;
  const dataRevisao  = item.data?.dataRevisao  ? new Date(item.data.dataRevisao  + 'T00:00:00') : null;

  return (
    <article className="repo-history">
      <div className="repo-history__head">
        <div className="repo-history__icon" data-sector={setorId || item.data?.setor || 'pos'}>
          <Icon name="file-text" size={18}/>
        </div>
        <div className="repo-history__head-text">
          <h3 className="repo-history__title" title={item.title}>{item.title}</h3>
          <div className="repo-history__meta">
            <span className="repo-history__chip">v{item.versao || '1.0'}</span>
            <span className="repo-card__bullet" aria-hidden="true">•</span>
            <span>Salvo em {d.toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
          </div>
        </div>
        <div className="repo-history__head-actions">
          <button
            className="repo-card__open"
            onClick={() => onLoad(item)}
            title="Carregar no formulário"
            aria-label="Abrir POP"
            type="button"
          >
            <Icon name="arrow-up-right" size={16}/>
          </button>
          <CardMenu
            onLoad={() => onLoad(item)}
            onRemove={() => onRemove(item)}
          />
        </div>
      </div>

      <dl className="repo-history__grid">
        {(nome || email) && (
          <div className="repo-history__field">
            <dt>Autor</dt>
            <dd>
              {nome && <span className="repo-history__name">{nome}</span>}
              {email && <span className="repo-history__email">{email}</span>}
            </dd>
          </div>
        )}
        {(validador.nome || validador.email) && (
          <div className="repo-history__field">
            <dt>Validador</dt>
            <dd>
              {validador.nome && <span className="repo-history__name">{validador.nome}</span>}
              {validador.email && <span className="repo-history__email">{validador.email}</span>}
            </dd>
          </div>
        )}
        {dataPrimeira && (
          <div className="repo-history__field">
            <dt>1ª emissão</dt>
            <dd><span className="repo-history__name">{dataPrimeira.toLocaleDateString('pt-BR')}</span></dd>
          </div>
        )}
        {dataRevisao && (
          <div className="repo-history__field">
            <dt>Última revisão</dt>
            <dd><span className="repo-history__name">{dataRevisao.toLocaleDateString('pt-BR')}</span></dd>
          </div>
        )}
        {item.data?.responsavel && (
          <div className="repo-history__field">
            <dt>Responsável</dt>
            <dd><span className="repo-history__name">{item.data.responsavel}</span></dd>
          </div>
        )}
        {item.data?.local && (
          <div className="repo-history__field">
            <dt>Local</dt>
            <dd><span className="repo-history__name">{item.data.local}</span></dd>
          </div>
        )}
      </dl>

      {item.data?.objetivo && (
        <div className="repo-history__obj">
          <span className="repo-history__obj-label">Objetivo:</span>
          <p>{item.data.objetivo}</p>
        </div>
      )}

      <div className="repo-history__stats">
        <span className="repo-history__stat">
          <Icon name="sparkle-doc" size={13}/>
          {passos} {passos === 1 ? 'passo' : 'passos'}
        </span>
        {imgs > 0 && (
          <span className="repo-history__stat">
            <Icon name="image" size={13}/>
            {imgs} {imgs === 1 ? 'imagem' : 'imagens'}
          </span>
        )}
        {vids > 0 && (
          <span className="repo-history__stat">
            <Icon name="video" size={13}/>
            {vids} {vids === 1 ? 'vídeo' : 'vídeos'}
          </span>
        )}
        {lnks > 0 && (
          <span className="repo-history__stat">
            <Icon name="link" size={13}/>
            {lnks} {lnks === 1 ? 'link' : 'links'}
          </span>
        )}
        {anexos === 0 && (
          <span className="repo-history__stat repo-history__stat--muted">
            sem anexos
          </span>
        )}
        <span className="repo-history__stat repo-history__stat--push">
          <button
            className="btn btn--ghost btn--sm"
            onClick={() => onDownload(item)}
            title="Baixar Word desta versão"
            type="button"
          >
            <Icon name="download" size={13}/> Baixar .docx
          </button>
        </span>
      </div>
    </article>
  );
};

// Dropdown de ações específico para o card de arquivados — 3 opções
// (Ver PDF, Baixar PDF, Excluir em vermelho).  Espelha CardMenu mas com
// opções diferentes; mantém o componente CardMenu original intacto pra
// não mexer no POPCard/HistoryCard.
const ArchivedMenu = ({ onView, onDownload, onRemove }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onDocClick = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div className="card-menu" ref={ref}>
      <button
        type="button"
        className={"card-menu__trigger" + (open ? ' is-open' : '')}
        onClick={(e) => { e.stopPropagation(); setOpen(o => !o); }}
        aria-haspopup="menu"
        aria-expanded={open}
        title="Mais ações"
      >
        <Icon name="chevron-down" size={16}/>
      </button>
      {open && (
        <div className="card-menu__pop" role="menu">
          <button
            type="button"
            className="card-menu__item"
            role="menuitem"
            onClick={() => { setOpen(false); onView && onView(); }}
          >
            <Icon name="eye" size={14}/>
            <span>Visualizar PDF</span>
          </button>
          <button
            type="button"
            className="card-menu__item"
            role="menuitem"
            onClick={() => { setOpen(false); onDownload && onDownload(); }}
          >
            <Icon name="download" size={14}/>
            <span>Baixar PDF</span>
          </button>
          <div className="card-menu__sep" />
          <button
            type="button"
            className="card-menu__item card-menu__item--danger"
            role="menuitem"
            onClick={() => { setOpen(false); onRemove && onRemove(); }}
          >
            <Icon name="trash" size={14}/>
            <span>Excluir do arquivo</span>
          </button>
        </div>
      )}
    </div>
  );
};

// Card de um POP arquivado (PDF upado) — v7.9: refeito no mesmo padrão
// do POPCard/HistoryCard, com título completo (sem corte), meta-linha
// com chip + tamanho + data, botão "Importar" como ação primária e
// dropdown chevron com as ações secundárias (ver, baixar, excluir).
const ArchivedCard = ({ item, onView, onDownload, onImport, onRemove }) => {
  const d = new Date(item.savedAt);
  return (
    <article className="repo-card repo-card--archived">
      <div className="repo-card__icon repo-card__icon--archived">
        <Icon name="paperclip" size={18}/>
      </div>

      <div className="repo-card__body">
        <h3 className="repo-card__title" title={item.title}>{item.title}</h3>

        <div className="repo-card__meta">
          <span className="repo-card__chip repo-card__chip--archived">PDF arquivado</span>
          <span className="repo-card__bullet" aria-hidden="true">•</span>
          <span>{formatBytes(item.size)}</span>
          <span className="repo-card__bullet" aria-hidden="true">•</span>
          <span className="repo-card__date">{d.toLocaleDateString('pt-BR')}</span>
        </div>

        <div className="repo-card__author">
          <span className="repo-card__author-label">POP antigo arquivado.</span>
          <span className="repo-card__author-value">
            Use "Importar" para abrir os campos no Gerador.
          </span>
        </div>
      </div>

      <div className="repo-card__actions">
        <button
          className="repo-card__open"
          onClick={() => onImport(item)}
          title="Importar para o Gerador"
          aria-label="Importar POP arquivado"
          type="button"
        >
          <Icon name="arrow-up-right" size={16}/>
        </button>
        <ArchivedMenu
          onView={() => onView(item)}
          onDownload={() => onDownload(item)}
          onRemove={() => onRemove(item)}
        />
      </div>
    </article>
  );
};

// Card de setor (colapsável, com 3 sub-abas)
const SectorCard = ({
  setor, items, archivedItems, expanded, onToggle,
  onLoad, onDownload, onRemove,
  onArchivedView, onArchivedDownload, onArchivedImport, onArchivedRemove,
  onArchivePOP,
}) => {
  const [tab, setTab] = useState('gerados');

  const sorted = useMemo(
    () => [...items].sort((a, b) => new Date(b.savedAt) - new Date(a.savedAt)),
    [items]
  );
  const grupos = useMemo(() => groupByMonth(sorted), [sorted]);
  const archivedSorted = useMemo(
    () => [...archivedItems].sort((a, b) => new Date(b.savedAt) - new Date(a.savedAt)),
    [archivedItems]
  );

  const totalDocs = items.length + archivedItems.length;

  return (
    <section className={"repo-sector" + (expanded ? ' is-expanded' : ' is-collapsed')}>
      <header
        className="repo-sector__head"
        onClick={onToggle}
        role="button"
        tabIndex={0}
        aria-expanded={expanded}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle(); }
        }}
      >
        <div className="repo-sector__lead">
          <div className="repo-sector__icon" data-sector={setor.id}>
            <Icon name="file-text" size={18}/>
          </div>
          <div>
            <h2 className="repo-sector__title">{setor.label}</h2>
            <p className="repo-sector__desc">{setor.desc}</p>
          </div>
        </div>
        <div className="repo-sector__head-right">
          <div className="repo-sector__count">
            <strong>{totalDocs}</strong>
            <span>{totalDocs === 1 ? 'doc' : 'docs'}</span>
          </div>
          <button
            className="repo-sector__toggle"
            aria-label={expanded ? 'Recolher setor' : 'Expandir setor'}
            onClick={(e) => { e.stopPropagation(); onToggle(); }}
            type="button"
          >
            <Icon name="chevron-down" size={18}/>
          </button>
        </div>
      </header>

      {expanded && (
        <>
          <div className="repo-tabs">
            <button
              className={"repo-tab" + (tab === 'gerados' ? ' is-active' : '')}
              onClick={() => setTab('gerados')}>
              <Icon name="sparkle-doc" size={14}/> POPs gerados
              <span className="repo-tab__count">{items.length}</span>
            </button>
            <button
              className={"repo-tab" + (tab === 'historico' ? ' is-active' : '')}
              onClick={() => setTab('historico')}>
              <Icon name="history" size={14}/> Histórico
            </button>
            <button
              className={"repo-tab" + (tab === 'arquivados' ? ' is-active' : '')}
              onClick={() => setTab('arquivados')}>
              <Icon name="paperclip" size={14}/> Arquivados
              <span className="repo-tab__count">{archivedItems.length}</span>
            </button>
          </div>

          <div className="repo-sector__body">
            {tab === 'gerados' && (
              items.length === 0 ? (
                <div className="repo-empty">
                  <div className="repo-empty__icon"><Icon name="file-text" size={24}/></div>
                  <p>Nenhum POP cadastrado em <strong>{setor.label}</strong>.</p>
                  <span>Os documentos gerados para este setor aparecerão aqui.</span>
                </div>
              ) : (
                <div className="repo-list">
                  {sorted.map(it => (
                    <POPCard key={it.id} item={it} setorId={setor.id}
                             onLoad={onLoad} onDownload={onDownload} onRemove={onRemove}/>
                  ))}
                </div>
              )
            )}

            {tab === 'historico' && (
              items.length === 0 ? (
                <div className="repo-empty">
                  <div className="repo-empty__icon"><Icon name="history" size={24}/></div>
                  <p>Sem histórico para <strong>{setor.label}</strong>.</p>
                  <span>Cada vez que um POP for salvo aqui, uma versão detalhada aparecerá no histórico.</span>
                </div>
              ) : (
                <div className="repo-timeline">
                  {grupos.map(g => (
                    <div key={g.key} className="repo-timeline__group">
                      <div className="repo-timeline__label">
                        <span className="repo-timeline__dot"/>
                        <span className="repo-timeline__month">{g.label}</span>
                        <span className="repo-timeline__line"/>
                        <span className="repo-timeline__qty">
                          {g.items.length} {g.items.length === 1 ? 'versão salva' : 'versões salvas'}
                        </span>
                      </div>
                      <div className="repo-history-list">
                        {g.items.map(it => (
                          <HistoryCard key={it.id} item={it} setorId={setor.id}
                                       onLoad={onLoad} onDownload={onDownload} onRemove={onRemove}/>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )
            )}

            {tab === 'arquivados' && (
              archivedItems.length === 0 ? (
                <div className="repo-empty">
                  <div className="repo-empty__icon"><Icon name="paperclip" size={24}/></div>
                  <p>Nenhum POP arquivado em <strong>{setor.label}</strong>.</p>
                  <span>Use "Arquivar POP" no topo para enviar PDFs antigos para este setor.</span>
                  {onArchivePOP && (
                    <button className="btn btn--ghost btn--sm" onClick={onArchivePOP} style={{marginTop: 10}}>
                      <Icon name="plus" size={13}/> Arquivar POP agora
                    </button>
                  )}
                </div>
              ) : (
                <div className="repo-list">
                  {archivedSorted.map(it => (
                    <ArchivedCard key={it.id} item={it}
                                  onView={onArchivedView}
                                  onDownload={onArchivedDownload}
                                  onImport={onArchivedImport}
                                  onRemove={onArchivedRemove}/>
                  ))}
                </div>
              )
            )}
          </div>
        </>
      )}
    </section>
  );
};

// View completa do Repositório
function RepositoryView({
  items, archived = [],
  onLoad, onDownload, onRemove,
  onArchivedView, onArchivedDownload, onArchivedImport, onArchivedRemove,
  onGoToGerador, onArchivePOP,
}) {
  const [filterSetor, setFilterSetor] = useState('all');
  const [query, setQuery] = useState('');

  // Estado de expansão por setor — persiste em localStorage.
  // *** v7.6: agora começam TODOS FECHADOS na primeira visita. ***
  // *** v7.8: usa SETORES como fonte única — adicionar novo setor
  //     na lista lá em cima já reflete aqui automaticamente. ***
  const [expansion, setExpansion] = useState(() => {
    const defaults = Object.fromEntries(SETORES.map(s => [s.id, false]));
    try {
      const raw = localStorage.getItem(EXPANSION_KEY);
      if (raw) {
        const saved = JSON.parse(raw);
        // Mescla defaults com salvo, garantindo que setores novos
        // (adicionados depois) apareçam fechados na primeira visita.
        return { ...defaults, ...saved };
      }
    } catch (e) {}
    return defaults;
  });

  useEffect(() => {
    try { localStorage.setItem(EXPANSION_KEY, JSON.stringify(expansion)); } catch (e) {}
  }, [expansion]);

  const toggleSector = (id) => {
    setExpansion(prev => ({ ...prev, [id]: !prev[id] }));
  };
  const expandAll   = () => setExpansion(Object.fromEntries(SETORES.map(s => [s.id, true])));
  const collapseAll = () => setExpansion(Object.fromEntries(SETORES.map(s => [s.id, false])));

  // Itens filtrados por busca
  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return items;
    return items.filter(it =>
      (it.title || '').toLowerCase().includes(q) ||
      (it.data?.autor || '').toLowerCase().includes(q) ||
      (it.data?.objetivo || '').toLowerCase().includes(q)
    );
  }, [items, query]);

  const filteredArchived = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return archived;
    return archived.filter(it => (it.title || '').toLowerCase().includes(q));
  }, [archived, query]);

  // Agrupa por setor (fallback para 'pos' se vier um id desconhecido)
  const bySetor = useMemo(() => {
    const map = Object.fromEntries(SETORES.map(s => [s.id, []]));
    for (const it of filtered) {
      const s = it.data?.setor || 'pos';
      if (map[s]) map[s].push(it); else map.pos.push(it);
    }
    return map;
  }, [filtered]);

  const archivedBySetor = useMemo(() => {
    const map = Object.fromEntries(SETORES.map(s => [s.id, []]));
    for (const it of filteredArchived) {
      const s = it.setor || 'pos';
      if (map[s]) map[s].push(it); else map.pos.push(it);
    }
    return map;
  }, [filteredArchived]);

  const total = filtered.length;
  const totalArchived = filteredArchived.length;
  const visibleSectors = filterSetor === 'all'
    ? SETORES
    : SETORES.filter(s => s.id === filterSetor);

  const allExpanded = SETORES.every(s => expansion[s.id]);

  return (
    <div className="repo-page">
      {/* Hero */}
      <section className="hero hero--repo">
        <div className="hero__inner">
          <div className="hero__copy">
            <div className="hero__eyebrow">Documentos institucionais</div>
            <h1 className="hero__title">Repositório de POPs</h1>
            <p className="hero__sub">
              Todos os Procedimentos Operacionais Padrão organizados por setor.
              Cada POP gerado entra automaticamente neste repositório, e POPs
              antigos podem ser arquivados como PDF.
            </p>
          </div>
          <div className="hero__progress hero__progress--repo">
            <div className="hero__progress-label">
              <span>Documentos no acervo</span>
              <strong className="num">{items.length + archived.length}</strong>
            </div>
            <div className="repo-stats">
              {SETORES.map(s => {
                const n = (items || []).filter(it => (it.data?.setor || 'pos') === s.id).length;
                const a = (archived || []).filter(it => (it.setor || 'pos') === s.id).length;
                return (
                  <div key={s.id} className="repo-stat">
                    <span className="repo-stat__dot" data-sector={s.id}/>
                    <span className="repo-stat__label">{s.label}</span>
                    <strong className="repo-stat__num">{n + a}</strong>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      <div className="repo-toolbar">
        <div className="repo-toolbar__inner">
          <div className="repo-search">
            <Icon name="eye" size={14}/>
            <input
              type="text"
              placeholder="Buscar por título, autor ou objetivo…"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
            {query && (
              <button className="repo-search__clear" onClick={() => setQuery('')}>
                <Icon name="x" size={12}/>
              </button>
            )}
          </div>

          <div className="repo-filter">
            <button
              className={"repo-filter__btn" + (filterSetor === 'all' ? ' is-active' : '')}
              onClick={() => setFilterSetor('all')}>
              Todos <span className="repo-filter__count">{total + totalArchived}</span>
            </button>
            {SETORES.map(s => (
              <button
                key={s.id}
                className={"repo-filter__btn" + (filterSetor === s.id ? ' is-active' : '')}
                onClick={() => setFilterSetor(s.id)}>
                <span className="repo-filter__dot" data-sector={s.id}/>
                {s.label}
                <span className="repo-filter__count">
                  {bySetor[s.id].length + archivedBySetor[s.id].length}
                </span>
              </button>
            ))}
          </div>

          <div className="repo-toolbar__actions">
            <button
              className="btn btn--ghost btn--sm"
              onClick={allExpanded ? collapseAll : expandAll}
              title={allExpanded ? 'Recolher todos' : 'Expandir todos'}>
              <Icon name={allExpanded ? 'arrow-up' : 'arrow-down'} size={13}/>
              {allExpanded ? 'Recolher todos' : 'Expandir todos'}
            </button>
          </div>
        </div>
      </div>

      <main className="repo-main">
        {(items.length === 0 && archived.length === 0) ? (
          <div className="repo-empty repo-empty--big">
            <div className="repo-empty__icon"><Icon name="file-text" size={36}/></div>
            <h2>Seu repositório está vazio</h2>
            <p>Cadastre um novo POP no Gerador ou arquive um PDF antigo para que ele apareça aqui.</p>
            <div style={{display: 'flex', gap: 10, marginTop: 14, justifyContent: 'center', flexWrap: 'wrap'}}>
              <button className="btn btn--primary" onClick={onGoToGerador}>
                <Icon name="plus" size={14}/> Cadastrar primeiro POP
              </button>
              {onArchivePOP && (
                <button className="btn btn--ghost" onClick={onArchivePOP}>
                  <Icon name="paperclip" size={14}/> Arquivar POP existente
                </button>
              )}
            </div>
          </div>
        ) : (
          <div className={"repo-grid" + (filterSetor !== 'all' ? ' repo-grid--single' : '')}>
            {visibleSectors.map(s => (
              <SectorCard
                key={s.id}
                setor={s}
                items={bySetor[s.id]}
                archivedItems={archivedBySetor[s.id]}
                expanded={!!expansion[s.id]}
                onToggle={() => toggleSector(s.id)}
                onLoad={onLoad}
                onDownload={onDownload}
                onRemove={onRemove}
                onArchivedView={onArchivedView}
                onArchivedDownload={onArchivedDownload}
                onArchivedImport={onArchivedImport}
                onArchivedRemove={onArchivedRemove}
                onArchivePOP={onArchivePOP}
              />
            ))}
          </div>
        )}
      </main>
    </div>
  );
}

window.RepositoryView = RepositoryView;
window.SETORES = SETORES;