// Overview hub + skeleton dashboards (Campaigns, Competition, Funnel, Cohort, AI, Briefing)
// KpiTriple is beschikbaar via window.KpiTriple (geladen vanuit dash-revenue.jsx)

const { useState: useStateAS } = React;

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>
  );
}

// =========== OVERVIEW HUB ===========
function OverviewDashboard({ onNavigate }) {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="Overzicht"
      sub="Overzicht beschikbaar zodra databronnen zijn gekoppeld."
    />
  );
  const D = window.ANALYTICS_DATA;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      {window.KpiTriple && (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:12, marginBottom:20}}>
          <window.KpiTriple label="Omzet" current={null} previous={null} forecast={{available:false, reason:'Koppel GA4 + Shopify'}} format="currency" compare="yoy"/>
          <window.KpiTriple label="Sessies" current={null} previous={null} forecast={{available:false, reason:'Koppel GA4'}} format="number" compare="yoy"/>
          <window.KpiTriple label="Conversie" current={null} previous={null} forecast={{available:false, reason:'Koppel GA4'}} format="percent" compare="yoy"/>
        </div>
      )}

      {/* Headline */}
      <div className="panel" style={{background:'linear-gradient(135deg, #fff 0%, #f5f5fc 100%)'}}>
        <div className="panel-body kpi-hero-row" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:24}}>
          <KpiTile big="€ 1.36M" lbl="Omzet · 90d" delta="-9.4%" deltaKind="neg" sub="vs. vorig jaar"/>
          <KpiTile big="18.4%" lbl="Brutomarge" delta="-1.8pp" deltaKind="neg" sub="dalend trend 6 wk"/>
          <KpiTile big="2.95%" lbl="Conversie" delta="-0.41pp" deltaKind="neg" sub="LCP-impact"/>
        </div>
      </div>

      {/* AI summary card — landing focal point */}
      <div className="panel" style={{borderLeft:'4px solid #7c5cff'}}>
        <div className="panel-body" style={{display:'flex', gap:18, alignItems:'flex-start'}}>
          <div style={{width:42, height:42, borderRadius:10, background:'linear-gradient(135deg, var(--ser-teal), #7c5cff)', color:'white', display:'grid', placeItems:'center', fontWeight:800, fontSize:14, fontFamily:'var(--font-mono)', flexShrink:0}}>AI</div>
          <div style={{flex:1}}>
            <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', fontWeight:700, color:'#7c5cff', marginBottom:6}}>Executive samenvatting · automatisch gegenereerd · {new Date().toLocaleDateString('nl-NL', {day:'numeric', month:'long', year:'numeric'})}</div>
            <p style={{fontSize:15, lineHeight:1.6, color:'var(--ink-900)', margin:'0 0 12px', maxWidth:780}}>
              Omzet ligt <strong>€ 142k onder vorig jaar</strong>. De daling is voor 78% verklaard: een <strong>iOS checkout-bug</strong> (€ 32k/m gemist), een <strong>concurrentie-prijscampagne</strong> van Bloomon Direct + FloraBox (-9pp share-of-voice), en <strong>AI Overviews</strong> die organic CTR drukken op informational queries. Wat <em>niet</em> jouw schuld is: markt-breed seizoenseffect (-€ 13k) en een tracking-shift door consent v2 (~€ 4k modeled).
            </p>
            <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-700)', margin:'0 0 14px', maxWidth:780}}>
              <strong>Goed nieuws:</strong> 5 acties — beginnend bij de checkout-fix — kunnen <strong>+€ 132k/maand</strong> herstellen binnen 12 weken.
            </p>
            <div style={{display:'flex', gap:8}}>
              <button className="btn-go" onClick={() => onNavigate('revenue')}>Volledige diagnose
                <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>
              <button onClick={() => onNavigate('ai')} style={{padding:'8px 14px', borderRadius:8, border:'1px solid var(--ink-200)', background:'white', fontSize:13, fontWeight:600, color:'var(--ink-700)', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6}}>5 AI-acties bekijken</button>
            </div>
          </div>
        </div>
      </div>

      {/* Dashboard tiles */}
      <div className="dash-section-head">
        <div className="left"><h2>Alle dashboards</h2><span className="sub">8 dashboards · 1 vlaggenschip</span></div>
      </div>

      <div className="dash-tiles-grid">
        {D.DASHBOARDS.filter(d => d.id !== 'overview').map(d => (
          <button key={d.id} onClick={() => onNavigate(d.id)} className="dash-tile">
            <div className="ico-w">{D.Icons[d.icon]}</div>
            <div className="ttl">{d.label}</div>
            <div className="row-bot">
              <span className={`status-dot ${d.status}`}>{d.status === 'live' ? 'Live' : 'Beta'}</span>
              {d.flagship && <span className="flag-pill">★ Vlaggenschip</span>}
            </div>
          </button>
        ))}
      </div>

      {/* Data sources */}
      <div className="dash-section-head">
        <div className="left"><h2>Databronnen</h2><span className="sub">8 verbonden bronnen · live status</span></div>
      </div>
      <div className="panel">
        <div className="panel-body" style={{padding:0}}>
          <table className="data">
            <thead><tr><th>Bron</th><th>Status</th><th>Frisheid</th><th>Volume</th></tr></thead>
            <tbody>
              {D.DATA_SOURCES.map(s => (
                <tr key={s.id}>
                  <td style={{fontWeight:600}}>{s.label}</td>
                  <td>
                    <span className={`status-dot ${s.status === 'ok' ? 'live' : 'beta'}`} style={{background: s.status === 'ok' ? 'rgba(0,180,160,0.12)' : 'rgba(245,165,35,0.12)', color: s.status === 'ok' ? 'var(--ok)' : '#a87000'}}>
                      {s.status === 'ok' ? '✓ Verbonden' : '! Vertraagd'}
                    </span>
                  </td>
                  <td style={{fontSize:12, color:'var(--ink-700)'}}>{s.freshness}</td>
                  <td style={{fontSize:12, color:'var(--ink-500)', fontFamily:'var(--font-mono)'}}>{s.rows}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function KpiTile({ big, lbl, delta, deltaKind, sub }) {
  return (
    <div className="kpi-tile">
      <div className="lbl">{lbl}</div>
      <div className="big">{big}</div>
      <div style={{display:'flex', alignItems:'center', gap:8, marginTop:6}}>
        <span style={{fontSize:13, fontWeight:700, color: deltaKind === 'neg' ? 'var(--err)' : deltaKind === 'pos' ? 'var(--ok)' : 'var(--ink-500)'}}>{delta}</span>
        <span style={{fontSize:12, color:'var(--ink-500)'}}>{sub}</span>
      </div>
    </div>
  );
}

// =========== SKELETON: Campaigns ===========
function CampaignsDashboard() {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="Campagne-radar — geen data"
      sub="Koppel Google Ads of Meta Ads om campagnes te monitoren."
    />
  );
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <PlaceholderHeader title="Campagne-radar" desc="Live monitoring van campagnes — drops, pieken, anomalie-detectie."/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:14}}>
        {[
          { t: 'Lentebox e-mail', s: 'Actief · 14 dagen', m: 'ROAS 6.2x · +€ 14k incremental', kind: 'pos' },
          { t: 'Google Ads · brand', s: 'Actief · doorlopend', m: 'CTR 12.4% · CPA € 8.40', kind: 'neu' },
          { t: 'Google Ads · non-brand', s: 'Actief · 28 dagen', m: 'ROAS 1.4x · verlies € 5.8k', kind: 'neg' },
          { t: 'Mother\'s-Day teaser', s: 'Concept · niet live', m: 'Vorig jaar: +€ 32k incremental', kind: 'warn' },
          { t: 'Meta · Reels', s: 'Actief · 7 dagen', m: 'Reach 412k · CR 0.8%', kind: 'neu' },
          { t: 'TikTok · trial', s: 'Paused · 3 dagen', m: 'CPM hoog · 2x review', kind: 'warn' },
        ].map((c, i) => (
          <div key={i} className="panel">
            <div className="panel-body">
              <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--ink-500)', fontWeight:700, marginBottom:6}}>{c.s}</div>
              <h3 style={{fontSize:16, margin:'0 0 8px', color:'var(--ink-900)'}}>{c.t}</h3>
              <div style={{fontSize:12, color: c.kind === 'pos' ? 'var(--ok)' : c.kind === 'neg' ? 'var(--err)' : c.kind === 'warn' ? '#a87000' : 'var(--ink-700)', fontWeight:600}}>{c.m}</div>
            </div>
          </div>
        ))}
      </div>
      <BetaNote section="Campagne-radar"/>
    </div>
  );
}

