// Strategi-vyn — Prestandaindexet
const { useState: useStratState } = React;
const {
  ResponsiveContainer: SRC, BarChart: SBarChart, Bar: SBar,
  XAxis: SXAxis, YAxis: SYAxis, CartesianGrid: SGrid, Tooltip: STooltip,
  ReferenceLine: SRefLine, Cell: SCell,
} = Recharts;

const STRATEGY_DATA = {
  index: {
    current: 67,
    baseYear: 2026,
    prevValue: 66,
    prevYear: 2025,
    target: 80,
    targetYear: 2035,
    lead: "Vår sammanvägda mätare för stiftelsens måluppfyllelse och organisatoriska styrka. Följs årligen för att visa den strategiska utvecklingen över tid.",
    series: [
      { year: "2023", value: 62, kind: "actual" },
      { year: "2024", value: 64, kind: "actual" },
      { year: "2025", value: 66, kind: "actual" },
      { year: "2026", value: 67, kind: "base" },
      { year: "2027", value: 68.5, kind: "proj" },
      { year: "2028", value: 70, kind: "proj" },
      { year: "2029", value: 71.5, kind: "proj" },
      { year: "2030", value: 73, kind: "proj" },
      { year: "2031", value: 74.5, kind: "proj" },
      { year: "2032", value: 76, kind: "proj" },
      { year: "2033", value: 77.5, kind: "proj" },
      { year: "2034", value: 79, kind: "proj" },
      { year: "2035", value: 80, kind: "target" },
    ],
  },
  parts: [
    {
      id: "del1",
      label: "Del 1",
      icon: "sparkles",
      title: "Ändamål & samhällseffekt",
      desc: "Tre dimensioner som visar hur väl vi förverkligar vårt ändamål",
      score: 69,
      dimensions: [
        {
          name: "Räckvidd & tillgänglighet",
          score: 70,
          measures: [
            { label: "Antal personer som nås av verksamheten", value: 73 },
            { label: "Geografisk spridning av insatser", value: 64 },
            { label: "Mångfald bland mottagare", value: 68 },
            { label: "Tillgänglighet för underrepresenterade grupper", value: 66 },
            { label: "Andel insatser med öppen tillgång", value: 71 },
          ],
        },
        {
          name: "Effekt & resultat",
          score: 65,
          measures: [
            { label: "Uppnådda mål i finansierade insatser", value: 69 },
            { label: "Långsiktig effekt hos mottagare", value: 62 },
            { label: "Andel insatser med mätbara resultat", value: 67 },
            { label: "Externt bekräftad samhällsnytta", value: 64 },
          ],
        },
        {
          name: "Relevans & förnyelse",
          score: 72,
          measures: [
            { label: "Anpassning till nya samhällsbehov", value: 73 },
            { label: "Andel nyskapande initiativ", value: 70 },
            { label: "Spridning av framgångsrika metoder", value: 72 },
            { label: "Lärande mellan insatser", value: 71 },
            { label: "Samverkan med andra aktörer", value: 74 },
          ],
        },
      ],
    },
    {
      id: "del2",
      label: "Del 2",
      icon: "building",
      title: "Organisation & hållbarhet",
      desc: "Tre dimensioner som visar stiftelsens långsiktiga bärkraft",
      score: 66,
      dimensions: [
        {
          name: "Finansiell styrka",
          score: 68,
          measures: [
            { label: "Kapitalavkastning mot mål", value: 70 },
            { label: "Diversifiering av intäkter", value: 64 },
            { label: "Kostnadseffektivitet i förvaltning", value: 72 },
            { label: "Buffert mot marknadssvängningar", value: 66 },
          ],
        },
        {
          name: "Styrning & förtroende",
          score: 64,
          measures: [
            { label: "Transparens i beslut och rapportering", value: 67 },
            { label: "Förtroende bland intressenter", value: 63 },
            { label: "Efterlevnad av regelverk", value: 72 },
            { label: "Kvalitet i uppföljning och utvärdering", value: 60 },
          ],
        },
        {
          name: "Kapacitet & medarbetare",
          score: 65,
          measures: [
            { label: "Medarbetarengagemang", value: 66 },
            { label: "Kompetensutveckling", value: 64 },
            { label: "Förmåga att attrahera kompetens", value: 61 },
            { label: "Digital mognad", value: 68 },
            { label: "Effektiva processer och arbetssätt", value: 67 },
          ],
        },
      ],
    },
  ],
};

// === Score-ton (schema-medvetet: slate ↔ trafikljus) ===
function scoreTone(s) {
  const tier = s >= 80 ? "high" : s >= 65 ? "mid" : "low";
  return { tier, fill: window.nsTierHex(tier, "fill"), text: window.nsTierHex(tier, "text") };
}

// === Sektionsrubrik (lokal) ===
function StratSection({ icon, label, subtitle, level = "sub" }) {
  if (level === "main") {
    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>
    );
  }
  return (
    <div className="flex items-center gap-2 mb-3 mt-1 ml-1">
      <Icon name={icon} className="w-3.5 h-3.5 text-zinc-400" strokeWidth={1.75}/>
      <h3 className="text-[11.5px] font-semibold text-zinc-500 uppercase tracking-wider">{label}</h3>
      {subtitle && <span className="text-[11.5px] text-zinc-400">— {subtitle}</span>}
    </div>
  );
}

// === Gauge (SVG, 270°) ===
function IndexGauge({ value, target }) {
  const scheme = window.useNsScheme();
  const grad = scheme === "ryg"
    ? ["#f87171", "#fbbf24", "#4ade80"]   // röd → gul → grön
    : ["#475569", "#64748b", "#94a3b8"];  // slate
  const cx = 130, cy = 130, r = 96, sw = 18;
  const a0 = 225, span = 270;
  const toXY = (ang, rad = r) => {
    const a = (ang - 90) * Math.PI / 180;
    return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
  };
  const arc = (start, end, rad = r) => {
    const [x0, y0] = toXY(start, rad);
    const [x1, y1] = toXY(end, rad);
    const large = (end - start) % 360 > 180 ? 1 : 0;
    return `M ${x0} ${y0} A ${rad} ${rad} 0 ${large} 1 ${x1} ${y1}`;
  };
  const valAng = a0 + (value / 100) * span;
  const tgtAng = a0 + (target / 100) * span;
  const [tx0, ty0] = toXY(tgtAng, r + sw / 2 + 1);
  const [tx1, ty1] = toXY(tgtAng, r - sw / 2 - 1);

  return (
    <svg viewBox="0 0 260 220" className="w-full max-w-[260px]">
      <defs>
        <linearGradient id="gaugeGrad" x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stopColor={grad[0]}/>
          <stop offset="55%" stopColor={grad[1]}/>
          <stop offset="100%" stopColor={grad[2]}/>
        </linearGradient>
      </defs>
      {/* Track */}
      <path d={arc(a0, a0 + span)} fill="none" stroke="#eef0f3" strokeWidth={sw} strokeLinecap="round"/>
      {/* Value */}
      <path d={arc(a0, valAng)} fill="none" stroke="url(#gaugeGrad)" strokeWidth={sw} strokeLinecap="round"/>
      {/* Target tick */}
      <line x1={tx0} y1={ty0} x2={tx1} y2={ty1} stroke="#34d399" strokeWidth="2.5" strokeLinecap="round"/>
      {/* Center value */}
      <text x={cx} y={cy + 12} textAnchor="middle" className="fill-zinc-900" style={{ fontSize: 54, fontWeight: 700, letterSpacing: "-0.02em" }}>{value}</text>
    </svg>
  );
}

// === Hjältekort ===
function IndexHero() {
  const ix = STRATEGY_DATA.index;
  const delta = ix.current - ix.prevValue;
  const scheme = window.useNsScheme();
  // Trafikljus: neutrala grå nyanser för kategorierna; grönt = schemats grönt.
  const C = scheme === "ryg"
    ? { actual: "#71717a", base: "#3f3f46", proj: "#d4d4d8", target: "#4ade80", goal: "#4ade80", goalLabel: "#16a34a" }
    : { actual: "#475569", base: "#1e293b", proj: "#cbd5e1", target: "#34d399", goal: "#34d399", goalLabel: "#10b981" };
  const barColor = { actual: C.actual, base: C.base, proj: C.proj, target: C.target };
  return (
    <Card className="overflow-hidden">
      <div className="grid grid-cols-1 lg:grid-cols-[300px_1fr]">
        {/* Vänster — gauge */}
        <div className="p-6 lg:border-r border-zinc-100 flex flex-col items-center text-center bg-gradient-to-b from-slate-50/60 to-transparent">
          <IndexGauge value={ix.current} target={ix.target}/>
          <div className="mt-1">
            <div className="text-[12.5px] font-semibold text-zinc-900 uppercase tracking-wide">Prestandaindex</div>
            <div className="text-[11px] text-zinc-400 uppercase tracking-wider">Sammanvägt · basår {ix.baseYear}</div>
          </div>
          <div className="flex items-center gap-2 mt-3">
            <Badge variant="positive">+{delta} sedan {ix.prevYear}</Badge>
            <Badge variant="outline">Mål {ix.target} år {ix.targetYear}</Badge>
          </div>
          <p className="text-[12px] text-zinc-500 mt-4 leading-relaxed max-w-[260px]">{ix.lead}</p>
        </div>

        {/* Höger — projektion */}
        <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 & projektion</h3>
              <p className="text-[12px] text-zinc-500 mt-0.5">Utfall 2023–2026 och projektion mot målet 80/100 till 2035</p>
            </div>
          </div>
          <div className="h-[230px] mt-2">
            <SRC width="100%" height="100%">
              <SBarChart data={ix.series} margin={{ top: 14, right: 8, left: 0, bottom: 0 }} barCategoryGap="22%">
                <SGrid vertical={false} stroke="#e4e4e7" strokeDasharray="2 4"/>
                <SXAxis dataKey="year" tick={{ fill: "#71717a", fontSize: 10.5, fontFamily: "DM Mono, monospace" }} tickLine={false} axisLine={false} tickFormatter={y => "'" + y.slice(2)}/>
                <SYAxis domain={[0, 100]} ticks={[0, 20, 40, 60, 80, 100]} tick={{ fill: "#71717a", fontSize: 10.5, fontFamily: "DM Mono, monospace" }} tickLine={false} axisLine={false} width={28}/>
                <STooltip content={<ChartTooltip formatter={v => `${v} / 100`}/>}/>
                <SRefLine y={80} stroke={C.goal} strokeDasharray="5 4" strokeWidth={1.5} label={{ value: "Mål 80", position: "right", fill: C.goalLabel, fontSize: 10.5, fontWeight: 600 }}/>
                <SBar dataKey="value" name="Index" radius={[3, 3, 0, 0]} isAnimationActive={false}>
                  {ix.series.map((d, i) => <SCell key={i} fill={barColor[d.kind]}/>)}
                </SBar>
              </SBarChart>
            </SRC>
          </div>
          {/* Legend */}
          <div className="flex flex-wrap items-center gap-4 mt-2 text-[11px] text-zinc-500 px-1">
            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: C.actual }}/>Utfall</span>
            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: C.proj }}/>Projektion (nuvarande trend)</span>
            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: C.target }}/>Mål 2035</span>
          </div>
        </div>
      </div>
    </Card>
  );
}

// === Dimensionrad (expanderbar) ===
function DimensionRow({ dim }) {
  const [open, setOpen] = useStratState(false);
  const t = scoreTone(dim.score);
  return (
    <div className="border-b border-zinc-100 last:border-b-0">
      <button onClick={() => setOpen(o => !o)} className="w-full text-left py-3 group">
        <div className="flex items-center justify-between gap-3 mb-1.5">
          <div className="flex items-center gap-2 min-w-0">
            <Icon name="chevron-right" className={`w-3.5 h-3.5 text-zinc-400 transition-transform flex-shrink-0 ${open ? "rotate-90" : ""}`}/>
            <span className="text-[13px] font-medium text-zinc-800 truncate">{dim.name}</span>
          </div>
          <span className="font-mono text-[13px] font-semibold tabular-nums flex-shrink-0" style={{ color: t.text }}>{dim.score}<span className="text-zinc-400 text-[11px] font-normal"> / 100</span></span>
        </div>
        <div className="relative h-2 bg-zinc-100 rounded-full overflow-hidden ml-5">
          <div className="h-full rounded-full transition-all" style={{ width: `${dim.score}%`, background: t.fill }}/>
        </div>
        {/* målmarkör vid 80 */}
        <div className="relative ml-5 h-0">
          <span className="absolute -top-2 w-px h-2 bg-zinc-400/70" style={{ left: "80%" }}/>
        </div>
      </button>
      {open && (
        <div className="ml-5 mb-3 pl-3 border-l border-zinc-100 space-y-2">
          {dim.measures.map((m, i) => (
            <div key={i}>
              <div className="flex items-center justify-between text-[11.5px] mb-1">
                <span className="text-zinc-600 truncate pr-2">{m.label}</span>
                <span className="font-mono text-zinc-500 tabular-nums flex-shrink-0">{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: scoreTone(m.value).fill }}/>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// === Delkort ===
function PartCard({ part }) {
  const t = scoreTone(part.score);
  return (
    <Card className="overflow-hidden">
      <div className="px-5 pt-4 pb-3 border-b border-zinc-100">
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-start gap-3 min-w-0">
            <div className="w-9 h-9 rounded-lg bg-zinc-100 text-zinc-500 flex items-center justify-center flex-shrink-0 border border-zinc-200/70">
              <Icon name={part.icon} className="w-4 h-4" strokeWidth={1.75}/>
            </div>
            <div className="min-w-0">
              <h3 className="text-[15px] font-semibold text-zinc-900 tracking-tight leading-snug">{part.title}</h3>
              <p className="text-[12px] text-zinc-500 mt-0.5 leading-relaxed">{part.desc}</p>
            </div>
          </div>
          <div className="text-right flex-shrink-0">
            <div className="text-[26px] font-semibold tabular-nums leading-none" style={{ color: t.text }}>{part.score}</div>
            <div className="text-[10.5px] text-zinc-400 uppercase tracking-wider mt-0.5">delindex</div>
          </div>
        </div>
      </div>
      <div className="px-5">
        {part.dimensions.map((d, i) => <DimensionRow key={i} dim={d}/>)}
      </div>
      <div className="px-5 py-2.5 border-t border-zinc-100 bg-zinc-50/40 flex items-center gap-2 text-[11px] text-zinc-500">
        <span className="w-px h-3 bg-zinc-400/70"/>
        Markör visar målnivån 80/100 · klicka på en dimension för underliggande mått
      </div>
    </Card>
  );
}

// === Huvudvy ===
function StrategyView() {
  window.useNsScheme();
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-[22px] font-semibold text-zinc-900 tracking-tight">Strategi</h2>
        <p className="text-[13px] text-zinc-500 mt-0.5">Långsiktiga mål och uppföljning · Prestandaindexet 0–100</p>
      </div>

      <section>
        <StratSection icon="trending-up" label="Prestandaindexet" subtitle="övergripande mätare för stiftelsens strategi" level="main"/>
        <IndexHero/>
      </section>

      <section>
        <StratSection icon="sliders" label="Indexets delar" subtitle="två delar · sex dimensioner"/>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 ml-1">
          {STRATEGY_DATA.parts.map(p => <PartCard key={p.id} part={p}/>)}
        </div>
        <p className="text-[11.5px] text-zinc-400 mt-3 ml-1">Skalan 0–100. Basår 2026. Målvärde 2035: minst 80/100 i totalindex.</p>
      </section>

      {window.BscSection && <window.BscSection/>}
    </div>
  );
}

window.StrategyView = StrategyView;

// === Kompakt widget för Översikt: Prestandaindex ===
function WStrategyIndex() {
  const ix = STRATEGY_DATA.index;
  return (
    <Card className="overflow-hidden group flex flex-col">
      <WidgetHeader
        title="Prestandaindex"
        badge="Mål 80 år 2035"
        sub={`Övergripande mätare · +${ix.current - ix.prevValue} sedan ${ix.prevYear}`}
      />
      <div className="px-2 -mt-3 flex justify-center flex-1 items-center">
        <div className="w-[210px]">
          <IndexGauge value={ix.current} target={ix.target}/>
        </div>
      </div>
    </Card>
  );
}

window.WStrategyIndex = WStrategyIndex;