// path.jsx — full path/index view + library view (v2)

function PathView({ chapters, progressData, onArticle, onChapter }) {
  const totalArticles = chapters.reduce((n, c) => n + c.articles.length, 0);
  const totalMinutes = chapters.reduce((n, c) => n + c.articles.reduce((m, a) => m + a.minutes, 0), 0);
  const visited = Object.keys(progressData).length;
  const pct = Math.round((visited / totalArticles) * 100);

  return (
    <div className="path-view">
      <header className="pv-head">
        <span className="sh-eyebrow">IL PERCORSO</span>
        <h1>Da dove parto, dove arrivo.</h1>
        <p className="pv-lede">
          Diversi capitoli pensati per accompagnarti dall'idea iniziale al primo investimento
          consapevole. Segui l'ordine consigliato — costruisce concetto su concetto — oppure salta a ciò che ti serve.
        </p>
<figure style={{
  margin: '32px auto 24px auto',
  padding: 0,
  width: '100%',
  maxWidth: '560px',
  borderRadius: '12px',
  overflow: 'hidden',
  lineHeight: 0,
}}>
  <img
    src="uploads/cammino.webp"
    alt="Panoramica visiva del percorso di investimento"
    style={{
      width: '100%',
      height: 'auto',
      display: 'block',
      objectFit: 'cover',
    }}
  />
</figure>
        <div className="pv-stats">
          <div className="pv-stat"><span className="pv-stat-val">{totalArticles}</span><span className="pv-stat-lbl">ARTICOLI</span></div>
          <div className="pv-stat"><span className="pv-stat-val">{totalMinutes}<i>min</i></span><span className="pv-stat-lbl">LETTURA TOTALE</span></div>
          <div className="pv-stat"><span className="pv-stat-val">{pct}<i>%</i></span><span className="pv-stat-lbl">VISITATO</span></div>
        </div>
      </header>

      <PathRoadmap chapters={chapters} progressData={progressData} onArticle={onArticle} onChapter={onChapter} variant="list" />
    </div>
  );
}

function LibraryView({ chapters, progressData, onArticle }) {
  const [filter, setFilter] = React.useState('all');
  const [chapFilter, setChapFilter] = React.useState('all');

  const all = [];
  chapters.forEach((c) => c.articles.forEach((a) => all.push({ ...a, _chap: c })));

  const filtered = all.filter((a) => {
    if (filter !== 'all' && a.level !== filter) return false;
    if (chapFilter !== 'all' && a._chap.id !== chapFilter) return false;
    return true;
  });

  return (
    <div className="library">
      <header className="lib-head">
        <span className="sh-eyebrow">TUTTI GLI ARTICOLI</span>
        <h1>Archivio libero.</h1>
        <p className="pv-lede">Tutti gli articoli del percorso, filtrabili per livello e capitolo.</p>
      </header>

      <div className="lib-toolbar">
        <div className="lib-filter-group">
          <span className="lib-filter-lbl">LIVELLO</span>
          <div className="lib-chips">
            {[
              { id: 'all', label: 'Tutti' },
              { id: 'base', label: 'Base' },
              { id: 'intermedio', label: 'Intermedio' },
              { id: 'avanzato', label: 'Avanzato' },
            ].map((f) => (
              <button key={f.id} className={`lib-chip ${filter === f.id ? 'active' : ''}`} onClick={() => setFilter(f.id)}>{f.label}</button>
            ))}
          </div>
        </div>
        <div className="lib-filter-group">
          <span className="lib-filter-lbl">CAPITOLO</span>
          <div className="lib-chips">
            <button className={`lib-chip ${chapFilter === 'all' ? 'active' : ''}`} onClick={() => setChapFilter('all')}>Tutti</button>
            {chapters.map((c) => (
              <button key={c.id} className={`lib-chip ${chapFilter === c.id ? 'active' : ''}`} onClick={() => setChapFilter(c.id)}>
                {c.num} {c.title}
              </button>
            ))}
          </div>
        </div>
        <div className="lib-count">{filtered.length} articol{filtered.length === 1 ? 'o' : 'i'}</div>
      </div>

      <div className="lib-grid">
        {filtered.map((a) => (
          <ArticleRow key={a.id} article={a} chapter={a._chap} onOpen={onArticle} />
        ))}
        {filtered.length === 0 && <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>Nessun articolo per questi filtri.</div>}
      </div>
    </div>
  );
}

window.PathView = PathView;
window.LibraryView = LibraryView;

function GlossarioView({ onNav }) {
  const [query, setQuery] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('all');
  const glossary = window.SF_DATA.GLOSSARY;

  const CATS = [
    { id: 'all', label: 'Tutti' },
    { id: 'strumenti', label: 'Strumenti' },
    { id: 'portafoglio', label: 'Portafoglio' },
    { id: 'tassazione', label: 'Tassazione' },
    { id: 'indicatori', label: 'Indicatori' },
    { id: 'costi', label: 'Costi' },
    { id: 'indici', label: 'Indici' },
    { id: 'mercati', label: 'Mercati' },
  ];

  const filtered = glossary.filter((g) => {
    const matchQ = query.length < 2 || g.term.toLowerCase().includes(query.toLowerCase()) || g.def.toLowerCase().includes(query.toLowerCase());
    const matchCat = catFilter === 'all' || g.cat === catFilter;
    return matchQ && matchCat;
  }).sort((a, b) => a.term.localeCompare(b.term, 'it'));

  const grouped = {};
  filtered.forEach((g) => {
    const letter = g.term[0].toUpperCase();
    if (!grouped[letter]) grouped[letter] = [];
    grouped[letter].push(g);
  });
  const letters = Object.keys(grouped).sort();

  return (
    <div className="glossario">
      <header className="gloss-head">
        <span className="sh-eyebrow">GLOSSARIO FINANZIARIO</span>
        <h1>Le parole che contano.</h1>
        <p className="pv-lede">Tutti i termini del percorso, spiegati senza fronzoli. Cerca un concetto o filtra per categoria.</p>
        <div className="gloss-search-wrap">
          <svg className="gloss-search-icon" viewBox="0 0 20 20" width="18" height="18" fill="none">
            <circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.6"/>
            <path d="M13 13l3.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
          <input
            className="gloss-search"
            type="search"
            placeholder="Cerca termine o definizione…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            autoFocus
          />
          {query && <button className="gloss-search-clear" onClick={() => setQuery('')}>×</button>}
        </div>
      </header>

      <div className="gloss-toolbar">
        <div className="lib-chips">
          {CATS.map((c) => (
            <button key={c.id} className={`lib-chip ${catFilter === c.id ? 'active' : ''}`} onClick={() => setCatFilter(c.id)}>{c.label}</button>
          ))}
        </div>
        <span className="gloss-count">{filtered.length} termin{filtered.length === 1 ? 'e' : 'i'}</span>
      </div>

      {filtered.length === 0 && (
        <div className="gloss-empty">
          <p>Nessun termine trovato per "<strong>{query}</strong>".</p>
        </div>
      )}

      <div className="gloss-body">
        {letters.map((letter) => (
          <div key={letter} className="gloss-letter-group">
            <div className="gloss-letter">{letter}</div>
            <div className="gloss-terms">
              {grouped[letter].map((g) => (
                <article key={g.term} className="gloss-term">
                  <div className="gloss-term-head">
                    <h3>{g.term}</h3>
                    <span className={`gloss-cat gloss-cat-${g.cat}`}>{g.cat}</span>
                  </div>
                  <p>{g.def}</p>
                </article>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.GlossarioView = GlossarioView;