// components.jsx — shared UI primitives v2 (fintech)

const { useState, useEffect, useRef, useMemo, useCallback } = React;

const LS_PROGRESS = 'sf2_progress_v1'; // tracks chapter progression visually only

function useProgress() {
  const [data, setData] = useState(() => {
    try { return JSON.parse(localStorage.getItem(LS_PROGRESS) || '{}'); } catch { return {}; }
  });
  const setVisited = useCallback((articleId) => {
    setData((prev) => {
      if (prev[articleId]) return prev;
      const next = { ...prev, [articleId]: Date.now() };
      try { localStorage.setItem(LS_PROGRESS, JSON.stringify(next)); } catch {}
      return next;
    });
  }, []);
  const reset = useCallback(() => {
    setData({});
    try { localStorage.removeItem(LS_PROGRESS); } catch {}
  }, []);
  return [data, { setVisited, reset }];
}

function TopNav({ view, onNav, progressData, totalArticles, brandName, accent, darkMode, toggleDark }) {
  const visited = Object.keys(progressData).length;
  const initials = (brandName || 'IF').slice(0, 2).toUpperCase();
  const [menuOpen, setMenuOpen] = useState(false);

  const go = (v) => { setMenuOpen(false); onNav({ view: v }); };

  const NAV_ITEMS = [
    { id: 'home', label: 'Home' },
    { id: 'path', label: 'Percorso' },
    { id: 'library', label: 'Articoli' },
    { id: 'glossario', label: 'Glossario' },
    { id: 'about', label: 'Chi sono' },
  ];

  return (
    <nav className="topnav">
      <a className="brand" onClick={(e) => { e.preventDefault(); go('home'); }} href="#">
        <span className="brand-mark">{initials.slice(0, 1)}</span>
        <span className="brand-name">{brandName}</span>
      </a>
      <div className="nav-links">
        {NAV_ITEMS.map((item) => (
          <a key={item.id} href="#" onClick={(e) => { e.preventDefault(); go(item.id); }} className={view === item.id ? 'active' : ''}>{item.label}</a>
        ))}
      </div>

      <button className="dark-toggle" onClick={toggleDark} aria-label={darkMode ? 'Modalità chiara' : 'Modalità scura'}>
        {darkMode ? (
          <svg viewBox="0 0 20 20" width="16" height="16" fill="none">
            <circle cx="10" cy="10" r="4" fill="currentColor"/>
            <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        ) : (
          <svg viewBox="0 0 20 20" width="16" height="16" fill="none">
            <path d="M17 10.5A7 7 0 1 1 9.5 3a5.5 5.5 0 0 0 7.5 7.5z" fill="currentColor"/>
          </svg>
        )}
      </button>
      <button className="nav-burger" onClick={() => setMenuOpen((o) => !o)} aria-label="Menu">
        <span className={`burger-icon ${menuOpen ? 'open' : ''}`}>
          <i /><i /><i />
        </span>
      </button>
      {menuOpen && (
        <div className="nav-mobile-menu">
          {NAV_ITEMS.map((item) => (
            <a key={item.id} href="#" onClick={(e) => { e.preventDefault(); go(item.id); }} className={view === item.id ? 'active' : ''}>{item.label}</a>
          ))}
          <div className="nmm-progress">
            <span className="np-dot"></span>
            <span><b>{visited}</b>/{totalArticles} visitati</span>
          </div>
        </div>
      )}
    </nav>
  );
}

