// article.jsx — article reader v2 with progress, calculator, quiz

const { useState: useSA, useEffect: useEA, useRef: useRA, useMemo: useMA } = React;

function ReadingProgress({ targetRef }) {
  const [pct, setPct] = useSA(0);
  useEA(() => {
    const el = targetRef.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      const scrolled = -rect.top;
      const p = Math.max(0, Math.min(1, scrolled / Math.max(1, total)));
      setPct(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, [targetRef]);
  return <div className="read-progress"><i style={{ transform: `scaleX(${pct})` }} /></div>;
}

function CompoundCalc() {
  const [initial, setInitial] = useSA(5000);
  const [monthly, setMonthly] = useSA(200);
  const [years, setYears] = useSA(20);
  const [stockPct, setStockPct] = useSA(60);

  const annual = (stockPct / 100) * 0.07 + ((100 - stockPct) / 100) * 0.025;
  const monthlyR = annual / 12;
  const months = years * 12;
  let value = initial;
  const series = [];
  let invested = initial;
  for (let m = 0; m <= months; m++) {
    if (m > 0) { value = value * (1 + monthlyR) + monthly; invested += monthly; }
    if (m % 12 === 0) series.push({ year: m / 12, value, invested });
  }
  const fmt = (n) => new Intl.NumberFormat('it-IT', { maximumFractionDigits: 0 }).format(Math.round(n));
  const max = Math.max(...series.map(s => s.value));
  const w = 600, h = 200, pad = 24;
  const xFor = (i) => pad + (i / (series.length - 1)) * (w - pad * 2);
  const yFor = (v) => h - pad - (v / max) * (h - pad * 2);
  const path = series.map((s, i) => `${i === 0 ? 'M' : 'L'} ${xFor(i).toFixed(1)} ${yFor(s.value).toFixed(1)}`).join(' ');
  const investedPath = series.map((s, i) => `${i === 0 ? 'M' : 'L'} ${xFor(i).toFixed(1)} ${yFor(s.invested).toFixed(1)}`).join(' ');
  const fillPath = `${path} L ${xFor(series.length - 1).toFixed(1)} ${h - pad} L ${pad} ${h - pad} Z`;

  return (
    <div className="calc">
      <div className="calc-head">
        <span className="calc-eyebrow">STRUMENTO INTERATTIVO</span>
        <h3>Provalo: cosa cambia con un'allocazione diversa?</h3>
        <p>Numeri illustrativi (azioni 7%, obbligazioni 2,5% nominali). Cambia gli ingressi, vedi cosa succede.</p>
      </div>
      <div className="calc-body">
        <div className="calc-controls">
          <label><span>Capitale iniziale</span><span className="calc-val">€ {fmt(initial)}</span><input type="range" min="0" max="50000" step="500" value={initial} onChange={(e) => setInitial(+e.target.value)} /></label>
          <label><span>Versamento mensile</span><span className="calc-val">€ {fmt(monthly)}</span><input type="range" min="0" max="2000" step="50" value={monthly} onChange={(e) => setMonthly(+e.target.value)} /></label>
          <label><span>Orizzonte</span><span className="calc-val">{years} anni</span><input type="range" min="1" max="40" value={years} onChange={(e) => setYears(+e.target.value)} /></label>
          <label><span>Quota azionaria</span><span className="calc-val">{stockPct}% / {100 - stockPct}%</span><input type="range" min="0" max="100" step="5" value={stockPct} onChange={(e) => setStockPct(+e.target.value)} /></label>
        </div>
        <div className="calc-output">
          <div className="calc-figures">
            <div className="cf"><span className="cf-lbl">VERSATO</span><span className="cf-val">€ {fmt(invested)}</span></div>
            <div className="cf primary"><span className="cf-lbl">VALORE STIMATO</span><span className="cf-val">€ {fmt(value)}</span></div>
            <div className="cf"><span className="cf-lbl">INTERESSI</span><span className="cf-val">€ {fmt(value - invested)}</span></div>
          </div>
          <div className="calc-chart">
            <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
              <defs>
                <linearGradient id="cgrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {[0.25, 0.5, 0.75].map((g) => (
                <line key={g} x1={pad} x2={w - pad} y1={pad + g * (h - pad * 2)} y2={pad + g * (h - pad * 2)} stroke="currentColor" strokeOpacity="0.08" strokeDasharray="2 3"/>
              ))}
              <path d={fillPath} fill="url(#cgrad)" />
              <path d={investedPath} stroke="currentColor" strokeOpacity="0.45" strokeWidth="1.2" fill="none" strokeDasharray="3 3"/>
              <path d={path} stroke="var(--accent)" strokeWidth="2.5" fill="none"/>
            </svg>
            <div className="calc-legend">
              <span><i className="leg-line accent" /> Valore stimato</span>
              <span><i className="leg-line dashed" /> Versato</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ProfilesBlock() {
  const [active, setActive] = useSA(1);
  const profiles = window.SF_DATA.PROFILES;
  return (
    <div className="profiles">
      <div className="prof-tabs">
        {profiles.map((p, i) => (
          <button key={p.id} className={`prof-tab ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>{p.name}</button>
        ))}
      </div>
      <div className="prof-body">
        <div className="prof-bar">
          <span className="pb-seg pb-az" style={{ width: `${profiles[active].azioni}%` }}><i>Azioni</i><b>{profiles[active].azioni}%</b></span>
          <span className="pb-seg pb-ob" style={{ width: `${profiles[active].obbligazioni}%` }}><i>Obbligazioni</i><b>{profiles[active].obbligazioni}%</b></span>
          <span className="pb-seg pb-li" style={{ width: `${profiles[active].liquidita}%` }}><i>Liq.</i><b>{profiles[active].liquidita}%</b></span>
        </div>
        <p className="prof-desc">{profiles[active].desc}</p>
      </div>
    </div>
  );
}

function QuizBlock() {
  const [answers, setAnswers] = useSA({});
  const quiz = window.SF_DATA.QUIZ;
  const allAnswered = quiz.every((_, i) => answers[i] != null);
  const correctCount = quiz.filter((q, i) => answers[i] === q.correct).length;
  return (
    <div className="quiz">
      <div className="quiz-head">
        <span className="calc-eyebrow">VERIFICA VELOCE</span>
        <h3>Hai capito il punto?</h3>
        <p>Due domande. Solo per assicurarti di aver portato a casa l'idea.</p>
      </div>
      {quiz.map((q, qi) => {
        const picked = answers[qi];
        return (
          <div key={qi} className="quiz-q">
            <div className="quiz-q-head">
              <span className="quiz-num">{String(qi + 1).padStart(2, '0')}</span>
              <p>{q.q}</p>
            </div>
            <div className="quiz-opts">
              {q.options.map((opt, oi) => {
                let cls = '';
                if (picked != null) {
                  if (oi === q.correct) cls = 'correct';
                  else if (oi === picked) cls = 'wrong';
                }
                return (
                  <button key={oi} className={`quiz-opt ${cls}`} disabled={picked != null} onClick={() => setAnswers({ ...answers, [qi]: oi })}>
                    <span className="qo-letter">{String.fromCharCode(65 + oi)}</span>
                    <span>{opt}</span>
                  </button>
                );
              })}
            </div>
            {picked != null && (
              <div className={`quiz-explain ${picked === q.correct ? 'good' : 'bad'}`}>
                {picked === q.correct ? '✓ Corretto. ' : '✗ Non proprio. '}{q.explain}
              </div>
            )}
          </div>
        );
      })}
      {allAnswered && <div className="quiz-result">{correctCount}/{quiz.length} corrette · {correctCount === quiz.length ? 'Pronto per il prossimo capitolo.' : 'Rileggi la sezione, è normale.'}</div>}
    </div>
  );
}

function ArticleView({ articleId, chapters, progressData, setVisited, onNav, onArticle }) {
  const content = window.SF_DATA.ARTICLE_CONTENT[articleId];
  const articleRef = useRA(null);

  const meta = useMA(() => {
    for (const c of chapters) {
      const i = c.articles.findIndex((a) => a.id === articleId);
      if (i >= 0) {
        const article = c.articles[i];
        const prev = c.articles[i - 1];
        let next = c.articles[i + 1];
        if (!next) {
          const ci = chapters.indexOf(c);
          if (chapters[ci + 1]) next = chapters[ci + 1].articles[0];
        }
        return { chapter: c, article, prev, next };
      }
    }
    return null;
  }, [articleId, chapters]);

  useEA(() => { setVisited(articleId); }, [articleId, setVisited]);

  if (!meta) return <div className="article-missing"><p>Articolo non disponibile.</p><button className="btn primary" onClick={() => onNav({ view: 'path' })}>Torna al percorso</button></div>;

  // If no full content, show excerpt-only view
  if (!content) {
    return (
      <div className="article-view">
        <div className="art-breadcrumb">
          <a href="#" onClick={(e) => { e.preventDefault(); onNav({ view: 'home' }); }}>Home</a>
          <span>/</span><a href="#" onClick={(e) => { e.preventDefault(); onNav({ view: 'path' }); }}>Percorso</a>
          <span>/</span><span>{meta.chapter.num} {meta.chapter.title}</span>
        </div>
        <article className="article">
          <header className="art-header">
            <div className="art-header-meta">
              <span className="art-chap">CAP. {meta.chapter.num} · {meta.chapter.title}</span>
              <span className={`art-level lvl-${meta.article.level}`}>{meta.article.level}</span>
              <span className="art-min">{meta.article.minutes} min</span>
            </div>
            <h1>{meta.article.title}</h1>
            <p className="art-subtitle">{meta.article.excerpt}</p>
          </header>
          <div className="art-body-content">
            <p style={{ padding: '40px', background: 'var(--bg-elev)', borderRadius: 'var(--radius-lg)', textAlign: 'center', color: 'var(--ink-3)' }}>
              Articolo in lavorazione. Il contenuto completo arriverà presto.<br/><br/>
              Nel frattempo puoi leggere uno degli articoli completi: <a href="#" onClick={(e) => { e.preventDefault(); onArticle('asset-allocation'); }} style={{color:'var(--accent)',textDecoration:'underline'}}>Asset allocation</a>, <a href="#" onClick={(e) => { e.preventDefault(); onArticle('etf'); }} style={{color:'var(--accent)',textDecoration:'underline'}}>ETF</a>, <a href="#" onClick={(e) => { e.preventDefault(); onArticle('pac'); }} style={{color:'var(--accent)',textDecoration:'underline'}}>PAC</a>.
            </p>
          </div>
        </article>
        <ArticleNav meta={meta} onArticle={onArticle} />
      </div>
    );
  }

  return (
    <div className="article-view">
      <ReadingProgress targetRef={articleRef} />
      <div className="art-breadcrumb">
        <a href="#" onClick={(e) => { e.preventDefault(); onNav({ view: 'home' }); }}>Home</a>
        <span>/</span><a href="#" onClick={(e) => { e.preventDefault(); onNav({ view: 'path' }); }}>Percorso</a>
        <span>/</span><span>{meta.chapter.num} {meta.chapter.title}</span>
      </div>
      <article ref={articleRef} className="article">
        <header className="art-header">
          <div className="art-header-meta">
            <span className="art-chap">CAP. {meta.chapter.num} · {meta.chapter.title}</span>
            <span className={`art-level lvl-${content.level}`}>{content.level}</span>
            <span className="art-min">{content.minutes} min di lettura</span>
          </div>
          <h1>{content.title}</h1>
          <p className="art-subtitle">{content.subtitle}</p>
          <div className="art-byline">
            <span>{content.author}</span><span className="dot-sep" /><span>{content.date}</span>
          </div>
        </header>
        <div className="art-body-content">
          {content.sections.map((s, i) => {
            if (s.kind === 'paragraph') {
              // Allow simple bold via **text**
              const parts = s.body.split(/(\*\*[^*]+\*\*)/g);
              return <p key={i}>{parts.map((p, pi) => p.startsWith('**') ? <strong key={pi}>{p.slice(2, -2)}</strong> : p)}</p>;
            }
            if (s.kind === 'heading') return <h2 key={i}>{s.body}</h2>;
            if (s.kind === 'pullquote') return <blockquote key={i} className="pullquote"><p>{s.body}</p></blockquote>;
            if (s.kind === 'profiles') return <ProfilesBlock key={i} />;
            if (s.kind === 'calculator') return <CompoundCalc key={i} />;
            if (s.kind === 'quiz') return <QuizBlock key={i} />;
            return null;
          })}
        </div>
      </article>
      <ArticleNav meta={meta} onArticle={onArticle} />
    </div>
  );
}

function ArticleNav({ meta, onArticle }) {
  return (
    <nav className="art-nav">
      {meta.prev ? (
        <button className="art-nav-btn prev" onClick={() => onArticle(meta.prev.id)}>
          <span className="ann-dir">← Precedente</span>
          <span className="ann-title">{meta.prev.title}</span>
        </button>
      ) : <span />}
      {meta.next ? (
        <button className="art-nav-btn next" onClick={() => onArticle(meta.next.id)}>
          <span className="ann-dir">Prossimo →</span>
          <span className="ann-title">{meta.next.title}</span>
        </button>
      ) : <span />}
    </nav>
  );
}

window.ArticleView = ArticleView;