// =========== COMPETITION: live analyse ===========
function CompetitionDashboard() {
  const API = window.SER_ANALYTICS_API || '';
  const [analysis, setAnalysis] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [ran, setRan] = React.useState(false);

  const runAnalysis = async () => {
    const token = localStorage.getItem('ser-analytics-token') || '';
    const user = JSON.parse(localStorage.getItem('ser-user') || '{}');
    const clientId = user.clientId || 'bloemerij';
    const domainId = 'bloemerij-nl';
    setLoading(true);
    try {
      const res = await fetch(`${API}/api/competitor/analyze/${clientId}/${domainId}`, {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ keywords: [] }),
      });
      const d = await res.json();
      setAnalysis(d); setRan(true);
    } catch { setAnalysis({ reason: 'Verbindingsfout' }); }
    finally { setLoading(false); }
  };

  if (!ran) 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}}>Concurrentie-analyse</div>
      <div style={{fontSize:13, marginBottom:20, lineHeight:1.6}}>
        Voeg concurrenten toe via Beheer → Klanten &amp; Koppelingen → Instellingen.<br/>
        Koppel Semrush of Ahrefs voor de rijkste data.
      </div>
      <button onClick={runAnalysis} disabled={loading} style={{padding:'10px 20px', background:'var(--ser-navy)', color:'white', border:'none', borderRadius:8, fontSize:13, fontWeight:600, cursor:'pointer'}}>
        {loading ? 'Analyseren…' : '▶ Start analyse'}
      </button>
    </div>
  );

  if (analysis?.reason) return (
    <div style={{textAlign:'center', padding:'48px 24px', color:'var(--ink-400)'}}>
      <div style={{fontSize:13, color:'var(--ink-500)'}}>{analysis.reason}</div>
    </div>
  );

  return (
    <div style={{display:'flex', flexDirection:'column', gap:20}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <h2 style={{margin:0}}>Concurrentie-analyse</h2>
        <button onClick={runAnalysis} disabled={loading} style={{padding:'7px 14px', background:'var(--ink-100)', border:'none', borderRadius:7, fontSize:12, fontWeight:600, cursor:'pointer'}}>
          {loading ? 'Vernieuwen…' : '↻ Vernieuwen'}
        </button>
      </div>

      {analysis?.results?.length > 0 && (
        <div style={{background:'white', border:'1px solid var(--ink-100)', borderRadius:12, overflow:'hidden'}}>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
            <thead>
              <tr style={{background:'var(--ink-25)'}}>
                {['Domein', analysis.available_sources?.includes('semrush') && 'Org. traffic', analysis.available_sources?.includes('semrush') && 'Keywords', analysis.available_sources?.includes('ahrefs') && 'DR', analysis.available_sources?.includes('serpapi') && 'SoV %'].filter(Boolean).map(h => (
                  <th key={h} style={{padding:'10px 16px', textAlign:'left', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-500)', borderBottom:'1px solid var(--ink-100)'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {analysis.results.map((r, i) => (
                <tr key={i} style={{borderBottom:'1px solid var(--ink-100)', background: r.is_own ? 'rgba(0,180,160,0.04)' : 'transparent'}}>
                  <td style={{padding:'12px 16px', fontWeight: r.is_own ? 700 : 400, fontFamily:'var(--font-mono)', fontSize:12}}>
                    {r.domain} {r.is_own && <span style={{fontSize:10, color:'var(--ok)', marginLeft:6}}>← jij</span>}
                  </td>
                  {r.semrush && <td style={{padding:'12px 16px'}}>{r.semrush.organic_traffic?.toLocaleString('nl-NL') || '—'}</td>}
                  {r.semrush && <td style={{padding:'12px 16px'}}>{r.semrush.organic_keywords?.toLocaleString('nl-NL') || '—'}</td>}
                  {r.ahrefs  && <td style={{padding:'12px 16px'}}>{r.ahrefs.domain_rating || '—'}</td>}
                  {r.serp    && <td style={{padding:'12px 16px'}}>{r.serp.sov}%</td>}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// =========== SKELETON: Funnel ===========
function FunnelDashboard() {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="Funnel &amp; Conversie — geen data"
      sub="Koppel GA4 voor funnel-analyse."
    />
  );
  const { FUNNEL } = window.ANALYTICS_DATA;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <PlaceholderHeader title="Funnel & Conversie" desc="Volledige funnel met device-, kanaal- en cohortbreakdown."/>
      <div className="panel">
        <div className="panel-head"><h3>Funnel · 90d</h3><span style={{fontSize:11, color:'var(--ink-500)'}}>2.95% eind-conversie (was 3.36%)</span></div>
        <div className="panel-body" style={{height:240}}>
          {window.ChartA && <window.ChartA.Funnel steps={FUNNEL}/>}
        </div>
      </div>
      <BetaNote section="Funnel & Conversie"/>
    </div>
  );
}

// =========== SKELETON: Cohort ===========
function CohortDashboard() {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="Klant &amp; Cohort — geen data"
      sub="Koppel Shopify of BigQuery voor cohort-analyse."
    />
  );
  const { COHORTS } = window.ANALYTICS_DATA;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <PlaceholderHeader title="Klant & Cohort" desc="Retentie- en LTV-analyse per acquisitie-cohort."/>
      <div className="panel">
        <div className="panel-head"><h3>Retentie-heatmap</h3><span style={{fontSize:11, color:'var(--ink-500)'}}>% repeat-purchase per maand sinds eerste aankoop</span></div>
        <div className="panel-body" style={{overflowX:'auto'}}>
          {window.ChartA && <window.ChartA.Heatmap matrix={COHORTS}/>}
        </div>
      </div>
      <BetaNote section="Klant & Cohort"/>
    </div>
  );
}

// =========== SKELETON: AI Opportunities ===========
function AiDashboard() {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="AI-kansen — geen data"
      sub="Koppel databronnen om AI-aanbevelingen te genereren."
    />
  );
  const { ACTIONS } = window.ANALYTICS_DATA;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22}}>
      <PlaceholderHeader title="AI-kansen" desc="LLM-gegenereerde, gerangschikte aanbevelingen met impact-schatting & effort."/>
      <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>
            Top 5 acties
          </div>
          <h2>Geschatte recovery · +€ 132k / maand</h2>
          <p>Acties zijn gerangschikt op (impact / effort). Bovenste 3 zijn 'doen-vandaag' actions.</p>
        </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>
    </div>
  );
}