// Path roadmap variants
function PathRoadmap({ chapters, progressData, onArticle, onChapter, variant = 'roadmap' }) {
  const articleVisited = (a) => !!progressData[a.id];
  const chapterProgress = (c) => {
    const v = c.articles.filter(articleVisited).length;
    return { visited: v, total: c.articles.length, pct: v / c.articles.length };
  };

  if (variant === 'modules') {
    return (
      <div className="path-modules">
        {chapters.map((c) => {
          const p = chapterProgress(c);
          const totalMin = c.articles.reduce((n, a) => n + a.minutes, 0);
          return (
            <button key={c.id} className="pm-card" onClick={() => onChapter(c.id)}>
              <header><span className="pm-num">CAP. {c.num}</span><span>{c.articles.length} articoli</span></header>
              <h3>{c.title}</h3>
              <p className="pm-sub">{c.subtitle}</p>
              <p className="pm-desc">{c.description}</p>
              <div className="pm-bar"><i style={{ width: `${p.pct * 100}%` }} /></div>
              <div className="pm-bar-meta">
                <span className="pm-progress-label">{p.visited}/{p.total}</span>
                <span className="pm-time-label">{totalMin} min</span>
              </div>
            </button>
          );
        })}
      </div>
    );
  }

  if (variant === 'list') {
    return (
      <div className="path-list">
        {chapters.map((c, i) => {
          const p = chapterProgress(c);
          const totalMin = c.articles.reduce((n, a) => n + a.minutes, 0);
          return (
            <section key={c.id} className="pl-chapter" data-chapter-anchor={c.id}>
              <div className="pl-head">
                <div className="pl-num-col">
                  <span className="pl-num">{c.num}</span>
                  {i < chapters.length - 1 && <span className="pl-line" />}
                </div>
                <div className="pl-meta">
                  <h2>{c.title}</h2>
                  <p>{c.subtitle}</p>
                  <div className="pl-stats">
                    <span>{p.visited}/{p.total} visitati</span>
                    <span>·</span>
                    <span>{totalMin} min totali</span>
                  </div>
                </div>
              </div>
              <ul className="pl-articles">
                {c.articles.map((a) => (
                  <li key={a.id} onClick={() => onArticle(a.id)}>
                    <span className="dot" style={{ background: articleVisited(a) ? 'var(--accent)' : 'var(--ink-4)', opacity: articleVisited(a) ? 1 : 0.3 }} />
                    <span className="pl-art-title">{a.title}</span>
                    <span className={`pl-art-lvl lvl-${a.level}`}>{a.level}</span>
                    <span className="pl-art-min">{a.minutes}′</span>
                  </li>
                ))}
              </ul>
            </section>
          );
        })}
      </div>
    );
  }

  if (variant === 'map') {
    // Sober Duolingo-style map
    const positions = ['left', 'center', 'right', 'center', 'left'];
    return (
      <div className="path-map">
        <div className="pmap-stations">
          {chapters.map((c, i) => {
            const p = chapterProgress(c);
            const status = p.pct >= 1 ? 'done' : p.pct > 0 ? 'active' : 'idle';
            const align = positions[i % positions.length];
            return (
              <div key={c.id} className={`pmap-row ${align}`}>
                {align === 'right' && <span className="pmap-label">{c.subtitle}</span>}
                <button className={`pmap-node ${status}`} onClick={() => onChapter(c.id)}>
                  <span className="pmn-num">{c.num}</span>
                  <span className="pmn-title">{c.title}</span>
                </button>
                {align !== 'right' && <span className="pmap-label">{c.subtitle}</span>}
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  // roadmap default
  return (
    <div className="path-roadmap">
      <div className="pr-rail">
        {chapters.map((c, i) => {
          const p = chapterProgress(c);
          const status = p.pct >= 1 ? 'done' : p.pct > 0 ? 'active' : 'idle';
          const totalMin = c.articles.reduce((n, a) => n + a.minutes, 0);
          return (
            <React.Fragment key={c.id}>
              <button className={`pr-station ${status}`} onClick={() => onChapter(c.id)}>
                <span className="pr-st-num">CAP. {c.num}</span>
                <span className="pr-st-title">{c.title}</span>
                <span className="pr-st-sub">{c.subtitle}</span>
                <div className="pr-st-progress"><i style={{ width: `${p.pct * 100}%` }} /></div>
                <span className="pr-st-meta">{p.visited}/{p.total} · {totalMin}m</span>
              </button>
              {i < chapters.length - 1 && (
                <span className={`pr-edge ${p.pct >= 1 ? 'done' : ''}`}>
                  <svg viewBox="0 0 40 8" preserveAspectRatio="none"><path d="M0 4 H40" stroke="currentColor" strokeWidth="1" strokeDasharray="2 3"/></svg>
                </span>
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function ArticleRow({ article, chapter, onOpen }) {
  return (
    <div className="art-row" onClick={() => onOpen(article.id)}>
      <div className="art-meta">
        <span className="art-chap">{chapter.num} · {chapter.title}</span>
        <span className={`art-level lvl-${article.level}`}>{article.level}</span>
        <span className="art-min">{article.minutes} min</span>
      </div>
      <h4>{article.title}</h4>
      <p>{article.excerpt}</p>
    </div>
  );
}

Object.assign(window, { useProgress, TopNav, PathRoadmap, ArticleRow, LS_PROGRESS });