// Investimenti module
const Investimenti = () => {
  const I = window.REGULA_EXT.investments;

  // Equity curve
  const curve = [100, 101.2, 99.8, 102.4, 103.1, 101.9, 104.2, 105.8, 104.9, 106.4, 105.1, 105.8];

  const EquityCurve = ({ w = 860, h = 180 }) => {
    const padL = 32, padR = 12, padT = 12, padB = 24;
    const cw = w - padL - padR, ch = h - padT - padB;
    const min = 95, max = 110;
    const step = cw / (curve.length - 1);
    const y = v => padT + ch - ((v - min) / (max - min)) * ch;
    const pts = curve.map((v, i) => [padL + i * step, y(v)]);
    const d = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0] + ',' + p[1]).join(' ');
    const bench = [100, 100.4, 99.9, 100.8, 101.2, 100.6, 101.4, 102.0, 101.7, 102.8, 102.1, 102.4];
    const bpts = bench.map((v, i) => [padL + i * step, y(v)]);
    const bd = bpts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0] + ',' + p[1]).join(' ');
    return (
      <svg width={w} height={h}>
        {[95, 100, 105, 110].map((t, i) => (
          <g key={i}>
            <line x1={padL} x2={w-padR} y1={y(t)} y2={y(t)} className="grid-line" />
            <text x={padL-4} y={y(t)+3} textAnchor="end" className="axis-label">{t}</text>
          </g>
        ))}
        <path d={bd} stroke="var(--muted)" strokeWidth="1.25" strokeDasharray="3 3" fill="none" />
        <path d={d} stroke="var(--ink)" strokeWidth="1.5" fill="none" />
        {['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'].map((m, i) => (
          <text key={i} x={padL + i * step} y={h - 6} textAnchor="middle" className="axis-label">{m}</text>
        ))}
      </svg>
    );
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Investimenti · portafoglio esterno</h1>
          <div className="page-subtitle">31.8 M€ AUM · benchmark MSCI World · ultimo prezzo 18:00</div>
        </div>
        <div className="page-meta">
          <button className="pill-select">YTD 2026 <Icon name="down" size={10} /></button>
          <button className="btn btn-primary"><Icon name="sparkle" size={12} /> Suggerisci rebalance</button>
        </div>
      </div>

      <div className="kpi-hero-grid">
        <KpiHero label="AUM" value={31.8} unit="M€" delta={3.2} deltaAbs="+1.0 M€" spark={[30,30.2,30.5,30.8,31,31.2,31.5,31.6,31.8]} />
        <KpiHero label="Rendimento YTD" value={5.8} unit="%" delta={2.4} deltaAbs="vs bench. +2.4 p.p." spark={[0,1,2,2.5,3,4,4.8,5.2,5.8]} />
        <KpiHero label="Volatilità" value={9.2} unit="%" delta={-0.4} deltaAbs="−0.4 p.p." spark={[10,9.8,9.6,9.5,9.4,9.3,9.25,9.2,9.2]} invert={true} />
        <KpiHero label="Max drawdown" value={-3.8} unit="%" delta={0} deltaAbs="12 mesi" spark={[-4,-3.9,-3.8,-3.8,-3.8,-3.8,-3.8,-3.8,-3.8]} />
      </div>

      <div className="section cols-2-3">
        <div className="panel">
          <div className="panel-head"><div className="panel-title">Asset allocation</div></div>
          <div className="panel-body">
            <AssetDonut data={I.assetClasses.map(a => ({ label: a.label, value: a.value, pct: a.pct }))} />
          </div>
        </div>
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Equity curve vs benchmark</div>
            <div style={{ display: 'flex', gap: 12, fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              <span><span style={{ display: 'inline-block', width: 12, height: 2, background: 'var(--ink)', marginRight: 5, verticalAlign: 'middle' }} />Portafoglio</span>
              <span><span style={{ display: 'inline-block', width: 12, height: 1, background: 'var(--muted)', marginRight: 5, verticalAlign: 'middle' }} />Benchmark</span>
            </div>
          </div>
          <div className="panel-body">
            <EquityCurve />
          </div>
        </div>
      </div>

      <div className="section cols-2">
        <div className="panel">
          <div className="panel-head"><div className="panel-title">Posizioni</div></div>
          <table className="data">
            <thead><tr><th>Strumento</th><th>Classe</th><th className="n">Peso %</th><th className="n">Rendim.</th><th>Rischio</th></tr></thead>
            <tbody>
              {I.positions.map((p, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 500 }}>{p.name}</td>
                  <td><span className="chip">{p.class}</span></td>
                  <td className="n">{p.weight.toFixed(1)}%</td>
                  <td className="n" style={{ color: p.ret > 5 ? 'var(--green)' : 'var(--ink-2)' }}>+{p.ret.toFixed(1)}%</td>
                  <td style={{ fontSize: 11, color: 'var(--muted)' }}>{p.risk}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Watchlist · opportunità AI</div>
            <span className="chip accent"><Icon name="sparkle" size={10} /> {I.watchlist.length} note</span>
          </div>
          <div>
            {I.watchlist.map((w, i) => (
              <div key={i} style={{ padding: '12px 16px', borderBottom: i < I.watchlist.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--f-mono)', fontSize: 10, fontWeight: 600 }}>R</div>
                  <span style={{ fontSize: 12, fontWeight: 500 }}>{w.name}</span>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--muted)', paddingLeft: 26 }}>{w.note}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="section">
        <div className="panel">
          <div className="panel-head"><div className="panel-title">Matrice rischio / rendimento</div></div>
          <div className="panel-body" style={{ display: 'flex', justifyContent: 'center' }}>
            <svg width="680" height="240">
              {[0, 1, 2, 3, 4].map(i => (
                <line key={'v'+i} x1={60 + i*140} x2={60 + i*140} y1={20} y2={200} className="grid-line" />
              ))}
              {[0, 1, 2, 3].map(i => (
                <line key={'h'+i} x1={60} x2={620} y1={20 + i*60} y2={20 + i*60} className="grid-line" />
              ))}
              <text x={340} y={230} textAnchor="middle" className="axis-label">Rischio (volatilità %)</text>
              <text x={20} y={110} textAnchor="middle" transform="rotate(-90 20 110)" className="axis-label">Rendimento atteso %</text>
              {I.positions.map((p, i) => {
                const x = 60 + (i === 0 ? 240 : i === 1 ? 80 : i === 2 ? 520 : i === 3 ? 140 : 60);
                const y = 200 - p.ret * 8;
                const r = 6 + p.weight * 0.8;
                const colors = ['#2A3B48', '#5B7A6B', '#A89468', '#7A5B4A', '#C4BFB3'];
                return (
                  <g key={i}>
                    <circle cx={x} cy={y} r={r} fill={colors[i]} opacity="0.85" />
                    <text x={x} y={y - r - 4} textAnchor="middle" style={{ fontFamily: 'var(--f-mono)', fontSize: 10, fill: 'var(--ink-2)' }}>{p.class}</text>
                  </g>
                );
              })}
            </svg>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Investimenti });