// Ekonomi-vyn — stiftelsens finansiering & intäkter
const {
  ResponsiveContainer: ERC, BarChart: EBarChart, Bar: EBar,
  XAxis: EXAxis, YAxis: EYAxis, CartesianGrid: EGrid, Tooltip: ETooltip,
  ReferenceLine: ERefLine, Cell: ECell, PieChart: EPieChart, Pie: EPie,
  LineChart: ELineChart, Line: ELine, ComposedChart: EComposed, Area: EArea,
} = Recharts;

// Slate-skala + ljusare grön för mål (enligt Strategi)
const ESLATE = { d900: "#0f172a", d800: "#1e293b", d700: "#334155", d600: "#475569", d500: "#64748b", d400: "#94a3b8", d300: "#cbd5e1", d200: "#e2e8f0" };
const EGREEN = "#34d399";
const eAxis = { tick: { fill: "#71717a", fontSize: 10.5, fontFamily: "DM Mono, monospace" }, tickLine: false, axisLine: false };
const eGrid = { vertical: false, stroke: "#e4e4e7", strokeDasharray: "2 4" };

const EKONOMI_DATA = {
  // Extern finansiering & donationer per källa (€)
  financing: [
    { year: "2022", donationer: 120000, testamenten: 70000, sponsorskap: 52000, projektbidrag: 70000 },
    { year: "2023", donationer: 135000, testamenten: 85000, sponsorskap: 58000, projektbidrag: 80000 },
    { year: "2024", donationer: 150000, testamenten: 95000, sponsorskap: 66000, projektbidrag: 90000 },
    { year: "2025", donationer: 165000, testamenten: 105000, sponsorskap: 72000, projektbidrag: 100000 },
    { year: "2026", donationer: 175000, testamenten: 110000, sponsorskap: 78000, projektbidrag: 105000 },
  ],
  financingTarget: 500000,

  // Leverage-faktor (1:X) mot 1:4
  leverage: [
    { year: "2022", value: 2.6 }, { year: "2023", value: 2.9 }, { year: "2024", value: 3.2 },
    { year: "2025", value: 3.5 }, { year: "2026", value: 3.7 },
  ],
  leverageTarget: 4.0,

  // Intäktsmix (diversifiering) — andel av totala intäkter
  incomeMix: [
    { name: "Kapitalavkastning", value: 44 },
    { name: "Externa bidrag", value: 22 },
    { name: "Donationer", value: 21 },
    { name: "Medlemmar", value: 13 },
  ],
  diversification: { index: 0.62, prev: 0.58, target: 0.70 },

  // Medlemsintäkter (€) — stabil tillväxt
  members: [
    { year: "2022", value: 48000 }, { year: "2023", value: 51000 }, { year: "2024", value: 54000 },
    { year: "2025", value: 57000 }, { year: "2026", value: 60000 },
  ],

  // Antal testamentsgåvor
  bequests: [
    { year: "2022", value: 6 }, { year: "2023", value: 9 }, { year: "2024", value: 11 },
    { year: "2025", value: 14 }, { year: "2026", value: 17 },
  ],
  // Antal namngivna fonder
  namedFunds: [
    { year: "2022", value: 8 }, { year: "2023", value: 9 }, { year: "2024", value: 11 },
    { year: "2025", value: 12 }, { year: "2026", value: 14 },
  ],
  // Sponsorintäkter per nivå (€)
  sponsors: [
    { level: "Flaggskeppspartners", value: 42000 },
    { level: "Konferenspartners", value: 22000 },
    { level: "Övriga partners", value: 14000 },
  ],

  // Externa ansökningar per finansiär
  applications: [
    { source: "UBS", submitted: 8, approved: 5, amount: 145000 },
    { source: "Ministeriet", submitted: 6, approved: 3, amount: 88000 },
    { source: "NMR", submitted: 5, approved: 3, amount: 62000 },
    { source: "EU", submitted: 4, approved: 1, amount: 95000 },
    { source: "Stiftelser", submitted: 11, approved: 7, amount: 118000 },
  ],
};

// === Lokal huvudrubrik (matchar Strategi) ===
function EkoMainHeader({ icon, label, subtitle }) {
  return (
    <div className="flex items-center gap-2.5 mb-4 mt-1">
      <div className="flex items-baseline gap-2 flex-wrap">
        <h3 className="text-[18px] font-semibold text-zinc-900 tracking-tight">{label}</h3>
        {subtitle && <span className="text-[13px] text-zinc-400">{subtitle}</span>}
      </div>
    </div>
  );
}

