// Flagship dashboard: Omzet & Marge — full root-cause + scenarios + actions

const { useState: useStateRev } = React;

/**
 * KpiTriple — toont een metriek in drie kolommen:
 * 1. Huidig (dit jaar / geselecteerde periode)
 * 2. Vorige periode (afhankelijk van compare-filter: YoY of MoM)
 * 3. Prognose (Causal Impact model, BETA — alleen als voldoende data)
 *
 * Props:
 *   label:        string — naam van de metriek
 *   current:      number | null
 *   previous:     number | null
 *   forecast:     { value: number, confidence: number, available: boolean, reason: string } | null
 *   format:       'currency' | 'percent' | 'number' — opmaak
 *   compare:      'yoy' | 'mom' — label voor kolom 2
 *   invertDelta:  bool — of een hogere waarde slecht is (bijv. bounce rate)
 */
function KpiTriple({ label, current, previous, forecast, format = 'currency', compare = 'yoy', invertDelta = false }) {
  const fmt = (v) => {
    if (v === null || v === undefined) return '—';
    if (format === 'currency') return v >= 1000000 ? `€ ${(v/1000000).toFixed(1)}M` : v >= 1000 ? `€ ${(v/1000).toFixed(0)}k` : `€ ${Math.round(v)}`;
    if (format === 'percent') return `${v.toFixed(1)}%`;
    return v >= 1000 ? `${(v/1000).toFixed(1)}k` : String(Math.round(v));
  };

  const delta = (current !== null && previous !== null && previous !== 0)
    ? ((current - previous) / Math.abs(previous)) * 100
    : null;

  const deltaColor = delta === null ? 'var(--ink-400)'
    : (invertDelta ? delta > 0 : delta < 0) ? '#c62828' : '#008873';
  const deltaBg   = delta === null ? 'var(--ink-100)'
    : (invertDelta ? delta > 0 : delta < 0) ? '#fdecea' : 'var(--ser-teal-50)';

  const compareLabel = compare === 'yoy' ? 'Vorig jaar' : 'Vorige maand';
  const confColor = (c) => c >= 75 ? '#008873' : c >= 55 ? '#b37800' : '#c62828';

  return (
    <div style={{background:'white', border:'1px solid var(--ink-100)', borderRadius:12, overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'10px 16px', borderBottom:'1px solid var(--ink-100)', background:'var(--ink-25)'}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.08em'}}>{label}</div>
      </div>

      {/* Drie kolommen */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr'}}>
        {/* Huidig */}
        <div style={{padding:'14px 16px', borderRight:'1px solid var(--ink-100)'}}>
          <div style={{fontSize:10, color:'var(--ink-400)', fontWeight:600, marginBottom:6}}>NU</div>
          <div style={{fontSize:20, fontWeight:800, color:'var(--ink-900)', lineHeight:1}}>{fmt(current)}</div>
          {delta !== null && (
            <div style={{display:'inline-flex', alignItems:'center', gap:4, marginTop:6, padding:'2px 7px', borderRadius:999, background:deltaBg}}>
              <span style={{fontSize:11, fontWeight:700, color:deltaColor}}>
                {delta > 0 ? '↑' : '↓'} {Math.abs(delta).toFixed(1)}%
              </span>
            </div>
          )}
        </div>

        {/* Vorige periode */}
        <div style={{padding:'14px 16px', borderRight:'1px solid var(--ink-100)'}}>
          <div style={{fontSize:10, color:'var(--ink-400)', fontWeight:600, marginBottom:6, textTransform:'uppercase'}}>{compareLabel}</div>
          <div style={{fontSize:20, fontWeight:800, color:'var(--ink-500)', lineHeight:1}}>{fmt(previous)}</div>
        </div>

        {/* Prognose */}
        <div style={{padding:'14px 16px', position:'relative'}}>
          <div style={{display:'flex', alignItems:'center', gap:5, marginBottom:6}}>
            <span style={{fontSize:10, color:'var(--ink-400)', fontWeight:600, textTransform:'uppercase'}}>Prognose</span>
            {window.BetaBadge && <window.BetaBadge />}
          </div>
          {forecast?.available ? (
            <>
              <div style={{fontSize:20, fontWeight:800, color:'#7c5cff', lineHeight:1}}>{fmt(forecast.value)}</div>
              <div style={{display:'inline-flex', alignItems:'center', gap:4, marginTop:6, padding:'2px 7px', borderRadius:999, background: `${confColor(forecast.confidence)}22`}}>
                <span style={{fontSize:10, fontWeight:700, color: confColor(forecast.confidence)}}>{forecast.confidence}% zekerheid</span>
              </div>
            </>
          ) : (
            <div style={{fontSize:12, color:'var(--ink-400)', lineHeight:1.5, marginTop:4}}>
              {forecast?.reason || 'Onvoldoende data'}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.KpiTriple = KpiTriple;

function NoDataState({ message = 'Geen data beschikbaar', sub = 'Koppel een databron om inzichten te zien.' }) {
  return (
    <div style={{textAlign:'center', padding:'48px 24px', color:'var(--ink-400)'}}>
      <div style={{fontSize:36, marginBottom:16}}>📊</div>
      <div style={{fontSize:15, fontWeight:600, color:'var(--ink-700)', marginBottom:6}}>{message}</div>
      <div style={{fontSize:13, lineHeight:1.6}}>{sub}</div>
    </div>
  );
}

function RevenueDashboard({ period, compare }) {
  const hasData = false; // wordt true zodra echte data beschikbaar is
  if (!hasData) return (
    <NoDataState
      message="Omzet &amp; Marge — geen data"
      sub="Koppel GA4, Google Ads en Shopify om de revenue-analyse te starten."
    />
  );
  const D = window.ANALYTICS_DATA;
  const { CAUSES, REVENUE_SERIES, SCENARIOS, ACTIONS, CHANNELS, FUNNEL, COMPETITORS, Icons } = D;

  // Header KPI
  const totalNow = REVENUE_SERIES.reduce((a, p) => a + p.now, 0);
  const totalPrev = REVENUE_SERIES.reduce((a, p) => a + p.prev, 0);
  const gap = totalNow - totalPrev;
  const gapPct = (gap / totalPrev) * 100;

  // Waterfall items: starting from prev, applying causes, ending at now
  const waterfallItems = [
    { label: 'Vorig jaar', sub: 'baseline 90d', value: totalPrev },
    ...CAUSES.map(c => ({ label: c.label, sub: c.severity, value: c.impact })),
    { label: 'Realisatie', sub: 'huidige periode', value: totalNow },
  ];

  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>

      {/* HERO: revenue with breakdown */}
      <div className="hero-revenue">
        <div className="top">
          <div>
            <div className="lbl">Omzet · laatste 90 dagen</div>
            <div className="big">€ {Math.round(totalNow/1000).toLocaleString('nl-NL')}k</div>
            <div className="delta-row">
              <span className="delta-pill">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M7 10l5 5 5-5"/></svg>
                {gapPct.toFixed(1)}%
              </span>
              <span className="vs">vs vorig jaar (€ {Math.round(totalPrev/1000).toLocaleString('nl-NL')}k)</span>
              <span className="vs">·</span>
              <span className="vs">verschil: <strong style={{color:'var(--err)'}}>− € {Math.abs(Math.round(gap/1000)).toLocaleString('nl-NL')}k</strong></span>
            </div>
          </div>
          <div>
            <div className="chart-area">
              {window.ChartA && <window.ChartA.RevenueLine series={REVENUE_SERIES} height={110}/>}
            </div>
            <div style={{display:'flex', gap:14, fontSize:11, color:'var(--ink-500)', marginTop:6, justifyContent:'flex-end'}}>
              <span style={{display:'inline-flex', alignItems:'center', gap:4}}><span style={{width:10, height:2, background:'#e53935'}}></span>Dit jaar</span>
              <span style={{display:'inline-flex', alignItems:'center', gap:4}}><span style={{width:10, height:1.4, borderTop:'1px dashed #a8acc0'}}></span>Vorig jaar</span>
            </div>
          </div>
        </div>
        <div style={{padding:'18px 28px', display:'flex', alignItems:'flex-start', gap:14, background:'var(--ink-25)'}}>
          <div style={{width:28, height:28, borderRadius:7, background:'linear-gradient(135deg, var(--ser-teal), #7c5cff)', color:'white', display:'grid', placeItems:'center', fontWeight:800, fontSize:11, fontFamily:'var(--font-mono)', flexShrink:0}}>AI</div>
          <p style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.55, margin:0}}>
            <strong>Wat we hier zien:</strong> de daling concentreert zich vanaf <strong>16 maart</strong> en is voor <strong>~78%</strong> verklaard door drie oorzaken — <strong>iOS-checkout-bug</strong>, <strong>concurrentie-prijscampagne</strong> en <strong>AIO-CTR-erosie</strong>. De resterende 22% is markt + tracking. Niet alle oorzaken zijn 'echt' verlies: ~€ 4k zit in tracking-modeling.
          </p>
        </div>
      </div>

      {/* KPI grid met dit jaar / vorige periode / prognose */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:12, marginBottom:20}}>
        <KpiTriple
          label="Omzet"
          current={null}
          previous={null}
          forecast={{ available: false, reason: 'Koppel databronnen voor prognose' }}
          format="currency"
          compare={compare}
        />
        <KpiTriple
          label="Transacties"
          current={null}
          previous={null}
          forecast={{ available: false, reason: 'Koppel databronnen voor prognose' }}
          format="number"
          compare={compare}
        />
        <KpiTriple
          label="Conversie"
          current={null}
          previous={null}
          forecast={{ available: false, reason: 'Koppel databronnen voor prognose' }}
          format="percent"
          compare={compare}
          invertDelta={false}
        />
        <KpiTriple
          label="Gem. orderwaarde"
          current={null}
          previous={null}
          forecast={{ available: false, reason: 'Koppel databronnen voor prognose' }}
          format="currency"
          compare={compare}
        />
      </div>

      {/* DIAGNOSE: waterfall attribution */}
      <div className="panel">
        <div className="panel-head">
          <h3>Waarom de daling? — Attributie waterval</h3>
          <span style={{fontSize:12, color:'var(--ink-500)'}}>Causal Impact + multi-touch attribution</span>
        </div>
        <div className="panel-body">
          <div className="waterfall">
            {window.ChartA && <window.ChartA.Waterfall items={waterfallItems}/>}
          </div>
          <div className="ai-insight">
            <div className="ai-icon">AI</div>
            <div>
              <strong>Niet alles is jouw schuld.</strong> Markt-effect (-€12.6k) + AIO/SERP-shift (-€22.4k) zijn structureel buiten je controle, samen ~25% van de gap. De interne én sitespeed-issues (samen -€76.6k) zijn <strong>wél fixbaar in 4 weken</strong>.
            </div>
          </div>
        </div>
      </div>

      {/* DIAGNOSE: cause cards */}
      <div className="dash-section-head">
        <div className="left">
          <h2>Oorzaak-diagnose</h2>
          <span className="sub">7 categorieën — gesorteerd op impact</span>
        </div>
        <div style={{display:'flex', gap:6, alignItems:'center', fontSize:11, color:'var(--ink-500)'}}>
          <span className="severity high"><span className="dot"></span>Hoog</span>
          <span className="severity med"><span className="dot"></span>Middel</span>
          <span className="severity low"><span className="dot"></span>Laag</span>
        </div>
      </div>

      <div className="causes-grid">
        {CAUSES.slice().sort((a,b) => Math.abs(b.impact) - Math.abs(a.impact)).map(c => (
          <CauseCard key={c.id} cause={c}/>
        ))}
      </div>

      {/* AI ribbon — next-best-actions */}
      <div className="ai-ribbon">
        <div>
          <div className="eyebrow">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>
            AI-aanbevelingen
          </div>
          <h2>5 acties → +€ 132k / maand recovery</h2>
          <p>De analyse identificeert 5 concrete, rangschikbare ingrepen. Samen sluiten ze ~93% van de gap binnen 12 weken — als alles meezit.</p>
        </div>
        <div className="actions">
          <button className="btn-go">Naar AI-kansen <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></button>
        </div>
      </div>

      <div className="actions-list">
        {ACTIONS.map(a => (
          <div key={a.rank} className="action-item">
            <div className="num">{a.rank}</div>
            <div className="body">
              <div className="ttl">{a.title}</div>
              <div className="meta">
                <span>{a.why}</span>
                <span>·</span>
                <span>Effort: {a.effort}</span>
              </div>
            </div>
            <span className="impact-pill">{a.impact}</span>
          </div>
        ))}
      </div>

      {/* Kanaal-bijdrage */}
      <div className="dash-section-head">
        <div className="left">
          <h2>Kanaal-bijdrage</h2>
          <span className="sub">Omzet & Δ per kanaal · YoY</span>
        </div>
      </div>
      <div className="panel">
        <div className="panel-body revenue-channels" style={{display:'grid', gridTemplateColumns:'1fr 280px', gap:24, alignItems:'center'}}>
          <div className="comparator">
            {CHANNELS.map(ch => (
              <div key={ch.id} className="cmp-row" style={{padding:'8px 0', borderBottom:'1px solid var(--ink-100)'}}>
                <div className="lbl" style={{display:'flex', alignItems:'center', gap:8}}>
                  <span className="sev-dot" style={{background: ch.color}}></span>{ch.label}
                </div>
                <div className="bar">
                  <div style={{width: `${(ch.rev/1200000)*100}%`, background: ch.color}}></div>
                </div>
                <div className="vv">€ {Math.round(ch.rev/1000)}k <span style={{fontSize:11, fontWeight:700, color: ch.deltaPct < 0 ? 'var(--err)' : 'var(--ok)', marginLeft:6}}>{ch.deltaPct >= 0 ? '+' : ''}{ch.deltaPct}%</span></div>
              </div>
            ))}
          </div>
          <div className="donut-wrap" style={{flexDirection:'column', alignItems:'center'}}>
            {window.ChartA && <window.ChartA.Donut size={150} slices={CHANNELS.map(ch => ({value: ch.rev, color: ch.color}))}/>}
            <div style={{fontSize:11, color:'var(--ink-500)', marginTop:6}}>Mix — laatste 90d</div>
          </div>
        </div>
        <div className="ai-insight" style={{margin:'0 16px 16px'}}>
          <div className="ai-icon">AI</div>
          <div><strong>Organic stort hardst in (-14.2%)</strong> en is je grootste kanaal — daar zit ~70% van de gap. Email (+12%) en Direct compenseren niet. Investeer disproportioneel in organic recovery.</div>
        </div>
      </div>

      {/* Funnel-doorvoer & concurrentie */}
      <div className="dash-section-head">
        <div className="left"><h2>Funnel-doorvoer & concurrentie</h2><span className="sub">Diepgaande analyse</span></div>
      </div>
      <div className="revenue-funnel-row" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14}}>
        <div className="panel">
          <div className="panel-head"><h3>Funnel · 90d</h3><span style={{fontSize:11, color:'var(--ink-500)'}}>conv. eindigt op 2.95% (was 3.36%)</span></div>
          <div className="panel-body" style={{height: 240}}>
            {window.ChartA && <window.ChartA.Funnel steps={FUNNEL}/>}
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><h3>Share-of-voice</h3><span style={{fontSize:11, color:'var(--ink-500)'}}>Top-5 NL bloemen</span></div>
          <div className="panel-body" style={{padding:0}}>
            <table className="data">
              <thead><tr><th>#</th><th>Speler</th><th className="num">SoV</th><th className="num">Δ pp</th></tr></thead>
              <tbody>
                {COMPETITORS.map(c => (
                  <tr key={c.name} style={c.self ? {background: 'var(--ser-teal-50)'} : {}}>
                    <td>{c.rank}</td>
                    <td style={{fontWeight: c.self ? 700 : 500}}>{c.name}{c.self && <span style={{fontSize:10, color:'var(--ser-teal-600)', marginLeft:6, fontWeight:700}}>JIJ</span>}</td>
                    <td className="num">{c.sov}%</td>
                    <td className="num" style={{color: c.deltaSov < 0 ? 'var(--err)' : c.deltaSov > 0 ? 'var(--ok)' : 'var(--ink-500)', fontWeight: 700}}>{c.deltaSov > 0 ? '+' : ''}{c.deltaSov}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* SCENARIOS — visible to all lenses but exec gets less detail */}
      <div className="dash-section-head">
        <div className="left">
          <h2>Scenario's — wat als…</h2>
          <span className="sub">Modelling op basis van 24-maand historie + concurrent-data</span>
        </div>
      </div>
      <div className="scenarios">
        {SCENARIOS.map(s => (
          <div key={s.id} className={`scen ${s.recommended ? 'recommended' : ''}`}>
            {s.recommended && <span className="badge-rec">aanbevolen</span>}
            <h4>{s.title}</h4>
            <div className="desc">{s.desc}</div>
            <div className={`outcome ${s.outcomeKind}`}>{s.outcome}</div>
            <div className="row-meta">
              <div><span>Confidence</span><span className="vv">{s.confidence}</span></div>
              <div><span>Termijn</span><span className="vv">{s.timeframe}</span></div>
              <div><span>ROI</span><span className="vv">{s.roi}</span></div>
            </div>
            <ul style={{margin:0, paddingLeft:18, fontSize:12, color:'var(--ink-700)', lineHeight:1.6}}>
              {s.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>

      <ForecastPanel period={period} compare={compare} />

    </div>
  );
}

function CauseCard({ cause }) {
  const D = window.ANALYTICS_DATA;
  const Ico = D.Icons[cause.icon];
  const sign = cause.impact < 0 ? 'neg' : cause.impact > 0 ? 'pos' : 'neu';
  const fmt = (v) => `${v >= 0 ? '+' : '−'}€ ${Math.abs(Math.round(v/1000))}k`;
  return (
    <div className="cause-card">
      <div className="head">
        <div className="ico" style={{background: cause.color}}>{Ico}</div>
        <div style={{flex:1}}>
          <div className="lbl-tag">{cause.label}</div>
          <h4>{cause.summary.split('.')[0]}.</h4>
        </div>
        <div className="score-col">
          <span className={`num ${sign}`}>{fmt(cause.impact)}</span>
          <span className="lbl">90d</span>
        </div>
      </div>
      <div className="findings">
        {cause.findings.map((f, i) => (
          <div key={i} className="item"><span className="pip"></span>{f}</div>
        ))}
      </div>
      <div className="footer">
        <span className={`severity ${cause.severity}`}>
          <span className="dot"></span>
          {cause.severity === 'high' ? 'Hoge urgentie' : cause.severity === 'med' ? 'Medium' : 'Lage urgentie'}
        </span>
        <a style={{fontSize:12, fontWeight:600, color:'var(--ser-navy)', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:4}}>
          Diepgaand →
        </a>
      </div>
    </div>
  );
}

function CausalImpactChart({ forecasts, historical = [], previousYear = [], showSeasonal, seasonal }) {
  // forecasts: array van {month_offset, base, good, bad, seasonal_factor, confidence}
  // historical: array van maandwaarden dit jaar (actuals)
  // previousYear: array van maandwaarden vorig jaar

  const W = 720, H = 220, PL = 52, PR = 16, PT = 16, PB = 32;
  const innerW = W - PL - PR;
  const innerH = H - PT - PB;

  // Combineer alle waarden voor schaling
  const allVals = [
    ...forecasts.flatMap(f => [f.base, f.good, f.bad]),
    ...historical.filter(Boolean),
    ...previousYear.filter(Boolean),
  ].filter(v => v != null && !isNaN(v));

  if (allVals.length === 0) return null;

  const minV = Math.min(...allVals) * 0.88;
  const maxV = Math.max(...allVals) * 1.08;
  const totalPoints = Math.max(historical.length + forecasts.length, 12);

  const x = i => PL + (i / (totalPoints - 1)) * innerW;
  const y = v => PT + innerH - ((v - minV) / (maxV - minV)) * innerH;

  // Y-as labels
  const yTicks = 4;
  const yLabels = Array.from({length: yTicks + 1}, (_, i) => {
    const v = minV + (maxV - minV) * (i / yTicks);
    return { v, y: y(v), label: v >= 1000000 ? `€${(v/1000000).toFixed(1)}M` : v >= 1000 ? `€${(v/1000).toFixed(0)}k` : `€${Math.round(v)}` };
  });

  // X-as maandlabels
  const months = ['Jan','Feb','Mrt','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'];
  const currentMonth = new Date().getMonth();

  // Scheidingspunt: waar historisch eindigt en forecast begint
  const splitX = historical.length > 0 ? x(historical.length - 1) : x(0);

  // SVG paths
  const histPath = historical.map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i)},${y(v)}`).join(' ');

  const prevPath = previousYear.map((v, i) => {
    if (v == null) return null;
    return `${i === 0 || previousYear[i-1] == null ? 'M' : 'L'}${x(i)},${y(v)}`;
  }).filter(Boolean).join(' ');

  const fcOffset = historical.length;
  const fcBasePath = forecasts.map((f, i) => `${i === 0 ? 'M' : 'L'}${x(fcOffset + i)},${y(f.base)}`).join(' ');

  const fcBand = forecasts.length > 1
    ? forecasts.map((f, i) => `${i === 0 ? 'M' : 'L'}${x(fcOffset + i)},${y(f.good)}`).join(' ')
      + ' ' + [...forecasts].reverse().map((f, i, a) => `L${x(fcOffset + a.length - 1 - i)},${y(f.bad)}`).join(' ') + ' Z'
    : '';

  const adjPath = (showSeasonal && seasonal?.available)
    ? historical.map((v, i) => {
        const idx = seasonal.indices[i % 12] || 1;
        const adj = v / idx;
        return `${i === 0 ? 'M' : 'L'}${x(i)},${y(adj)}`;
      }).join(' ')
    : '';

  // Confidence kleur voor prognose
  const avgConf = forecasts.length > 0 ? forecasts.reduce((s, f) => s + f.confidence, 0) / forecasts.length : 0;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width:'100%', height:H, overflow:'visible'}}>
      {/* Achtergrond raster */}
      {yLabels.map((t, i) => (
        <g key={i}>
          <line x1={PL} x2={W-PR} y1={t.y} y2={t.y} stroke="#ebedf3" strokeWidth="1"/>
          <text x={PL-6} y={t.y+4} textAnchor="end" fontSize="9" fill="#a8acc0">{t.label}</text>
        </g>
      ))}

      {/* Forecast zone achtergrond */}
      {historical.length > 0 && forecasts.length > 0 && (
        <rect x={splitX} y={PT} width={W - PR - splitX} height={innerH}
          fill="rgba(124,92,255,0.04)" />
      )}

      {/* Confidence band (forecast) */}
      {fcBand && <path d={fcBand} fill="rgba(124,92,255,0.10)" />}

      {/* Vorig jaar lijn */}
      {prevPath && <path d={prevPath} fill="none" stroke="#a8acc0" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.7"/>}

      {/* Seizoensgecorrigeerde lijn */}
      {adjPath && <path d={adjPath} fill="none" stroke="#f5a523" strokeWidth="1.5" strokeDasharray="3 2" opacity="0.8"/>}

      {/* Forecast lijn */}
      {fcBasePath && <path d={fcBasePath} fill="none" stroke="#7c5cff" strokeWidth="2" strokeDasharray="6 3"/>}

      {/* Actuals lijn (dit jaar) — bovenop alles */}
      {histPath && <path d={histPath} fill="none" stroke="var(--ser-navy)" strokeWidth="2.5"/>}

      {/* Scheidingslijn huidig/forecast */}
      {historical.length > 0 && forecasts.length > 0 && (
        <line x1={splitX} x2={splitX} y1={PT} y2={H-PB} stroke="#7c5cff" strokeWidth="1" strokeDasharray="3 2" opacity="0.5"/>
      )}

      {/* Confidence dots op forecast */}
      {forecasts.filter((_, i) => i % 3 === 0).map((f, i) => {
        const xi = x(fcOffset + i * 3);
        const yi = y(f.base);
        const col = f.confidence >= 75 ? '#008873' : f.confidence >= 55 ? '#f5a523' : '#e53935';
        return <circle key={i} cx={xi} cy={yi} r="3" fill={col} opacity="0.8" />;
      })}

      {/* X-as labels */}
      {Array.from({length: Math.min(totalPoints, 13)}, (_, i) => {
        if (i % Math.ceil(totalPoints / 12) !== 0) return null;
        const label = months[(currentMonth - historical.length + i + 24) % 12];
        const isForecast = i >= historical.length;
        return (
          <text key={i} x={x(i)} y={H - 4} textAnchor="middle" fontSize="9"
            fill={isForecast ? '#7c5cff' : '#a8acc0'} fontWeight={isForecast ? '600' : '400'}>
            {label}
          </text>
        );
      })}

      {/* "Nu" label */}
      {historical.length > 0 && (
        <text x={splitX + 4} y={PT + 10} fontSize="9" fill="#7c5cff" fontWeight="700">PROGNOSE →</text>
      )}
    </svg>
  );
}

function ForecastExplanation({ forecast, seasonal }) {
  if (!forecast) return null;
  const conf = forecast.annual?.confidence || 0;
  const trend = forecast.trend_slope_pct || 0;
  const confLabel = conf >= 75 ? 'hoog' : conf >= 55 ? 'matig' : 'laag';
  const confColor = conf >= 75 ? '#008873' : conf >= 55 ? '#b37800' : '#c62828';

  return (
    <div style={{
      background:'rgba(124,92,255,0.06)', border:'1px solid rgba(124,92,255,0.15)',
      borderRadius:10, padding:'14px 16px', fontSize:12, lineHeight:1.6,
      display:'flex', flexDirection:'column', gap:8,
    }}>
      <div style={{display:'flex', alignItems:'center', gap:8}}>
        <span style={{fontSize:14}}>🔮</span>
        <strong style={{color:'var(--ink-900)'}}>Hoe werkt deze prognose?</strong>
        {window.BetaBadge && <window.BetaBadge tooltip="Prognoses zijn statistische schattingen op basis van historische trends. Geen garanties." />}
      </div>
      <div style={{color:'var(--ink-600)'}}>
        De prognose gebruikt een lineaire trendlijn op {seasonal?.available ? 'seizoensgecorrigeerde' : 'ruwe'} historische data.
        {trend !== 0 && ` De maandelijkse trend is ${trend > 0 ? '+' : ''}${trend}%.`}
        {!seasonal?.available && seasonal?.reason && ` (${seasonal.reason})`}
      </div>
      <div style={{display:'flex', gap:16, flexWrap:'wrap'}}>
        <span style={{display:'flex', alignItems:'center', gap:5, fontSize:11}}>
          <span style={{width:16, height:0, borderTop:'2px solid var(--ser-navy)', display:'inline-block'}}></span>
          Actueel dit jaar
        </span>
        <span style={{display:'flex', alignItems:'center', gap:5, fontSize:11}}>
          <span style={{width:16, height:0, borderTop:'2px dashed #a8acc0', display:'inline-block'}}></span>
          Vorig jaar
        </span>
        <span style={{display:'flex', alignItems:'center', gap:5, fontSize:11}}>
          <span style={{width:16, height:0, borderTop:'2px dashed #7c5cff', display:'inline-block'}}></span>
          Prognose
        </span>
        <span style={{display:'flex', alignItems:'center', gap:5, fontSize:11}}>
          <span style={{width:14, height:10, background:'rgba(124,92,255,0.15)', borderRadius:2, display:'inline-block'}}></span>
          P25–P75 interval
        </span>
        {seasonal?.available && (
          <span style={{display:'flex', alignItems:'center', gap:5, fontSize:11}}>
            <span style={{width:16, height:0, borderTop:'2px dashed #f5a523', display:'inline-block'}}></span>
            Seizoensgecorrigeerd
          </span>
        )}
      </div>
      <div style={{color:'var(--ink-500)', fontSize:11}}>
        Betrouwbaarheidsniveau prognose: <strong style={{color: confColor}}>{conf}% ({confLabel})</strong>
        {' '}— daalt naarmate verder in de toekomst. Gekleurde punten: 🟢 hoog · 🟡 matig · 🔴 laag.
      </div>
    </div>
  );
}

function ForecastPanel({ period, compare }) {
  const API = window.SER_ANALYTICS_API || '';
  const [forecast, setForecast] = React.useState(null);
  const [seasonal, setSeasonal] = React.useState(null);
  const [showSeasonalCorrection, setShowSeasonalCorrection] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  // Mock maandwaarden — worden straks door echte data vervangen
  const MOCK_MONTHLY = [
    920,880,1050,980,1100,1020,890,940,1080,1150,980,1420,  // jaar 1
    880,840,1020,950,1060,990,860,910,1040,1100,940,1380,  // jaar 2 (iets lager)
    840,                                                        // jan lopend jaar
  ];

  React.useEffect(() => {
    const token = localStorage.getItem('ser-analytics-token') || '';
    const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };
    setLoading(true);
    setError(null);

    // Eerst seizoenscorrectie proberen
    fetch(`${API}/api/forecasting/seasonal-adjust`, {
      method: 'POST', headers,
      body: JSON.stringify({ values: MOCK_MONTHLY }),
    })
    .then(r => r.json())
    .then(s => {
      setSeasonal(s);
      // Dan prognose met seizoensindices
      return fetch(`${API}/api/forecasting/forecast`, {
        method: 'POST', headers,
        body: JSON.stringify({
          values: MOCK_MONTHLY,
          months_ahead: 15,
          seasonal_indices: s.available ? s.indices : null,
        }),
      });
    })
    .then(r => r.json())
    .then(f => setForecast(f))
    .catch(e => setError('Prognose niet beschikbaar'))
    .finally(() => setLoading(false));
  }, []);

  const fmt = v => v >= 1000 ? `€ ${(v/1000).toFixed(0)}k` : `€ ${Math.round(v)}`;
  const confColor = c => c >= 75 ? '#008873' : c >= 55 ? '#b37800' : '#c62828';
  const confBg = c => c >= 75 ? 'var(--ser-teal-50)' : c >= 55 ? 'var(--ser-gold-50)' : '#fdecea';

  return (
    <div style={{display:'flex', flexDirection:'column', gap:16, marginTop:8}}>
      {/* Header */}
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:10}}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <h2 style={{margin:0, fontSize:16, fontWeight:700}}>Prognose</h2>
          {window.BetaBadge && <window.BetaBadge tooltip="Prognoses zijn statistische schattingen op basis van historische trends en seizoenspatronen. Gebruik als richtlijn." />}
        </div>
        {seasonal?.available && (
          <label style={{display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--ink-600)', cursor:'pointer'}}>
            <input type="checkbox" checked={showSeasonalCorrection} onChange={e => setShowSeasonalCorrection(e.target.checked)} />
            Seizoensgecorrigeerd tonen
          </label>
        )}
        {seasonal && !seasonal.available && (
          <span style={{fontSize:12, color:'var(--ink-400)', fontStyle:'italic'}}>{seasonal.reason}</span>
        )}
      </div>

      {loading && <div style={{textAlign:'center', padding:'32px', color:'var(--ink-400)', fontSize:13}}>Prognose berekenen…</div>}
      {error && <div style={{textAlign:'center', padding:'32px', color:'var(--err)', fontSize:13}}>{error}</div>}

      {forecast && !loading && (
        <>
          {/* Kwartaal-cards */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:12}}>
            {forecast.quarterly?.map(q => (
              <div key={q.quarter} style={{
                background:'white', border:'1px solid var(--ink-100)', borderRadius:12, padding:'16px 18px',
              }}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
                  <div style={{fontSize:12, fontWeight:700, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.08em'}}>Q{q.quarter}</div>
                  <span style={{padding:'2px 8px', borderRadius:999, fontSize:10, fontWeight:700,
                    background:confBg(q.confidence), color:confColor(q.confidence)}}>
                    {q.confidence}% zekerheid
                  </span>
                </div>
                <div style={{fontSize:22, fontWeight:800, color:'var(--ink-900)', marginBottom:4}}>{fmt(q.base)}</div>
                <div style={{display:'flex', gap:10, fontSize:11}}>
                  <span style={{color:'#008873'}}>↑ {fmt(q.good)}</span>
                  <span style={{color:'var(--ink-400)'}}>—</span>
                  <span style={{color:'#c62828'}}>↓ {fmt(q.bad)}</span>
                </div>
              </div>
            ))}

            {/* Jaarkaart */}
            {forecast.annual && (
              <div style={{
                background:'linear-gradient(135deg, var(--ser-navy) 0%, #1e1e5a 100%)',
                border:'none', borderRadius:12, padding:'16px 18px', gridColumn: 'span 1',
              }}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
                  <div style={{fontSize:12, fontWeight:700, color:'rgba(255,255,255,0.6)', textTransform:'uppercase', letterSpacing:'0.08em'}}>12 mnd prognose</div>
                  <span style={{padding:'2px 8px', borderRadius:999, fontSize:10, fontWeight:700,
                    background:'rgba(255,255,255,0.1)', color:'rgba(255,255,255,0.8)'}}>
                    {forecast.annual.confidence}% zekerheid
                  </span>
                </div>
                <div style={{fontSize:24, fontWeight:800, color:'white', marginBottom:4}}>{fmt(forecast.annual.base)}</div>
                <div style={{display:'flex', gap:10, fontSize:11}}>
                  <span style={{color:'#67e8d8'}}>Goed: {fmt(forecast.annual.good)}</span>
                  <span style={{color:'rgba(255,255,255,0.4)'}}>·</span>
                  <span style={{color:'#fca5a5'}}>Slecht: {fmt(forecast.annual.bad)}</span>
                </div>
                {forecast.trend_slope_pct !== 0 && (
                  <div style={{marginTop:8, fontSize:11, color:'rgba(255,255,255,0.5)'}}>
                    Trend: {forecast.trend_slope_pct > 0 ? '+' : ''}{forecast.trend_slope_pct}% per maand
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Trend-lijn grafiek (simpel SVG) */}
          {forecast.forecasts?.length > 0 && (
            <div style={{background:'white', border:'1px solid var(--ink-100)', borderRadius:12, padding:'18px 20px'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
                <h3 style={{margin:0, fontSize:14}}>Maandverloop prognose</h3>
                {window.BetaBadge && <window.BetaBadge />}
              </div>
              <CausalImpactChart
                forecasts={forecast.forecasts.slice(0,12)}
                historical={[]}
                previousYear={[]}
                showSeasonal={showSeasonalCorrection}
                seasonal={seasonal}
              />
              <ForecastExplanation forecast={forecast} seasonal={seasonal} />
            </div>
          )}
        </>
      )}
    </div>
  );
}

window.RevenueDashboard = RevenueDashboard;