// =========== SKELETON: Executive Briefing ===========
function BriefingDashboard() {
  const hasData = false;
  if (!hasData) return (
    <NoDataState
      message="Executive Briefing — geen data"
      sub="Koppel databronnen voor de executive briefing."
    />
  );
  return (
    <div style={{display:'flex', flexDirection:'column', gap:22, maxWidth:780, margin:'0 auto', width:'100%'}}>
      <PlaceholderHeader title="Executive Briefing" desc="Een-pagina narratief — voor de board, niet voor de marketeer."/>
      <div className="panel" style={{padding:'40px 48px'}}>
        <div style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', color:'var(--ink-500)', fontWeight:700, marginBottom:8}}>Briefing — Bloemerij · {new Date().toLocaleDateString('nl-NL', {day:'numeric', month:'long'})}</div>
        <h1 style={{fontSize:34, fontWeight:700, lineHeight:1.15, color:'var(--ink-900)', margin:'0 0 20px', letterSpacing:'-0.02em'}}>De 9.4% omzetdaling is voor 78% verklaard — en grotendeels fixbaar.</h1>
        <div style={{height:1, background:'var(--ink-100)', margin:'24px 0'}}></div>
        <h3 style={{fontSize:16, color:'var(--ink-900)', margin:'0 0 8px'}}>Wat er gebeurt</h3>
        <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-700)', margin:'0 0 16px'}}>Omzet ligt € 142k onder vorig jaar. De daling concentreert zich na 16 maart en is veroorzaakt door drie hoofd-factoren: een iOS-checkout-bug, agressieve concurrentie-pricing en AI-Overview-erosie van organic CTR.</p>
        <h3 style={{fontSize:16, color:'var(--ink-900)', margin:'24px 0 8px'}}>Wat te doen</h3>
        <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-700)', margin:'0 0 16px'}}>Vijf gerangschikte acties — twee zijn 'fix vandaag', drie hebben een sprint van 1-2 weken nodig. Samen reëel pad naar +€ 132k/maand recovery binnen 12 weken.</p>
        <h3 style={{fontSize:16, color:'var(--ink-900)', margin:'24px 0 8px'}}>Wat NIET te doen</h3>
        <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-700)', margin:'0 0 16px'}}>Geen prijsoorlog starten — confidence laag (54%) en marge-effect te groot. Geen nieuw kanaal openen tot organic stabiel is.</p>
      </div>
      <BetaNote section="Executive Briefing"/>
    </div>
  );
}