// === KPI-översikt ===
function EkoKpiRow() {
  const fin = EKONOMI_DATA.financing;
  const totals = fin.map(f => f.donationer + f.testamenten + f.sponsorskap + f.projektbidrag);
  const apps = EKONOMI_DATA.applications;
  const totalSub = apps.reduce((s, a) => s + a.submitted, 0);
  const totalApp = apps.reduce((s, a) => s + a.approved, 0);
  const kpis = [
    { label: "Extern finansiering", value: fmtEURshort(totals[totals.length - 1]), delta: "+5,9 % mot 2025", deltaTone: "positive", spark: totals, icon: "wallet", accent: ESLATE.d700 },
    { label: "Leverage-faktor", value: "1:3,7", delta: "Mål 1:4 år 2028", deltaTone: "default", spark: EKONOMI_DATA.leverage.map(l => l.value), icon: "trending-up", accent: ESLATE.d600 },
    { label: "Diversifieringsindex", value: "0,62", delta: "+0,04 mot 2025", deltaTone: "positive", spark: [0.51, 0.54, 0.56, 0.58, 0.62], icon: "percent", accent: ESLATE.d500 },
    { label: "Andel beviljade", value: `${Math.round((totalApp / totalSub) * 100)} %`, delta: `${totalApp}/${totalSub} ansökningar`, deltaTone: "default", spark: [44, 47, 50, 52, 56], icon: "file-text", accent: ESLATE.d600 },
  ];
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      {kpis.map((k, i) => <KPI key={i} {...k}/>)}
    </div>
  );
}

// === Hjälte: Extern finansiering ===
function FinancingHero() {
  const fin = EKONOMI_DATA.financing;
  const totals = fin.map(f => f.donationer + f.testamenten + f.sponsorskap + f.projektbidrag);
  const current = totals[totals.length - 1];
  const target = EKONOMI_DATA.financingTarget;
  const pctToTarget = Math.round((current / target) * 100);
  const series = [
    { name: "Donationer", key: "donationer", color: ESLATE.d700 },
    { name: "Testamenten", key: "testamenten", color: ESLATE.d500 },
    { name: "Sponsorskap", key: "sponsorskap", color: ESLATE.d400 },
    { name: "Projektbidrag", key: "projektbidrag", color: ESLATE.d300 },
  ];
  return (
    <Card className="overflow-hidden">
      <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr]">
        {/* Vänster — sammanfattning */}
        <div className="p-6 lg:border-r border-zinc-100 flex flex-col bg-gradient-to-b from-slate-50/60 to-transparent">
          <div className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">Total 2026</div>
          <div className="flex items-baseline gap-1.5 mt-1">
            <span className="text-[34px] font-semibold text-zinc-900 tabular-nums leading-none tracking-tight">{fmtEURshort(current)}</span>
          </div>
          <div className="flex items-center gap-2 mt-3 flex-wrap">
            <Badge variant="positive">+5,9 % mot 2025</Badge>
            <Badge variant="outline">Mål ≥500 k€/år 2028</Badge>
          </div>

          {/* Progress mot mål */}
          <div className="mt-5">
            <div className="flex items-center justify-between text-[11.5px] mb-1.5">
              <span className="text-zinc-500 font-medium">Mot mål 2028</span>
              <span className="font-mono text-zinc-900 font-semibold">{pctToTarget} %</span>
            </div>
            <div className="relative h-2 bg-zinc-100 rounded-full overflow-hidden">
              <div className="h-full rounded-full bg-slate-700" style={{ width: `${pctToTarget}%` }}/>
              <span className="absolute top-0 bottom-0 w-0.5 bg-emerald-400" style={{ left: "100%" }}/>
            </div>
          </div>

          <p className="text-[12px] text-zinc-500 mt-5 leading-relaxed">
            Total summa från donationer, testamenten, sponsorskap och projektbidrag. Följs årligen mot målet om minst 500 000 € per år till 2028.
          </p>
        </div>

        {/* Höger — staplad utveckling per källa */}
        <div className="p-5">
          <div className="flex items-start justify-between mb-1">
            <div>
              <h3 className="text-[13.5px] font-semibold text-zinc-900 tracking-tight">Utveckling per finansieringskälla</h3>
              <p className="text-[12px] text-zinc-500 mt-0.5">2022–2026 · staplad summa mot mållinje 500 k€</p>
            </div>
          </div>
          <div className="h-[230px] mt-2">
            <ERC width="100%" height="100%">
              <EBarChart data={fin} margin={{ top: 14, right: 12, left: 0, bottom: 0 }} barCategoryGap="28%">
                <EGrid {...eGrid}/>
                <EXAxis dataKey="year" {...eAxis}/>
                <EYAxis {...eAxis} tickFormatter={v => `${(v / 1000).toFixed(0)}k`} width={36}/>
                <ETooltip content={<ChartTooltip/>}/>
                <ERefLine y={EKONOMI_DATA.financingTarget} stroke={EGREEN} strokeDasharray="5 4" strokeWidth={1.5} label={{ value: "Mål 500 k€", position: "right", fill: "#059669", fontSize: 10.5, fontWeight: 600 }}/>
                {series.map((s, i) => (
                  <EBar key={s.key} dataKey={s.key} name={s.name} stackId="f" fill={s.color}
                    radius={i === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0]}/>
                ))}
              </EBarChart>
            </ERC>
          </div>
          <div className="flex flex-wrap items-center gap-4 mt-2 text-[11px] text-zinc-500 px-1">
            {series.map(s => (
              <span key={s.key} className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: s.color }}/>{s.name}</span>
            ))}
          </div>
        </div>
      </div>
    </Card>
  );
}

// === Leverage-faktor ===
function LeverageCard() {
  const data = EKONOMI_DATA.leverage;
  const current = data[data.length - 1].value;
  return (
    <Card className="overflow-hidden group">
      <WidgetHeader
        title="Leverage-faktor"
        badge="Mål 1:4 år 2028"
        value={`1:${current.toFixed(1)}`}
        delta="+0,2 mot 2025"
        deltaTone="positive"
        sub="Extern resurs mobiliserad per egen euro"
      />
      <div className="px-2 h-[170px]">
        <ERC width="100%" height="100%">
          <EComposed data={data} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
            <defs>
              <linearGradient id="eko-lev" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={ESLATE.d600} stopOpacity={0.18}/>
                <stop offset="100%" stopColor={ESLATE.d600} stopOpacity={0.02}/>
              </linearGradient>
            </defs>
            <EGrid {...eGrid}/>
            <EXAxis dataKey="year" {...eAxis}/>
            <EYAxis {...eAxis} domain={[2, 4.5]} tickFormatter={v => `1:${v.toFixed(0)}`} width={32}/>
            <ETooltip content={<ChartTooltip formatter={v => `1:${v.toFixed(1)}`}/>}/>
            <ERefLine y={EKONOMI_DATA.leverageTarget} stroke={EGREEN} strokeDasharray="5 4" strokeWidth={1.5}/>
            <EArea type="monotone" dataKey="value" name="Leverage" stroke={ESLATE.d600} strokeWidth={2} fill="url(#eko-lev)" dot={{ r: 3, fill: ESLATE.d600, strokeWidth: 0 }}/>
          </EComposed>
        </ERC>
      </div>
    </Card>
  );
}

