// Knowledge Base view

const KnowledgeBase = () => {
  const D = window.REGULA_DATA;
  const [scope, setScope] = React.useState('all');
  const [filter, setFilter] = React.useState('');

  const groups = [
    { id: 'all', label: 'Tutti', count: D.docs.length },
    { id: 'Gruppo', label: 'Gruppo', count: D.docs.filter(d => d.scope === 'Gruppo').length },
    { id: 'MetalTech', label: 'MetalTech', count: D.docs.filter(d => d.scope === 'MetalTech').length },
    { id: 'Aqua World', label: 'Aqua World', count: D.docs.filter(d => d.scope === 'Aqua World').length },
    { id: 'Club Lumière', label: 'Club Lumière', count: D.docs.filter(d => d.scope === 'Club Lumière').length },
    { id: 'Fondazione', label: 'Fondazione', count: D.docs.filter(d => d.scope === 'Fondazione').length }
  ];

  const docs = D.docs.filter(d =>
    (scope === 'all' || d.scope === scope) &&
    (filter === '' || d.title.toLowerCase().includes(filter.toLowerCase()))
  );

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Knowledge Base</h1>
          <div className="page-subtitle">124 documenti · 18.4 GB · ultimo upload 2 ore fa</div>
        </div>
        <div className="page-meta">
          <button className="btn"><Icon name="filter" size={12} /> Filtri</button>
          <button className="btn btn-primary"><Icon name="upload" size={12} /> Carica documenti</button>
        </div>
      </div>

      <div className="section" style={{ marginTop: 8 }}>
        <div className="drop-zone">
          <Icon name="upload" size={20} />
          <div style={{ marginTop: 8 }}>
            Trascina qui PDF, DOCX o XLSX — oppure <strong>sfoglia</strong>
          </div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 6 }}>
            max 200 MB · indicizzazione OCR automatica · dati privati
          </div>
        </div>
      </div>

      <div className="section">
        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 16 }}>
          <aside>
            <div className="nav-label">Perimetro</div>
            {groups.map(g => (
              <div key={g.id} className={`nav-item ${scope === g.id ? 'active' : ''}`} onClick={() => setScope(g.id)}>
                <span className="nav-icon">
                  <Icon name={g.id === 'Gruppo' || g.id === 'all' ? 'book' : 'building'} size={12} />
                </span>
                <span style={{ fontSize: 12 }}>{g.label}</span>
                <span className="nav-count">{g.count}</span>
              </div>
            ))}

            <div className="nav-label" style={{ marginTop: 18 }}>Tag</div>
            {['Bilancio', 'Policy', 'Covenant', 'Licenza', 'Sicurezza', 'Statuto', 'Benchmark', 'SIAE', 'D.Lgs. 81', 'Terzo Settore'].map(t => (
              <div key={t} className="side-company" style={{ fontSize: 11 }}>
                <span className="chip" style={{ fontSize: 9 }}>{t}</span>
              </div>
            ))}
          </aside>

          <div className="panel">
            <div className="panel-head">
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
                <Icon name="search" size={12} />
                <input
                  value={filter}
                  onChange={e => setFilter(e.target.value)}
                  placeholder="Cerca nei documenti…"
                  style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontSize: 12 }}
                />
                <span className="chip">{docs.length} risultati</span>
              </div>
            </div>
            <div className="doc-row" style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
              <span></span>
              <span className="mini-kpi-label" style={{ margin: 0 }}>Titolo</span>
              <span className="mini-kpi-label" style={{ margin: 0 }}>Perimetro</span>
              <span className="mini-kpi-label" style={{ margin: 0 }}>Stato</span>
              <span className="mini-kpi-label" style={{ margin: 0 }}>Aggiornato</span>
              <span className="mini-kpi-label" style={{ margin: 0 }}>Cit.</span>
            </div>
            {docs.map((d, i) => (
              <div key={i} className="doc-row">
                <div className="doc-icon">{d.type}</div>
                <div style={{ minWidth: 0 }}>
                  <div className="doc-title" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.title}</div>
                  <div className="doc-sub">
                    {d.size} · {d.tags.map(t => (
                      <span key={t} style={{ marginRight: 6 }}>#{t}</span>
                    ))}
                  </div>
                </div>
                <div>
                  <span className="chip">{d.scope}</span>
                </div>
                <div>
                  <span className={`chip ${d.indexed === 'Indicizzato' ? 'green' : 'amber'}`}>
                    {d.indexed === 'Indicizzato' ? '● Indicizzato' : '○ In corso'}
                  </span>
                </div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)' }}>{d.updated}</div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: d.cited > 0 ? 'var(--accent)' : 'var(--muted-2)' }}>{d.cited}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { KnowledgeBase });