// Balanced Scorecard (BSC) — fyra perspektiv, enhetlig statuspresentation
const { useState: useBscState } = React;

const BSC_DATA = {
  overall: { score: 76, onTrack: 17, watch: 9, off: 2, total: 28, period: "Q2 2026" },
  perspectives: [
    {
      num: "1",
      title: "Samhällseffekt & människor",
      question: "Vilken förändring sker hos människor i samhället?",
      icon: "users",
      score: 70,
      onTrack: 2, total: 7,
      link: "Prestandaindexet",
      kpis: [
        { l: "Räckvidd i målgrupper", v: "72", unit: "/100", t: "mål 80", prog: 90, trend: "+2", dir: "up", status: "watch", idx: true },
        { l: "Uppnådd effekt hos mottagare", v: "68", unit: "/100", t: "mål 75", prog: 80, trend: "+1", dir: "up", status: "watch", idx: true },
        { l: "Mottagarnas nöjdhet", v: "73", unit: "/100", t: "mål 78", prog: 94, trend: "+3", dir: "up", status: "on", idx: true },
        { l: "Långsiktig samhällsnytta", v: "68", unit: "/100", t: "mål 75", prog: 81, trend: "+2", dir: "up", status: "watch", idx: true },
        { l: "Aktivt deltagande", v: "65", unit: "/100", t: "mål 72", prog: 76, trend: "+1", dir: "up", status: "watch", idx: true },
        { l: "Tillit & gemenskap", v: "64", unit: "/100", t: "mål 70", prog: 78, trend: "+2", dir: "up", status: "watch", idx: true },
        { l: "Deltagandegrad i våra insatser", v: "41", unit: "%", t: "mål 50 %", prog: 82, trend: "+4 pp", dir: "up", status: "watch" },
      ],
    },
    {
      num: "2",
      title: "Ekosystem & relationer",
      question: "Hur starkt och levande är vårt ekosystem?",
      icon: "activity",
      score: 83,
      onTrack: 5, total: 7,
      kpis: [
        { l: "Strategiska partners", v: "34", unit: "st", t: "mål 40", prog: 85, trend: "+6", dir: "up", status: "on" },
        { l: "Samskapande projekt", v: "18", unit: "st", t: "mål 20", prog: 90, trend: "+3", dir: "up", status: "on" },
        { l: "Medlemsantal", v: "4 820", unit: "", t: "mål 5 500", prog: 88, trend: "+210", dir: "up", status: "watch" },
        { l: "Medlemsengagemang", v: "38", unit: "%", t: "mål 45 %", prog: 84, trend: "−2 pp", dir: "down", status: "off" },
        { l: "NPS bland partners", v: "+47", unit: "", t: "mål +50", prog: 94, trend: "+5", dir: "up", status: "on" },
        { l: "Leverage-faktor", v: "3,2", unit: "×", t: "mål 3,5×", prog: 91, trend: "+0,3", dir: "up", status: "on" },
        { l: "Nätverksaktivitet & mötesplatser", v: "62", unit: "st", t: "mål 70", prog: 89, trend: "+8", dir: "up", status: "on" },
      ],
    },
    {
      num: "3",
      title: "Synlighet & lärande",
      question: "Hur väl påverkar vi och lär vi tillsammans?",
      icon: "search",
      score: 76,
      onTrack: 5, total: 7,
      kpis: [
        { l: "Mediaomnämnanden", v: "286", unit: "/år", t: "mål 300", prog: 95, trend: "+34", dir: "up", status: "on" },
        { l: "Räckvidd i digitala kanaler", v: "1,2", unit: "M", t: "mål 1,5 M", prog: 80, trend: "+0,2 M", dir: "up", status: "watch" },
        { l: "Deltagare i seminarier & event", v: "3 450", unit: "", t: "mål 3 500", prog: 99, trend: "+420", dir: "up", status: "on" },
        { l: "Nedladdningar/läsningar", v: "28 400", unit: "", t: "mål 30 000", prog: 95, trend: "+3 100", dir: "up", status: "on" },
        { l: "Omvärldsrapporter & analyser", v: "9", unit: "st", t: "mål 12", prog: 75, trend: "+2", dir: "up", status: "watch" },
        { l: "AI- & dataanvändning", v: "2,4", unit: "/5", t: "mål 3,5", prog: 69, trend: "+0,4", dir: "up", status: "off" },
        { l: "Kvalitet & aktualitet i kunskap", v: "4,1", unit: "/5", t: "mål 4,3", prog: 95, trend: "+0,2", dir: "up", status: "on" },
      ],
    },
    {
      num: "4",
      title: "Resurser & hållbarhet",
      question: "Har vi kapacitet att hålla riktningen långsiktigt?",
      icon: "wallet",
      score: 79,
      onTrack: 5, total: 7,
      kpis: [
        { l: "Extern finansiering (andel)", v: "27", unit: "%", t: "mål 35 %", prog: 77, trend: "+3 pp", dir: "up", status: "watch" },
        { l: "Diversifiering av intäkter", v: "0,62", unit: "idx", t: "mål 0,70", prog: 89, trend: "+0,04", dir: "up", status: "watch" },
        { l: "Kapitalavkastning", v: "4,3", unit: "%", t: "mål 4,2 %", prog: 100, trend: "+0,4 pp", dir: "up", status: "on" },
        { l: "Personalvälmående (eNPS)", v: "+32", unit: "", t: "mål +35", prog: 91, trend: "+4", dir: "up", status: "on" },
        { l: "Kompetensutveckling", v: "38", unit: "h", t: "mål 40 h", prog: 95, trend: "+6", dir: "up", status: "on" },
        { l: "Innovationsförmåga & nya initiativ", v: "7", unit: "st", t: "mål 8", prog: 88, trend: "+2", dir: "up", status: "on" },
        { l: "Teknisk kapacitet & datasäkerhet", v: "3,2", unit: "/5", t: "mål 4,0", prog: 80, trend: "+0,3", dir: "up", status: "watch" },
      ],
    },
  ],
};

// Status-färger, schema-medvetet (slate ↔ trafikljus). Hex så att toggeln
// styr fyllningarna direkt. on→high, watch→mid, off→low.
function bscStatus() {
  const f = t => window.nsTierHex(t, "fill");
  const c = t => window.nsTierHex(t, "text");
  return {
    on:    { tier: "high", dot: f("high"), bar: f("high"), text: c("high"), label: "Uppfyller mål" },
    watch: { tier: "mid",  dot: f("mid"),  bar: f("mid"),  text: c("mid"),  label: "Bevaka" },
    off:   { tier: "low",  dot: f("low"),  bar: f("low"),  text: c("low"),  label: "Under mål" },
  };
}

function BscTrend({ dir, trend }) {
  const up = dir === "up";
  const flat = dir === "flat";
  return (
    <span className={`inline-flex items-center gap-0.5 text-[10.5px] font-medium tabular-nums ${
      flat ? "text-zinc-400" : up ? "text-slate-600" : "text-slate-400"
    }`}>
      <Icon name={flat ? "minus" : up ? "trending-up" : "trending-down"} className="w-3 h-3" strokeWidth={2.25}/>
      {trend}
    </span>
  );
}

function BscKpiRow({ k }) {
  const s = bscStatus()[k.status];
  return (
    <div className="py-2">
      <div className="flex items-center justify-between gap-3 mb-1.5">
        <div className="flex items-center gap-2 min-w-0">
          <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: s.dot }}/>
          <span className="text-[12.5px] text-zinc-700 truncate">{k.l}</span>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <BscTrend dir={k.dir} trend={k.trend}/>
          <span className="font-mono text-[13px] font-semibold text-zinc-900 tabular-nums">
            {k.v}<span className="text-zinc-400 text-[11px] font-normal">{k.unit}</span>
          </span>
        </div>
      </div>
      {/* progress mot mål */}
      <div className="relative h-1.5 bg-zinc-100 rounded-full overflow-hidden ml-3.5">
        <div className="h-full rounded-full transition-all" style={{ width: `${k.prog}%`, background: s.bar }}/>
      </div>
      <div className="flex items-center justify-end mt-0.5 ml-3.5">
        <span className="text-[10px] text-zinc-400 font-mono">{k.t}</span>
      </div>
    </div>
  );
}

function BscPerspectiveCard({ p }) {
  const accentTier = p.score >= 80 ? "high" : p.score >= 70 ? "mid" : "low";
  const accentColor = window.nsTierHex(accentTier, "text");
  return (
    <Card className="overflow-hidden flex flex-col">
      {/* Header */}
      <div className="px-5 pt-4 pb-3.5 border-b border-zinc-100 bg-gradient-to-b from-zinc-50/60 to-transparent">
        <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={p.icon} className="w-4 h-4" strokeWidth={1.75}/>
            </div>
            <div className="min-w-0">
              <h3 className="text-[14px] font-semibold text-zinc-900 tracking-tight leading-snug">{p.title}</h3>
              <div className="mt-1.5">
                <Badge variant="outline">{p.onTrack}/{p.total} uppfyller mål</Badge>
              </div>
            </div>
          </div>
          <div className="text-right flex-shrink-0">
            <div className="text-[26px] font-semibold tabular-nums leading-none" style={{ color: accentColor }}>{p.score}</div>
            <div className="text-[10.5px] text-zinc-400 uppercase tracking-wider mt-0.5">delpoäng</div>
          </div>
        </div>
      </div>
      {/* KPI-lista */}
      <div className="px-5 py-2 divide-y divide-zinc-100 flex-1">
        {p.kpis.map((k, i) => <BscKpiRow key={i} k={k}/>)}
      </div>
    </Card>
  );
}

function BscSection() {
  window.useNsScheme();
  const o = BSC_DATA.overall;
  const ST = bscStatus();
  return (
    <section className="pb-12">
      <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">Balanced Scorecard</h3>
          <span className="text-[13px] text-zinc-400">fyra perspektiv som säkerställer helhet och riktning</span>
        </div>
      </div>

      {/* Sammanfattningsrad */}
      <Card className="overflow-hidden mb-4">
        <div className="grid grid-cols-1 md:grid-cols-[auto_1fr_auto] items-center gap-5 px-5 py-4">
          <div className="flex items-center gap-4">
            <div>
              <div className="text-[10.5px] font-semibold text-zinc-400 uppercase tracking-wider">Poäng</div>
              <div className="flex items-baseline gap-1.5 mt-0.5">
                <span className="text-[30px] font-semibold text-zinc-900 tabular-nums leading-none">{o.score}</span>
                <span className="text-[13px] text-zinc-400">/100</span>
              </div>
            </div>
            <div className="w-px h-12 bg-zinc-200"/>
          </div>

          {/* Stat-fördelning */}
          <div className="flex items-center gap-6">
            {[
              { k: "on", n: o.onTrack, l: "Uppfyller mål" },
              { k: "watch", n: o.watch, l: "Bevaka" },
              { k: "off", n: o.off, l: "Under mål" },
            ].map(s => (
              <div key={s.k} className="flex items-center gap-2">
                <span className="w-2.5 h-2.5 rounded-full" style={{ background: ST[s.k].dot }}/>
                <span className="text-[18px] font-semibold text-zinc-900 tabular-nums">{s.n}</span>
                <span className="text-[12px] text-zinc-500">{s.l}</span>
              </div>
            ))}
            <span className="text-[12px] text-zinc-400">av {o.total} KPI:er</span>
          </div>

          <div className="flex items-center gap-2 justify-self-end">
            <Badge variant="outline">Årsdata 2026</Badge>
          </div>
        </div>
        {/* Samlad progressbalk */}
        <div className="h-1.5 flex">
          <div style={{ width: `${(o.onTrack / o.total) * 100}%`, background: ST.on.bar }}/>
          <div style={{ width: `${(o.watch / o.total) * 100}%`, background: ST.watch.bar }}/>
          <div style={{ width: `${(o.off / o.total) * 100}%`, background: ST.off.bar }}/>
        </div>
      </Card>

      {/* 2×2 kvadrant */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {BSC_DATA.perspectives.map(p => <BscPerspectiveCard key={p.num} p={p}/>)}
      </div>

      {/* Förklaring */}
      <div className="mt-3 flex flex-wrap items-center gap-4 text-[11px] text-zinc-500">
        <span className="font-medium text-zinc-700">Status mot mål:</span>
        {Object.entries(ST).map(([k, s]) => (
          <span key={k} className="flex items-center gap-1.5">
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: s.dot }}/>{s.label}
          </span>
        ))}
        <span className="text-zinc-300">·</span>
        <span>Stapeln visar hur nära målet varje KPI ligger, oavsett enhet.</span>
      </div>
    </section>
  );
}

window.BscSection = BscSection;