// Widgets för Nordstar dashboard — alla diagram via Recharts
const {
  ResponsiveContainer, AreaChart, Area, LineChart, Line, BarChart, Bar,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine,
  RadialBarChart, RadialBar, PolarAngleAxis, Cell, ComposedChart,
} = Recharts;

const D = window.NORDSTAR_DATA;

// Färgsystem — tonal slate + en indigo-accent
const COLORS = {
  primary: "#334155",      // slate-700 (huvudfärg, ej helt svart)
  primarySoft: "#64748b",  // slate-500
  primaryLight: "#cbd5e1", // slate-300 (sekundär stapel)
  accent: "#6366f1",       // indigo-500
  accentLight: "#c7d2fe",  // indigo-200
  positive: "#10b981",     // emerald
  warning: "#94a3b8",      // dämpad slate istället för orange
  danger: "#94a3b8",
  muted: "#94a3b8",
  grid: "#e4e4e7",
};
const PALETTE = ["#334155", "#6366f1", "#94a3b8", "#cbd5e1", "#c7d2fe"];

const axisProps = {
  tick: { fill: "#71717a", fontSize: 11, fontFamily: "DM Mono, monospace" },
  tickLine: false,
  axisLine: false,
};
const gridProps = {
  vertical: false,
  stroke: COLORS.grid,
  strokeDasharray: "2 4",
};

// ---------------- Widget header ----------------
function WidgetHeader({ title, badge, badgeVariant = "outline", value, delta, deltaTone, sub, onRemove }) {
  const ctx = useContext(WorkspaceContext);
  const dashMode = !!ctx;
  const ws = ctx && ctx.ws;
  const remove = onRemove || (ctx && ctx.onRemove);
  return (
    <div className="px-5 pt-4 pb-3">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h3 className="text-[12.5px] font-semibold text-zinc-500 tracking-tight uppercase whitespace-nowrap">{title}</h3>
            {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
          </div>
          {value && (
            <div className="flex items-baseline gap-2 mt-1">
              <span className="text-[26px] font-semibold text-zinc-900 tracking-tight tabular-nums">{value}</span>
              {delta && (
                <span className={`text-[12px] font-medium tabular-nums ${
                  deltaTone === "positive" ? "text-emerald-600"
                  : deltaTone === "warning" ? "text-amber-700"
                  : deltaTone === "danger" ? "text-rose-600"
                  : "text-zinc-500"
                }`}>
                  {delta}
                </span>
              )}
            </div>
          )}
          {sub && <p className="text-[12px] text-zinc-500 mt-0.5">{sub}</p>}
        </div>
        {dashMode && (
          <div className="flex items-center gap-1 flex-shrink-0">
            {remove && (
              <button
                onClick={remove}
                className="h-6 w-6 rounded-md text-zinc-300 hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                title="Ta bort"
              >
                <Icon name="x" className="w-3.5 h-3.5"/>
              </button>
            )}
            {ws && <WorkspacePill ws={ws}/>}
          </div>
        )}
      </div>
    </div>
  );
}

function deltaPct(arr, key = "value") {
  const a = arr[arr.length - 1][key];
  const b = arr[arr.length - 2][key];
  const d = ((a - b) / b) * 100;
  return { value: d, str: `${d >= 0 ? "+" : ""}${d.toFixed(1)} %`, tone: d >= 0 ? "positive" : "danger" };
}
function deltaAbs(arr, key = "value") {
  const a = arr[arr.length - 1][key];
  const b = arr[arr.length - 2][key];
  const d = a - b;
  return { str: `${d >= 0 ? "+" : ""}${d} jmf ${arr[arr.length - 2].year}`, tone: d <= 0 ? "positive" : "warning" };
}

// ==================== WIDGETS ====================

function WGrossRent({ onRemove }) {
  const latest = D.grossRent[D.grossRent.length - 1];
  const d = deltaPct(D.grossRent);
  return (
    <Card className="group">
      <WidgetHeader
        title="Bruttohyror"
        badge="5 år"
        value={fmtEURshort(latest.value)}
        delta={d.str}
        deltaTone="positive"
        sub="Total bruttohyra per år"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={D.grossRent} margin={{ top: 6, right: 12, left: 4, bottom: 0 }}>
            <defs>
              <linearGradient id="gr-grossRent" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={COLORS.primary} stopOpacity={0.18}/>
                <stop offset="100%" stopColor={COLORS.primary} stopOpacity={0.02}/>
              </linearGradient>
            </defs>
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} tickFormatter={v => `${(v/1_000_000).toFixed(1)}M`} width={36}/>
            <Tooltip content={<ChartTooltip/>} formatter={fmtEURshort}/>
            <Area type="monotone" dataKey="value" name="Bruttohyra" stroke={COLORS.primary} strokeWidth={2} fill="url(#gr-grossRent)"/>
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WRenovations({ onRemove }) {
  const latest = D.renovations[D.renovations.length - 1];
  const d = deltaPct(D.renovations);
  return (
    <Card className="group">
      <WidgetHeader
        title="Renoveringskostnader"
        badge="5 år"
        value={fmtEURshort(latest.value)}
        delta={d.str}
        deltaTone={d.value >= 0 ? "warning" : "positive"}
        sub="Planerat vs oplanerat underhåll"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={D.renovations} margin={{ top: 6, right: 12, left: 4, bottom: 0 }} barCategoryGap="35%">
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} tickFormatter={v => `${(v/1000).toFixed(0)}k`} width={36}/>
            <Tooltip content={<ChartTooltip/>}/>
            <Bar dataKey="planned" name="Planerat" stackId="r" fill={COLORS.primary} radius={[0,0,0,0]}/>
            <Bar dataKey="unplanned" name="Oplanerat" stackId="r" fill={COLORS.primaryLight} radius={[3,3,0,0]}/>
          </BarChart>
        </ResponsiveContainer>
      </div>
      <div className="px-5 pb-3 flex items-center gap-4 text-[11px] text-zinc-500">
        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm" style={{background: COLORS.primary}}/>Planerat</span>
        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-sm" style={{background: COLORS.primaryLight}}/>Oplanerat</span>
      </div>
    </Card>
  );
}

function WYield({ onRemove }) {
  const latest = D.yield[D.yield.length - 1];
  const prev = D.yield[D.yield.length - 2];
  const d = (latest.value - prev.value).toFixed(1);
  return (
    <Card className="group">
      <WidgetHeader
        title="Avkastning"
        badge="NOI %"
        value={fmtPct(latest.value)}
        delta={`${d >= 0 ? "+" : ""}${d} pp`}
        deltaTone={d >= 0 ? "positive" : "danger"}
        sub={`Branschsnitt: ${fmtPct(latest.benchmark)}`}
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={D.yield} margin={{ top: 6, right: 12, left: 4, bottom: 0 }}>
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} domain={[3.5, 5]} tickFormatter={v => `${v.toFixed(1)}%`} width={36}/>
            <Tooltip content={<ChartTooltip formatter={v => `${v.toFixed(1)} %`}/>}/>
            <Line type="monotone" dataKey="benchmark" name="Benchmark" stroke={COLORS.muted} strokeWidth={1.5} strokeDasharray="4 4" dot={false}/>
            <Line type="monotone" dataKey="value" name="Nordstar" stroke={COLORS.accent} strokeWidth={2.5} dot={{ r: 3, fill: COLORS.accent, strokeWidth: 0 }} activeDot={{ r: 5 }}/>
          </LineChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WLoans({ onRemove }) {
  const latest = D.loans[D.loans.length - 1];
  const d = deltaPct(D.loans);
  return (
    <Card className="group">
      <WidgetHeader
        title="Fastighetsbolagens lån"
        badge="Total"
        value={fmtEURshort(latest.value)}
        delta={d.str}
        deltaTone="positive"
        sub={`Ränta: ${fmtPct(latest.interest)}`}
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <ComposedChart data={D.loans} margin={{ top: 6, right: 12, left: 4, bottom: 0 }}>
            <defs>
              <linearGradient id="gr-loans" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={COLORS.primarySoft} stopOpacity={0.20}/>
                <stop offset="100%" stopColor={COLORS.primarySoft} stopOpacity={0.02}/>
              </linearGradient>
            </defs>
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis yAxisId="l" {...axisProps} tickFormatter={v => `${(v/1_000_000).toFixed(0)}M`} width={36}/>
            <YAxis yAxisId="r" orientation="right" {...axisProps} domain={[0, 6]} tickFormatter={v => `${v}%`} width={32}/>
            <Tooltip content={<ChartTooltip/>}/>
            <Area yAxisId="l" type="monotone" dataKey="value" name="Lån" stroke={COLORS.primarySoft} strokeWidth={2} fill="url(#gr-loans)"/>
            <Line yAxisId="r" type="monotone" dataKey="interest" name="Ränta %" stroke={COLORS.accent} strokeWidth={1.75} strokeDasharray="3 3" dot={{ r: 2.5, fill: COLORS.accent, strokeWidth: 0 }}/>
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WOccupancy({ onRemove }) {
  const totalOcc = D.occupancy.reduce((s, o) => s + o.occupied, 0);
  const totalAll = D.occupancy.reduce((s, o) => s + o.total, 0);
  const overall = (totalOcc / totalAll) * 100;
  return (
    <Card className="group lg:col-span-2">
      <WidgetHeader
        title="Uthyrningsgrad"
        badge="Aktuell"
        value={fmtPct(overall)}
        delta={`${totalOcc}/${totalAll} enheter`}
        deltaTone="default"
        sub="Per fastighetstyp"
        onRemove={onRemove}
      />
      <div className="px-5 pb-5">
        <div className="space-y-3">
          {D.occupancy.map(o => {
            const isLow = o.rate < 90;
            return (
              <div key={o.type}>
                <div className="flex items-center justify-between text-[12.5px] mb-1.5">
                  <div className="flex items-center gap-2 min-w-0">
                    <span className="font-medium text-zinc-800">{o.type}</span>
                    {isLow && <Badge variant="warning">Låg</Badge>}
                  </div>
                  <div className="font-mono text-zinc-600">
                    <span className="text-zinc-900 font-semibold">{o.occupied}</span>
                    <span className="text-zinc-400 mx-1">/</span>
                    <span>{o.total}</span>
                    <span className="ml-2 text-zinc-500">{fmtPct(o.rate)}</span>
                  </div>
                </div>
                <div className="h-2 bg-zinc-100 rounded-full overflow-hidden relative">
                  <div
                    className={`h-full rounded-full transition-all ${isLow ? "bg-slate-400" : "bg-slate-700"}`}
                    style={{ width: `${o.rate}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Card>
  );
}

function WContractLength({ onRemove }) {
  const latest = D.avgContractLength[D.avgContractLength.length - 1];
  const d = deltaPct(D.avgContractLength);
  return (
    <Card className="group">
      <WidgetHeader
        title="Medellängd kontrakt"
        badge="Lägenheter"
        value={`${latest.value.toFixed(1)} år`}
        delta={d.str}
        deltaTone="positive"
        sub="Genomsnitt vid uppsägning"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={D.avgContractLength} margin={{ top: 6, right: 12, left: 4, bottom: 0 }}>
            <defs>
              <linearGradient id="gr-contractLen" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={COLORS.accent} stopOpacity={0.18}/>
                <stop offset="100%" stopColor={COLORS.accent} stopOpacity={0.02}/>
              </linearGradient>
            </defs>
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} domain={[2.5, 4.5]} tickFormatter={v => `${v.toFixed(1)}`} width={28}/>
            <Tooltip content={<ChartTooltip formatter={v => `${v.toFixed(1)} år`}/>}/>
            <Area type="monotone" dataKey="value" name="Medellängd" stroke={COLORS.accent} strokeWidth={2} fill="url(#gr-contractLen)" dot={{ r: 3, fill: COLORS.accent, strokeWidth: 0 }}/>
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WTerminations({ onRemove }) {
  const latest = D.terminations[D.terminations.length - 1];
  const d = deltaAbs(D.terminations);
  return (
    <Card className="group">
      <WidgetHeader
        title="Uppsägningar"
        badge="Lägenheter"
        value={`${latest.value} st`}
        delta={d.str}
        deltaTone={d.tone}
        sub="Antal lägenhetsuppsägningar/år"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={D.terminations} margin={{ top: 6, right: 12, left: 4, bottom: 0 }} barCategoryGap="40%">
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} width={28}/>
            <Tooltip content={<ChartTooltip formatter={v => `${v} st`}/>}/>
            <Bar dataKey="value" name="Uppsägningar" radius={[3,3,0,0]}>
              {D.terminations.map((entry, idx) => (
                <Cell key={idx} fill={idx === D.terminations.length - 1 ? COLORS.primary : COLORS.primaryLight}/>
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WNewContracts({ onRemove }) {
  const latest = D.newContracts[D.newContracts.length - 1];
  const d = deltaAbs(D.newContracts);
  return (
    <Card className="group">
      <WidgetHeader
        title="Nya kontrakt"
        badge="Lägenheter"
        value={`${latest.value} st`}
        delta={d.str}
        deltaTone="default"
        sub="Antal nya lägenhetskontrakt/år"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={D.newContracts} margin={{ top: 6, right: 12, left: 4, bottom: 0 }} barCategoryGap="40%">
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="year" {...axisProps}/>
            <YAxis {...axisProps} width={28}/>
            <Tooltip content={<ChartTooltip formatter={v => `${v} st`}/>}/>
            <Bar dataKey="value" name="Nya kontrakt" radius={[3,3,0,0]}>
              {D.newContracts.map((entry, idx) => (
                <Cell key={idx} fill={idx === D.newContracts.length - 1 ? COLORS.accent : COLORS.accentLight}/>
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WMonthlyRent({ onRemove }) {
  const total = D.monthlyRent2025.reduce((s, x) => s + x.v, 0);
  return (
    <Card className="group">
      <WidgetHeader
        title="Månadsintäkter 2025"
        badge="YTD"
        value={fmtEURshort(total)}
        delta="+4,9 % jmf 2024"
        deltaTone="positive"
        sub="Bruttohyra per månad"
        onRemove={onRemove}
      />
      <div className="px-2 h-[180px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={D.monthlyRent2025} margin={{ top: 6, right: 12, left: 4, bottom: 0 }} barCategoryGap="25%">
            <CartesianGrid {...gridProps}/>
            <XAxis dataKey="m" {...axisProps} interval={0} fontSize={10}/>
            <YAxis {...axisProps} tickFormatter={v => `${(v/1000).toFixed(0)}k`} width={36}/>
            <Tooltip content={<ChartTooltip/>}/>
            <Bar dataKey="v" name="Intäkt" fill={COLORS.primary} radius={[2,2,0,0]}/>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}

function WActivity({ onRemove }) {
  const tagColors = {
    "Kontrakt": "positive",
    "Betalning": "info",
    "Service": "warning",
    "Uppsägning": "danger",
    "Besiktning": "default",
  };
  return (
    <Card className="group">
      <WidgetHeader
        title="Senaste aktivitet"
        badge="Live"
        value=""
        sub="Händelseström från portföljen"
        onRemove={onRemove}
      />
      <div className="px-5 pb-5">
        <ul className="space-y-3">
          {D.activity.map((a, i) => (
            <li key={i} className="flex items-start gap-3 text-[12.5px]">
              <div className="w-1.5 h-1.5 rounded-full bg-zinc-300 mt-2 flex-shrink-0"/>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 flex-wrap">
                  <Badge variant={tagColors[a.tag] || "default"}>{a.tag}</Badge>
                  <span className="text-[11px] text-zinc-400 font-mono">{a.ts}</span>
                </div>
                <p className="text-zinc-700 mt-1 leading-snug">{a.text}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </Card>
  );
}

// ============ KPI ============
function KPI({ label, value, delta, deltaTone = "default", spark, icon, accent = "#0f172a" }) {
  return (
    <Card className="group relative overflow-hidden">
      <div className="absolute top-0 left-0 right-0 h-px" style={{ background: accent }}/>
      <div className="px-5 py-4">
        <div className="flex items-center gap-2 mb-2">
          <div className="w-7 h-7 rounded-md flex items-center justify-center" style={{ background: `${accent}10`, color: accent }}>
            <Icon name={icon} className="w-3.5 h-3.5" strokeWidth={2}/>
          </div>
          <span className="text-[11.5px] font-semibold text-zinc-500 uppercase tracking-wide">{label}</span>
        </div>
        <div className="flex items-end justify-between">
          <div>
            <div className="text-[24px] font-semibold text-zinc-900 tracking-tight tabular-nums leading-none">{value}</div>
            {delta && (
              <div className={`text-[12px] font-medium mt-1.5 tabular-nums ${
                deltaTone === "positive" ? "text-emerald-600"
                : deltaTone === "warning" ? "text-amber-700"
                : deltaTone === "danger" ? "text-rose-600"
                : "text-zinc-500"
              }`}>{delta}</div>
            )}
          </div>
          {spark && <Sparkline data={spark} color={accent} width={72} height={32}/>}
        </div>
      </div>
    </Card>
  );
}

// ============ Widget registry ============
const WIDGET_REGISTRY = {
  grossRent: WGrossRent,
  renovations: WRenovations,
  yield: WYield,
  loans: WLoans,
  occupancy: WOccupancy,
  contractLength: WContractLength,
  terminations: WTerminations,
  newContracts: WNewContracts,
  monthlyRent: WMonthlyRent,
  activity: WActivity,
};

Object.assign(window, { WIDGET_REGISTRY, KPI, COLORS });