// Medlemsvård-vyn — medlemsbas, tillväxt & engagemang
const {
  ResponsiveContainer: MRC,
  AreaChart: MAreaChart, Area: MArea,
  BarChart: MBarChart, Bar: MBar,
  ComposedChart: MComposed, Line: MLine,
  XAxis: MXAxis, YAxis: MYAxis, CartesianGrid: MGrid,
  Tooltip: MTooltip, Cell: MCell, ReferenceLine: MRefLine,
} = Recharts;

// Slate-skala (matchar Ekonomi/Strategi) + grön/röd accent
const MSLATE = { d900: "#0f172a", d800: "#1e293b", d700: "#334155", d600: "#475569", d500: "#64748b", d400: "#94a3b8", d300: "#cbd5e1", d200: "#e2e8f0" };
const MGREEN = "#10b981";
const MROSE = "#e11d48";
const mAxis = { tick: { fill: "#71717a", fontSize: 10.5, fontFamily: "DM Mono, monospace" }, tickLine: false, axisLine: false };
const mGrid = { stroke: "#e4e4e7", strokeDasharray: "2 4" };

const MEDLEM_DATA = {
  // Medlemsbas — fyra huvudtal
  totalMembers: { value: 2847, spark: [2480, 2560, 2650, 2740, 2847] },
  newMembers:   { value: 124,  spark: [78, 92, 85, 110, 124] },
  engagement:   { value: 68,   prev: 64, spark: [58, 60, 63, 64, 68] },
  nps:          { value: 42,   spark: [31, 34, 37, 39, 42] },

  // Medlemsutveckling — totalt antal per månad (12 mån)
  growth: [
    { m: "Jan", value: 2480 }, { m: "Feb", value: 2530 }, { m: "Mar", value: 2575 },
    { m: "Apr", value: 2610 }, { m: "Maj", value: 2655 }, { m: "Jun", value: 2690 },
    { m: "Jul", value: 2705 }, { m: "Aug", value: 2730 }, { m: "Sep", value: 2760 },
    { m: "Okt", value: 2795 }, { m: "Nov", value: 2820 }, { m: "Dec", value: 2847 },
  ],

  // In- och utflöde per kvartal
  flow: [
    { q: "Q1", nya: 142, avslutade: -58, netto: 84 },
    { q: "Q2", nya: 128, avslutade: -64, netto: 64 },
    { q: "Q3", nya: 96,  avslutade: -72, netto: 24 },
    { q: "Q4", nya: 124, avslutade: -49, netto: 75 },
  ],

  // Medlemmar per kategori
  segments: [
    { name: "Privatpersoner",            value: 1980 },
    { name: "Studerande",                value: 392 },
    { name: "Företag & organisationer",  value: 318 },
    { name: "Familjemedlemskap",         value: 110 },
    { name: "Hedersmedlemmar",           value: 47 },
  ],

  // Engagemangstrappa — andel av medlemmarna på varje nivå
  ladder: [
    { level: "Registrerade medlemmar",        count: 2847, pct: 100 },
    { level: "Aktiva i nyhetsbrev",           count: 1850, pct: 65 },
    { level: "Deltar i event & aktiviteter",  count: 1224, pct: 43 },
    { level: "Återkommande bidragsgivare",    count: 712,  pct: 25 },
    { level: "Volontärer & ambassadörer",     count: 256,  pct: 9 },
  ],
};

// ===== Rubriker (matchar Ekonomi-vyn) =====
function MedMainHeader({ label, subtitle }) {
  return (
    <div className="flex items-baseline gap-2 flex-wrap mb-4 mt-1">
      <h3 className="text-[18px] font-semibold text-zinc-900 tracking-tight">{label}</h3>
      {subtitle && <span className="text-[13px] text-zinc-400">{subtitle}</span>}
    </div>
  );
}
// Titelrad inuti kort — samma stil som dashboardens övriga widgets
function CardTitleBar({ title, desc }) {
  return (
    <div className="px-5 pt-4 pb-3 border-b border-zinc-100">
      <h3 className="text-[13px] font-semibold text-zinc-900 tracking-tight">{title}</h3>
      {desc && <p className="text-[12px] text-zinc-500 mt-0.5">{desc}</p>}
    </div>
  );
}

// ===== Medlems-KPI:er =====
function MedlemKpiRow() {
  const d = MEDLEM_DATA;
  const kpis = [
    { label: "Totalt antal medlemmar", value: fmtNum(d.totalMembers.value), delta: "+107 mot förra månaden", deltaTone: "positive", spark: d.totalMembers.spark, icon: "users", accent: MSLATE.d700 },
    { label: "Nya medlemmar (30 d)", value: `+${d.newMembers.value}`, delta: "+12,7 % mot snitt", deltaTone: "positive", spark: d.newMembers.spark, icon: "trending-up", accent: MSLATE.d600 },
    { label: "Medlemsengagemang", value: `${d.engagement.value} %`, delta: `+${d.engagement.value - d.engagement.prev} pp mot förra månaden`, deltaTone: "positive", spark: d.engagement.spark, icon: "activity", accent: MSLATE.d500 },
    { label: "NPS bland medlemmar", value: d.nps.value, delta: "+3 mot förra kvartalet", deltaTone: "positive", spark: d.nps.spark, icon: "star", accent: MSLATE.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>
  );
}

// ===== 1. Medlemsutveckling =====
function GrowthCard() {
  const data = MEDLEM_DATA.growth;
  const first = data[0].value, last = data[data.length - 1].value;
  const growthPct = (((last - first) / first) * 100).toFixed(1);
  return (
    <Card className="overflow-hidden">
      <CardTitleBar title="Medlemsutveckling" desc={`Totalt antal medlemmar per månad · +${growthPct} % under året`}/>
      <div className="h-[230px] px-3 pt-3">
        <MRC width="100%" height="100%">
          <MAreaChart data={data} margin={{ top: 10, right: 16, left: 4, bottom: 0 }}>
            <defs>
              <linearGradient id="m-growth" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={MSLATE.d600} stopOpacity={0.18}/>
                <stop offset="100%" stopColor={MSLATE.d600} stopOpacity={0.02}/>
              </linearGradient>
            </defs>
            <MGrid {...mGrid} vertical={false}/>
            <MXAxis dataKey="m" {...mAxis}/>
            <MYAxis domain={[2400, 2900]} ticks={[2400, 2550, 2700, 2850]} width={36} {...mAxis}/>
            <MTooltip content={<ChartTooltip formatter={fmtNum} suffix=" medlemmar"/>}/>
            <MArea type="monotone" dataKey="value" name="Medlemmar" stroke={MSLATE.d700} strokeWidth={2} fill="url(#m-growth)"/>
          </MAreaChart>
        </MRC>
      </div>
    </Card>
  );
}

// ===== 2. In- och utflöde per kvartal =====
function FlowTooltip({ active, payload }) {
  if (!active || !payload || !payload.length) return null;
  const p = payload[0].payload;
  return (
    <div className="bg-white border border-zinc-200 rounded-lg shadow-lg px-3 py-2 text-[12px]">
      <div className="font-semibold text-zinc-900 mb-1">{p.q} 2026</div>
      <div className="flex items-center gap-3 text-zinc-600"><span>Nya</span><span className="font-mono text-zinc-900 ml-auto">+{p.nya}</span></div>
      <div className="flex items-center gap-3 text-zinc-600"><span>Avslutade</span><span className="font-mono text-zinc-900 ml-auto">{p.avslutade}</span></div>
      <div className="flex items-center gap-3 text-zinc-700 font-medium mt-1 pt-1 border-t border-zinc-100"><span>Netto</span><span className="font-mono ml-auto" style={{ color: MGREEN }}>+{p.netto}</span></div>
    </div>
  );
}
function FlowCard() {
  const data = MEDLEM_DATA.flow;
  return (
    <Card className="overflow-hidden">
      <CardTitleBar title="In- och utflöde" desc="Nya och avslutade medlemskap per kvartal, med nettoförändring."/>
      <div className="h-[230px] px-3 pt-3">
        <MRC width="100%" height="100%">
          <MComposed data={data} margin={{ top: 10, right: 16, left: 4, bottom: 0 }} barGap={2}>
            <MGrid {...mGrid} vertical={false}/>
            <MXAxis dataKey="q" {...mAxis}/>
            <MYAxis ticks={[-100, -50, 0, 50, 100, 150]} width={32} {...mAxis}/>
            <MRefLine y={0} stroke={MSLATE.d300}/>
            <MTooltip content={<FlowTooltip/>} cursor={{ fill: "#f4f4f5" }}/>
            <MBar dataKey="nya" name="Nya" fill={MSLATE.d600} radius={[3, 3, 0, 0]} barSize={22} isAnimationActive={false}/>
            <MBar dataKey="avslutade" name="Avslutade" fill={MSLATE.d300} radius={[0, 0, 3, 3]} barSize={22} isAnimationActive={false}/>
            <MLine type="monotone" dataKey="netto" name="Netto" stroke={MGREEN} strokeWidth={2} dot={{ r: 3, fill: MGREEN }} isAnimationActive={false}/>
          </MComposed>
        </MRC>
      </div>
      <div className="flex flex-wrap items-center gap-4 px-5 py-3 border-t border-zinc-100 bg-zinc-50/40 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: MSLATE.d600 }}/>Nya</span>
        <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: MSLATE.d300 }}/>Avslutade</span>
        <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded-full" style={{ background: MGREEN }}/>Nettoförändring</span>
      </div>
    </Card>
  );
}

// ===== 3. Medlemmar per kategori =====
function SegmentsCard() {
  const data = MEDLEM_DATA.segments;
  const total = data.reduce((s, d) => s + d.value, 0);
  const max = Math.max(...data.map(d => d.value));
  return (
    <Card className="overflow-hidden h-full">
      <CardTitleBar title="Medlemmar per kategori" desc="Hur medlemsbasen är sammansatt."/>
      <div className="px-5 py-4 space-y-3.5">
        {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 font-medium">{d.name}</span>
              <span className="text-zinc-500 tabular-nums">
                <span className="font-mono text-zinc-900 font-semibold">{fmtNum(d.value)}</span>
                <span className="text-zinc-400 ml-1.5">{((d.value / total) * 100).toFixed(0)} %</span>
              </span>
            </div>
            <div className="h-2.5 bg-zinc-100 rounded-full overflow-hidden">
              <div className="h-full rounded-full" style={{ width: `${(d.value / max) * 100}%`, background: i === 0 ? MSLATE.d700 : MSLATE.d500 }}/>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// ===== 4. Engagemangstrappa =====
function LadderCard() {
  const data = MEDLEM_DATA.ladder;
  return (
    <Card className="overflow-hidden h-full">
      <CardTitleBar title="Engagemangstrappa" desc="Andel av medlemmarna på varje engagemangsnivå."/>
      <div className="px-5 py-4 space-y-2.5">
        {data.map((d, i) => {
          const shade = [MSLATE.d800, MSLATE.d700, MSLATE.d600, MSLATE.d500, MSLATE.d400][i];
          return (
            <div key={i} className="flex items-center gap-3">
              <span className="w-52 flex-shrink-0 text-[12.5px] text-zinc-700">{d.level}</span>
              <div className="flex-1 h-7 bg-zinc-100 rounded-md overflow-hidden relative">
                <div className="h-full rounded-md flex items-center justify-end px-2" style={{ width: `${d.pct}%`, background: shade }}>
                  <span className="text-[11px] font-semibold text-white tabular-nums">{d.pct} %</span>
                </div>
              </div>
              <span className="w-12 text-right text-[11.5px] font-mono tabular-nums text-zinc-500">{fmtNum(d.count)}</span>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

// ===== Huvudvy =====
function MedlemsvardView() {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-[22px] font-semibold text-zinc-900 tracking-tight">Medlemsvård</h2>
        <p className="text-[13px] text-zinc-500 mt-0.5">Medlemsbas, tillväxt och engagemang · 2026</p>
      </div>

      <MedlemKpiRow/>

      <section className="pb-12">
        <MedMainHeader label="Medlemsutveckling & engagemang" subtitle="tillväxt, sammansättning och aktivitet"/>
        <div className="space-y-5">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-start">
            <GrowthCard/>
            <FlowCard/>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
            <SegmentsCard/>
            <LadderCard/>
          </div>
        </div>
      </section>
    </div>
  );
}

window.MedlemsvardView = MedlemsvardView;