// === Diversifieringsindex (donut) ===
function DiversificationCard() {
  const mix = EKONOMI_DATA.incomeMix;
  const div = EKONOMI_DATA.diversification;
  const colors = [ESLATE.d700, ESLATE.d500, ESLATE.d400, ESLATE.d300];
  return (
    <Card className="overflow-hidden group">
      <WidgetHeader
        title="Diversifieringsindex"
        badge="Mål 0,70"
        value={div.index.toFixed(2).replace(".", ",")}
        delta="+0,04 mot 2025"
        deltaTone="positive"
        sub="Bred fördelning sänker sårbarheten"
      />
      <div className="px-5 pb-5 flex items-center gap-5">
        <div className="relative w-[140px] h-[140px] flex-shrink-0">
          <ERC width="100%" height="100%">
            <EPieChart>
              <EPie data={mix} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={42} outerRadius={64} paddingAngle={2} stroke="none">
                {mix.map((m, i) => <ECell key={i} fill={colors[i]}/>)}
              </EPie>
              <ETooltip content={<ChartTooltip formatter={v => `${v} %`}/>}/>
            </EPieChart>
          </ERC>
          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
            <span className="text-[11px] text-zinc-400 uppercase tracking-wider">Källor</span>
            <span className="text-[20px] font-semibold text-zinc-900 tabular-nums leading-none">{mix.length}</span>
          </div>
        </div>
        <div className="flex-1 min-w-0 space-y-2.5">
          {mix.map((m, i) => (
            <div key={i}>
              <div className="flex items-center justify-between text-[12px] mb-1">
                <span className="flex items-center gap-2 min-w-0">
                  <span className="w-2 h-2 rounded-sm flex-shrink-0" style={{ background: colors[i] }}/>
                  <span className="text-zinc-700 truncate">{m.name}</span>
                </span>
                <span className="font-mono text-zinc-900 font-semibold tabular-nums">{m.value} %</span>
              </div>
              <div className="h-1.5 bg-zinc-100 rounded-full overflow-hidden">
                <div className="h-full rounded-full" style={{ width: `${m.value}%`, background: colors[i] }}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

// === Medlemsintäkter ===
function MembersCard() {
  const data = EKONOMI_DATA.members;
  const current = data[data.length - 1].value;
  return (
    <Card className="overflow-hidden">
      <WidgetHeader
        title="Medlemsintäkter"
        badge="Stabil tillväxt"
        value={fmtEURshort(current)}
        delta="+5,3 % mot 2025"
        deltaTone="positive"
        sub="Legitimitetsmått — ej primär inkomstkälla"
      />
      <div className="px-2 h-[170px]">
        <ERC width="100%" height="100%">
          <EBarChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 0 }} barCategoryGap="30%">
            <EGrid {...eGrid}/>
            <EXAxis dataKey="year" {...eAxis}/>
            <EYAxis {...eAxis} tickFormatter={v => `${(v / 1000).toFixed(0)}k`} width={32}/>
            <ETooltip content={<ChartTooltip/>}/>
            <EBar dataKey="value" name="Medlemsintäkter" fill={ESLATE.d500} radius={[3, 3, 0, 0]}/>
          </EBarChart>
        </ERC>
      </div>
    </Card>
  );
}

// === Trend-kort (testamentsgåvor, namngivna fonder) ===
function TrendCountCard({ title, badge, data, sub }) {
  const current = data[data.length - 1].value;
  const prev = data[data.length - 2].value;
  return (
    <Card className="overflow-hidden">
      <WidgetHeader
        title={title}
        badge={badge}
        value={`${current} st`}
        delta={`+${current - prev} mot ${data[data.length - 2].year}`}
        deltaTone="positive"
        sub={sub}
      />
      <div className="px-2 h-[160px]">
        <ERC width="100%" height="100%">
          <EBarChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 0 }} barCategoryGap="34%">
            <EGrid {...eGrid}/>
            <EXAxis dataKey="year" {...eAxis}/>
            <EYAxis {...eAxis} width={26}/>
            <ETooltip content={<ChartTooltip formatter={v => `${v} st`}/>}/>
            <EBar dataKey="value" name={title} radius={[3, 3, 0, 0]}>
              {data.map((d, i) => <ECell key={i} fill={i === data.length - 1 ? ESLATE.d700 : ESLATE.d300}/>)}
            </EBar>
          </EBarChart>
        </ERC>
      </div>
    </Card>
  );
}

// === Sponsorintäkter per nivå ===
function SponsorCard() {
  const data = EKONOMI_DATA.sponsors;
  const total = data.reduce((s, d) => s + d.value, 0);
  const max = Math.max(...data.map(d => d.value));
  return (
    <Card className="overflow-hidden group">
      <WidgetHeader
        title="Sponsorintäkter per nivå"
        badge="2026"
        value={fmtEURshort(total)}
        delta={`${data.length} partnernivåer`}
        deltaTone="default"
        sub="Konferens-, flaggskepps- och övriga partners"
      />
      <div className="px-5 pb-5 space-y-3.5 pt-1">
        {data.map((d, i) => (
          <div key={i}>
            <div className="flex items-center justify-between text-[12.5px] mb-1.5">
              <span className="text-zinc-700">{d.level}</span>
              <span className="font-mono text-zinc-900 font-semibold tabular-nums">{fmtEURshort(d.value)}</span>
            </div>
            <div className="h-2 bg-zinc-100 rounded-full overflow-hidden">
              <div className="h-full rounded-full bg-slate-700" style={{ width: `${(d.value / max) * 100}%` }}/>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// === Externa ansökningar ===
function ApplicationsCard() {
  const data = EKONOMI_DATA.applications;
  const totalSub = data.reduce((s, a) => s + a.submitted, 0);
  const totalApp = data.reduce((s, a) => s + a.approved, 0);
  const totalAmount = data.reduce((s, a) => s + a.amount, 0);
  const rate = Math.round((totalApp / totalSub) * 100);
  return (
    <Card className="overflow-hidden">
      <div className="px-5 pt-4 pb-3 border-b border-zinc-100 flex items-start justify-between gap-3">
        <div>
          <h3 className="text-[14px] font-semibold text-zinc-900 tracking-tight">Externa ansökningar per finansiär</h3>
          <p className="text-[12px] text-zinc-500 mt-0.5">Inlämnade vs godkända · beviljat belopp 2026</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="positive">Andel beviljade stigande</Badge>
        </div>
      </div>

      {/* Funnel-stats */}
      <div className="grid grid-cols-2 sm:grid-cols-4 divide-x divide-zinc-100 border-b border-zinc-100">
        {[
          { l: "Inlämnade", v: totalSub + " st" },
          { l: "Godkända", v: totalApp + " st" },
          { l: "Andel beviljade", v: rate + " %" },
          { l: "Beviljat belopp", v: fmtEURshort(totalAmount) },
        ].map((s, i) => (
          <div key={i} className="px-5 py-3">
            <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider">{s.l}</div>
            <div className="text-[19px] font-semibold text-zinc-900 tabular-nums mt-0.5">{s.v}</div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-[1.3fr_1fr] gap-2">
        {/* Grouped bars: inlämnade vs godkända */}
        <div className="px-3 pt-4 pb-2 h-[230px]">
          <ERC width="100%" height="100%">
            <EBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }} barCategoryGap="28%" barGap={3}>
              <EGrid {...eGrid}/>
              <EXAxis dataKey="source" {...eAxis}/>
              <EYAxis {...eAxis} width={26}/>
              <ETooltip content={<ChartTooltip formatter={v => `${v} st`}/>}/>
              <EBar dataKey="submitted" name="Inlämnade" fill={ESLATE.d300} radius={[3, 3, 0, 0]}/>
              <EBar dataKey="approved" name="Godkända" fill={ESLATE.d700} radius={[3, 3, 0, 0]}/>
            </EBarChart>
          </ERC>
        </div>
        {/* Beviljat belopp per finansiär */}
        <div className="px-5 py-4 border-l border-zinc-100">
          <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider mb-3">Beviljat belopp per finansiär</div>
          <div className="space-y-2.5">
            {[...data].sort((a, b) => b.amount - a.amount).map((d, i) => {
              const maxAmt = Math.max(...data.map(x => x.amount));
              return (
                <div key={i}>
                  <div className="flex items-center justify-between text-[12px] mb-1">
                    <span className="text-zinc-700">{d.source}</span>
                    <span className="font-mono text-zinc-900 font-semibold tabular-nums">{fmtEURshort(d.amount)}</span>
                  </div>
                  <div className="h-1.5 bg-zinc-100 rounded-full overflow-hidden">
                    <div className="h-full rounded-full bg-slate-600" style={{ width: `${(d.amount / maxAmt) * 100}%` }}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="px-5 py-2.5 border-t border-zinc-100 bg-zinc-50/40 flex items-center gap-4 text-[11px] text-zinc-500">
        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: ESLATE.d300 }}/>Inlämnade</span>
        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: ESLATE.d700 }}/>Godkända</span>
        <span className="text-zinc-300">·</span>
        <span>Finansiärer: UBS, ministeriet, Nordiska ministerrådet, EU, stiftelser</span>
      </div>
    </Card>
  );
}

// === Huvudvy ===
function EkonomiView() {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-[22px] font-semibold text-zinc-900 tracking-tight">Ekonomi</h2>
        <p className="text-[13px] text-zinc-500 mt-0.5">Finansiering, intäktsmix och extern resursmobilisering · belopp i €</p>
      </div>

      <EkoKpiRow/>

      <section>
        <EkoMainHeader icon="wallet" label="Extern finansiering & donationer" subtitle="mål ≥500 k€/år till 2028"/>
        <div className="space-y-4">
          <FinancingHero/>
          <LeverageCard/>
        </div>
      </section>

      <section>
        <EkoMainHeader icon="percent" label="Intäktsmix & diversifiering" subtitle="bredare fördelning sänker sårbarheten"/>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <DiversificationCard/>
          <MembersCard/>
        </div>
      </section>

      <section className="pb-12">
        <EkoMainHeader icon="file-text" label="Externa ansökningar" subtitle="UBS, ministeriet, NMR, EU, stiftelser"/>
        <ApplicationsCard/>
      </section>
    </div>
  );
}

window.EkonomiView = EkonomiView;
Object.assign(window, { LeverageCard, DiversificationCard, SponsorCard });