function PlaceholderHeader({ title, desc }) {
  return (
    <div className="dash-section-head" style={{borderBottom:'1px solid var(--ink-100)', paddingBottom:14}}>
      <div className="left">
        <h2 style={{fontSize:24}}>{title}</h2>
        <span className="sub">{desc}</span>
      </div>
    </div>
  );
}

function BetaNote({ section }) {
  return (
    <div className="panel" style={{borderStyle:'dashed', background:'rgba(124,92,255,0.04)'}}>
      <div className="panel-body" style={{display:'flex', gap:14, alignItems:'flex-start'}}>
        <div style={{width:32, height:32, borderRadius:8, background:'rgba(124,92,255,0.12)', color:'#7c5cff', display:'grid', placeItems:'center', flexShrink:0, fontWeight:800, fontSize:11, fontFamily:'var(--font-mono)'}}>β</div>
        <div>
          <div style={{fontSize:13, fontWeight:700, color:'var(--ink-900)', marginBottom:4}}>{section} — beta</div>
          <p style={{fontSize:13, color:'var(--ink-700)', margin:0, lineHeight:1.55}}>
            Dit dashboard is een schets. Het vlaggenschip <strong>Omzet & Marge</strong> toont de volledige diepte: root-cause attributie, scenario-modeling, lens-switching en AI-aanbevelingen. Andere dashboards volgen hetzelfde patroon zodra de eerste live is.
          </p>
        </div>
      </div>
    </div>
  );
}

window.OverviewDashboard = OverviewDashboard;
window.CampaignsDashboard = CampaignsDashboard;
window.CompetitionDashboard = CompetitionDashboard;
window.FunnelDashboard = FunnelDashboard;
window.CohortDashboard = CohortDashboard;
window.AiDashboard = AiDashboard;
window.BriefingDashboard = BriefingDashboard;