"use client";

import { useEffect, useState, useCallback } from "react";
import { toast } from "sonner";
import { fetchCapacitySummary, type CapacitySummary, type RoomCapacity, type RackCapacity } from "@/lib/api";
import { PageShell } from "@/components/layout/page-shell";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, ResponsiveContainer, Cell } from "recharts";
import { Zap, Wind, Server, RefreshCw, AlertTriangle, TrendingDown, TrendingUp, Clock } from "lucide-react";
import { cn } from "@/lib/utils";

const SITE_ID = "sg-01";
const ROOM_LABELS: Record<string, string> = { "hall-a": "Hall A", "hall-b": "Hall B" };

// ── Radial gauge ──────────────────────────────────────────────────────────────

function RadialGauge({ pct, warn, crit, headroom, unit }: { pct: number; warn: number; crit: number; headroom?: number; unit?: string }) {
  const r = 36;
  const circumference = 2 * Math.PI * r;
  const arc = circumference * 0.75; // 270° sweep
  const filled = Math.min(pct / 100, 1) * arc;

  const color =
    pct >= crit ? "#ef4444" :
    pct >= warn ? "#f59e0b" :
    "#22c55e";
  const textColor =
    pct >= crit ? "text-destructive" :
    pct >= warn ? "text-amber-400"   :
    "text-green-400";

  return (
    <div className="relative flex items-center justify-center py-1">
      <svg viewBox="0 0 100 100" className="w-28 h-28 -rotate-[135deg]" style={{ overflow: "visible" }}>
        {/* Track */}
        <circle
          cx="50" cy="50" r={r}
          fill="none"
          strokeWidth="9"
          className="stroke-muted"
          strokeDasharray={`${arc} ${circumference}`}
          strokeLinecap="round"
        />
        {/* Fill */}
        <circle
          cx="50" cy="50" r={r}
          fill="none"
          strokeWidth="9"
          stroke={color}
          strokeDasharray={`${filled} ${circumference}`}
          strokeLinecap="round"
          style={{ transition: "stroke-dasharray 0.7s ease" }}
        />
      </svg>
      <div className="absolute text-center pointer-events-none">
        <span className={cn("text-3xl font-bold tabular-nums leading-none", textColor)}>
          {pct.toFixed(1)}
        </span>
        <span className="text-xs text-muted-foreground">%</span>
        {headroom !== undefined && unit !== undefined && (
          <p className="text-[9px] text-muted-foreground leading-tight mt-0.5">
            {headroom.toFixed(1)} {unit}
          </p>
        )}
      </div>
    </div>
  );
}

// ── Capacity gauge card ────────────────────────────────────────────────────────

function CapacityGauge({
  label, used, capacity, unit, pct, headroom, icon: Icon, warn = 70, crit = 85,
}: {
  label: string; used: number; capacity: number; unit: string; pct: number;
  headroom: number; icon: React.ElementType; warn?: number; crit?: number;
}) {
  const textColor = pct >= crit ? "text-destructive" : pct >= warn ? "text-amber-400" : "text-green-400";
  const status = pct >= crit ? "Critical" : pct >= warn ? "Warning" : "OK";

  return (
    <div className="space-y-2 rounded-xl border border-border bg-muted/10 p-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2 text-sm font-medium">
          <Icon className="w-4 h-4 text-primary" />
          {label}
        </div>
        <span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase", textColor,
          pct >= crit ? "bg-destructive/10" : pct >= warn ? "bg-amber-500/10" : "bg-green-500/10"
        )}>
          {status}
        </span>
      </div>

      <RadialGauge pct={pct} warn={warn} crit={crit} headroom={headroom} unit={unit} />

      <div className="flex justify-between text-xs text-muted-foreground">
        <span><strong className="text-foreground">{used.toFixed(1)}</strong> {unit} used</span>
        <span><strong className="text-foreground">{capacity.toFixed(0)}</strong> {unit} rated</span>
      </div>

      <div className={cn(
        "rounded-lg px-3 py-2 text-xs",
        pct >= crit ? "bg-destructive/10 text-destructive" :
        pct >= warn ? "bg-amber-500/10 text-amber-400" :
        "bg-green-500/10 text-green-400"
      )}>
        {headroom.toFixed(1)} {unit} headroom remaining
      </div>
    </div>
  );
}

// ── Capacity runway component ──────────────────────────────────────
// Assumes ~0.5 kW/week average growth rate to forecast when limits are hit

const GROWTH_KW_WEEK = 0.5;
const WARN_PCT = 85;

function RunwayCard({ rooms }: { rooms: RoomCapacity[] }) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold flex items-center gap-2">
          <Clock className="w-4 h-4 text-muted-foreground" />
          Capacity Runway
          <span className="text-[10px] text-muted-foreground font-normal ml-1">
            (assuming {GROWTH_KW_WEEK} kW/week growth)
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {rooms.map((room) => {
            const powerHeadroomToWarn  = Math.max(0, room.power.capacity_kw  * (WARN_PCT / 100) - room.power.used_kw);
            const coolHeadroomToWarn   = Math.max(0, room.cooling.capacity_kw * (WARN_PCT / 100) - room.cooling.load_kw);
            const powerRunwayWeeks     = Math.round(powerHeadroomToWarn / GROWTH_KW_WEEK);
            const coolRunwayWeeks      = Math.round(coolHeadroomToWarn  / GROWTH_KW_WEEK);
            const constrainedBy        = powerRunwayWeeks <= coolRunwayWeeks ? "power" : "cooling";
            const minRunway            = Math.min(powerRunwayWeeks, coolRunwayWeeks);

            const runwayColor =
              minRunway < 4  ? "text-destructive" :
              minRunway < 12 ? "text-amber-400" :
              "text-green-400";

            // N+1 cooling: at 1 CRAC per room, losing it means all load hits chillers/other rooms
            const n1Margin = room.cooling.capacity_kw - room.cooling.load_kw;
            const n1Ok     = n1Margin > room.cooling.capacity_kw * 0.2; // 20% spare = N+1 safe

            return (
              <div key={room.room_id} className="rounded-xl border border-border bg-muted/10 p-4 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-semibold">{ROOM_LABELS[room.room_id] ?? room.room_id}</span>
                  <div className="flex items-center gap-2">
                    <span className={cn(
                      "text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase",
                      n1Ok ? "bg-green-500/10 text-green-400" : "bg-amber-500/10 text-amber-400",
                    )}>
                      {n1Ok ? "N+1 OK" : "N+1 marginal"}
                    </span>
                  </div>
                </div>

                <div className="flex items-center gap-3">
                  <TrendingUp className={cn("w-8 h-8 shrink-0", runwayColor)} />
                  <div>
                    <p className={cn("text-2xl font-bold tabular-nums leading-none", runwayColor)}>
                      {minRunway}w
                    </p>
                    <p className={cn("text-xs tabular-nums text-muted-foreground leading-none mt-0.5")}>
                      ≈{(minRunway / 4.33).toFixed(1)}mo
                    </p>
                    <p className="text-[10px] text-muted-foreground mt-0.5">
                      until {WARN_PCT}% {constrainedBy} limit
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-2 text-[11px]">
                  <div className={cn(
                    "rounded-lg px-2.5 py-2",
                    powerRunwayWeeks < 4  ? "bg-destructive/10" :
                    powerRunwayWeeks < 12 ? "bg-amber-500/10" : "bg-muted/30",
                  )}>
                    <p className="text-muted-foreground mb-0.5">Power runway</p>
                    <p className={cn(
                      "font-bold",
                      powerRunwayWeeks < 4  ? "text-destructive" :
                      powerRunwayWeeks < 12 ? "text-amber-400" : "text-green-400",
                    )}>
                      {powerRunwayWeeks}w / ≈{(powerRunwayWeeks / 4.33).toFixed(1)}mo
                    </p>
                    <p className="text-muted-foreground">{powerHeadroomToWarn.toFixed(1)} kW free</p>
                  </div>
                  <div className={cn(
                    "rounded-lg px-2.5 py-2",
                    coolRunwayWeeks < 4  ? "bg-destructive/10" :
                    coolRunwayWeeks < 12 ? "bg-amber-500/10" : "bg-muted/30",
                  )}>
                    <p className="text-muted-foreground mb-0.5">Cooling runway</p>
                    <p className={cn(
                      "font-bold",
                      coolRunwayWeeks < 4  ? "text-destructive" :
                      coolRunwayWeeks < 12 ? "text-amber-400" : "text-green-400",
                    )}>
                      {coolRunwayWeeks}w / ≈{(coolRunwayWeeks / 4.33).toFixed(1)}mo
                    </p>
                    <p className="text-muted-foreground">{coolHeadroomToWarn.toFixed(1)} kW free</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}

// ── Room summary strip ────────────────────────────────────────────────────────

function RoomSummaryStrip({ rooms }: { rooms: RoomCapacity[] }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
      {rooms.map((room) => {
        const powerPct  = room.power.pct;
        const coolPct   = room.cooling.pct;
        const worstPct  = Math.max(powerPct, coolPct);
        const worstColor =
          worstPct >= 85 ? "border-destructive/40 bg-destructive/5" :
          worstPct >= 70 ? "border-amber-500/40 bg-amber-500/5" :
          "border-border bg-muted/10";

        return (
          <div key={room.room_id} className={cn("rounded-xl border px-4 py-3 space-y-2", worstColor)}>
            <div className="flex items-center justify-between">
              <span className="text-sm font-semibold">{ROOM_LABELS[room.room_id] ?? room.room_id}</span>
              <span className={cn(
                "text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase",
                worstPct >= 85 ? "bg-destructive/10 text-destructive" :
                worstPct >= 70 ? "bg-amber-500/10 text-amber-400" :
                "bg-green-500/10 text-green-400"
              )}>
                {worstPct >= 85 ? "Critical" : worstPct >= 70 ? "Warning" : "OK"}
              </span>
            </div>
            <div className="grid grid-cols-3 gap-3 text-xs">
              <div>
                <p className="text-muted-foreground mb-1">Power</p>
                <p className={cn("font-bold text-sm", powerPct >= 85 ? "text-destructive" : powerPct >= 70 ? "text-amber-400" : "text-green-400")}>
                  {powerPct.toFixed(1)}%
                </p>
                <p className="text-[10px] text-muted-foreground">{room.power.used_kw.toFixed(1)} / {room.power.capacity_kw} kW</p>
              </div>
              <div>
                <p className="text-muted-foreground mb-1">Cooling</p>
                <p className={cn("font-bold text-sm", coolPct >= 80 ? "text-destructive" : coolPct >= 65 ? "text-amber-400" : "text-green-400")}>
                  {coolPct.toFixed(1)}%
                </p>
                <p className="text-[10px] text-muted-foreground">{room.cooling.load_kw.toFixed(1)} / {room.cooling.capacity_kw} kW</p>
              </div>
              <div>
                <p className="text-muted-foreground mb-1">Space</p>
                <p className="font-bold text-sm text-foreground">{room.space.racks_populated} / {room.space.racks_total}</p>
                <p className="text-[10px] text-muted-foreground">{room.space.racks_total - room.space.racks_populated} slots free</p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── Room capacity section ─────────────────────────────────────────────────────

function RoomCapacityPanel({ room, racks, config }: {
  room: RoomCapacity;
  racks: RackCapacity[];
  config: CapacitySummary["config"];
}) {
  const roomRacks = racks.filter((r) => r.room_id === room.room_id);

  const chartData = roomRacks
    .map((r) => ({
      rack: r.rack_id.replace("rack-", "").toUpperCase(),
      rack_id: r.rack_id,
      pct: r.power_pct ?? 0,
      kw: r.power_kw ?? 0,
      temp: r.temp,
    }))
    .sort((a, b) => b.pct - a.pct);

  const forecastPct = Math.min(100, (chartData.reduce((s, d) => s + d.pct, 0) / Math.max(1, chartData.length)) + (GROWTH_KW_WEEK * 13 / config.rack_power_kw * 100));

  const highLoad = roomRacks.filter((r) => (r.power_pct ?? 0) >= 75);
  const stranded = roomRacks.filter((r) => r.power_kw !== null && (r.power_pct ?? 0) < 20);
  const strandedKw = stranded.reduce((s, r) => s + ((config.rack_power_kw - (r.power_kw ?? 0))), 0);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <CapacityGauge
          label="Power"
          used={room.power.used_kw}
          capacity={room.power.capacity_kw}
          unit="kW"
          pct={room.power.pct}
          headroom={room.power.headroom_kw}
          icon={Zap}
        />
        <CapacityGauge
          label="Cooling"
          used={room.cooling.load_kw}
          capacity={room.cooling.capacity_kw}
          unit="kW"
          pct={room.cooling.pct}
          headroom={room.cooling.headroom_kw}
          icon={Wind}
          warn={65}
          crit={80}
        />
        <div className="space-y-2 rounded-xl border border-border bg-muted/10 p-4">
          <div className="flex items-center gap-2 text-sm font-medium">
            <Server className="w-4 h-4 text-primary" /> Space
          </div>
          <div className="flex items-center justify-center py-1">
            <div className="relative w-28 h-28 flex items-center justify-center">
              <svg viewBox="0 0 100 100" className="w-28 h-28 -rotate-[135deg]" style={{ overflow: "visible" }}>
                <circle cx="50" cy="50" r="36" fill="none" strokeWidth="9" className="stroke-muted"
                  strokeDasharray={`${2 * Math.PI * 36 * 0.75} ${2 * Math.PI * 36}`} strokeLinecap="round" />
                <circle cx="50" cy="50" r="36" fill="none" strokeWidth="9" stroke="oklch(0.62 0.17 212)"
                  strokeDasharray={`${(room.space.pct / 100) * 2 * Math.PI * 36 * 0.75} ${2 * Math.PI * 36}`}
                  strokeLinecap="round" style={{ transition: "stroke-dasharray 0.7s ease" }} />
              </svg>
              <div className="absolute text-center">
                <span className="text-2xl font-bold tabular-nums leading-none text-foreground">
                  {room.space.racks_populated}
                </span>
                <span className="text-xs text-muted-foreground">/{room.space.racks_total}</span>
              </div>
            </div>
          </div>
          <div className="flex justify-between text-xs text-muted-foreground">
            <span><strong className="text-foreground">{room.space.racks_populated}</strong> active</span>
            <span><strong className="text-foreground">{room.space.racks_total - room.space.racks_populated}</strong> free</span>
          </div>
          <div className="rounded-lg px-3 py-2 text-xs bg-muted/40 text-muted-foreground">
            Each rack rated {config.rack_u_total}U / {config.rack_power_kw} kW max
          </div>
        </div>
      </div>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <Zap className="w-4 h-4 text-primary" /> Per-rack Power Utilisation
          </CardTitle>
        </CardHeader>
        <CardContent>
          {chartData.length === 0 ? (
            <div className="h-48 flex items-center justify-center text-sm text-muted-foreground">
              No rack data available
            </div>
          ) : (
            <ResponsiveContainer width="100%" height={220}>
              <BarChart data={chartData} margin={{ top: 4, right: 16, left: -10, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="oklch(1 0 0 / 8%)" vertical={false} />
                <XAxis
                  dataKey="rack"
                  tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
                  tickLine={false} axisLine={false}
                />
                <YAxis
                  tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
                  tickLine={false} axisLine={false}
                  domain={[0, 100]} tickFormatter={(v) => `${v}%`}
                />
                <Tooltip
                  contentStyle={{ backgroundColor: "oklch(0.16 0.04 265)", border: "1px solid oklch(1 0 0/9%)", borderRadius: "6px", fontSize: "12px" }}
                  formatter={(v, _name, props) => [
                    `${Number(v).toFixed(1)}% (${props.payload.kw.toFixed(2)} kW)`, "Power load"
                  ]}
                />
                <ReferenceLine y={75} stroke="oklch(0.72 0.18 84)" strokeDasharray="4 4" strokeWidth={1}
                  label={{ value: "Warn 75%", fontSize: 9, fill: "oklch(0.72 0.18 84)", position: "insideTopRight" }} />
                <ReferenceLine y={90} stroke="oklch(0.55 0.22 25)" strokeDasharray="4 4" strokeWidth={1}
                  label={{ value: "Crit 90%", fontSize: 9, fill: "oklch(0.55 0.22 25)", position: "insideTopRight" }} />
                <ReferenceLine y={forecastPct} stroke="oklch(0.62 0.17 212)" strokeDasharray="6 3" strokeWidth={1.5}
                  label={{ value: "90d forecast", fontSize: 9, fill: "oklch(0.62 0.17 212)", position: "insideTopLeft" }} />
                <Bar dataKey="pct" radius={[3, 3, 0, 0]}>
                  {chartData.map((d) => (
                    <Cell
                      key={d.rack_id}
                      fill={
                        d.pct >= 90 ? "oklch(0.55 0.22 25)" :
                        d.pct >= 75 ? "oklch(0.65 0.20 45)" :
                        d.pct >= 50 ? "oklch(0.68 0.14 162)" :
                        "oklch(0.62 0.17 212)"
                      }
                    />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          )}
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-semibold flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 text-amber-400" /> High Load Racks
            </CardTitle>
          </CardHeader>
          <CardContent>
            {highLoad.length === 0 ? (
              <p className="text-sm text-green-400">All racks within normal limits</p>
            ) : (
              <div className="space-y-2">
                {highLoad.sort((a, b) => (b.power_pct ?? 0) - (a.power_pct ?? 0)).map((r) => (
                  <div key={r.rack_id} className="flex items-center justify-between text-xs">
                    <span className="font-medium">{r.rack_id.toUpperCase()}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-muted-foreground">{r.power_kw?.toFixed(1)} kW</span>
                      <span className={cn(
                        "font-bold",
                        (r.power_pct ?? 0) >= 90 ? "text-destructive" : "text-amber-400"
                      )}>{r.power_pct?.toFixed(1)}%</span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-semibold flex items-center gap-2">
                <TrendingDown className="w-4 h-4 text-muted-foreground" /> Stranded Capacity
              </CardTitle>
              {stranded.length > 0 && (
                <span className="text-xs font-semibold text-amber-400">
                  {strandedKw.toFixed(1)} kW recoverable
                </span>
              )}
            </div>
          </CardHeader>
          <CardContent>
            {stranded.length === 0 ? (
              <p className="text-sm text-muted-foreground">No underutilised racks detected</p>
            ) : (
              <div className="space-y-2">
                {stranded.sort((a, b) => (a.power_pct ?? 0) - (b.power_pct ?? 0)).map((r) => (
                  <div key={r.rack_id} className="flex items-center justify-between text-xs">
                    <span className="font-medium">{r.rack_id.toUpperCase()}</span>
                    <div className="flex items-center gap-2">
                      <span className="text-muted-foreground">{r.power_kw?.toFixed(1)} kW</span>
                      <span className="text-muted-foreground">{r.power_pct?.toFixed(1)}% utilised</span>
                    </div>
                  </div>
                ))}
                <p className="text-[10px] text-muted-foreground pt-1">
                  {stranded.length} rack{stranded.length > 1 ? "s" : ""} below 20% — consider consolidation
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function CapacityPage() {
  const [data, setData]           = useState<CapacitySummary | null>(null);
  const [loading, setLoading]     = useState(true);
  const [activeRoom, setActiveRoom] = useState("hall-a");

  const load = useCallback(async () => {
    try { setData(await fetchCapacitySummary(SITE_ID)); }
    catch { toast.error("Failed to load capacity data"); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => {
    load();
    const id = setInterval(load, 30_000);
    return () => clearInterval(id);
  }, [load]);

  const sitePower    = data?.rooms.reduce((s, r) => s + r.power.used_kw, 0) ?? 0;
  const siteCapacity = data?.rooms.reduce((s, r) => s + r.power.capacity_kw, 0) ?? 0;

  return (
    <PageShell className="p-6">
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-semibold">Capacity Planning</h1>
          <p className="text-sm text-muted-foreground">Singapore DC01 — power, cooling &amp; space headroom</p>
        </div>
        <button
          onClick={load}
          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          <RefreshCw className="w-3.5 h-3.5" /> Refresh
        </button>
      </div>

      {loading ? (
        <div className="space-y-4">
          <Skeleton className="h-32 w-full" />
          <div className="grid grid-cols-3 gap-4">
            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-56" />)}
          </div>
          <Skeleton className="h-64 w-full" />
        </div>
      ) : !data ? (
        <div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
          Unable to load capacity data.
        </div>
      ) : (
        <>
          {/* Site summary banner */}
          <div className="rounded-xl border border-border bg-muted/10 px-5 py-3 flex items-center gap-8 text-sm flex-wrap">
            <div>
              <span className="text-muted-foreground">Site IT load</span>
              {" "}
              <strong className="text-foreground text-base">{sitePower.toFixed(1)} kW</strong>
              <span className="text-muted-foreground"> / {siteCapacity.toFixed(0)} kW rated</span>
            </div>
            <div>
              <span className="text-muted-foreground">Site load</span>
              {" "}
              <strong className={cn(
                "text-base",
                (sitePower / siteCapacity * 100) >= 85 ? "text-destructive" :
                (sitePower / siteCapacity * 100) >= 70 ? "text-amber-400" : "text-green-400"
              )}>
                {(sitePower / siteCapacity * 100).toFixed(1)}%
              </strong>
            </div>
            <div className="ml-auto text-xs text-muted-foreground">
              Capacity config: {data.config.rack_power_kw} kW/rack ·{" "}
              {data.config.crac_cooling_kw} kW CRAC ·{" "}
              {data.config.rack_u_total}U/rack
            </div>
          </div>

          {/* Room comparison strip */}
          <RoomSummaryStrip rooms={data.rooms} />

          {/* Capacity runway + N+1 */}
          <RunwayCard rooms={data.rooms} />

          {/* Per-room detail tabs */}
          <div>
            <Tabs value={activeRoom} onValueChange={setActiveRoom}>
              <TabsList>
                {data.rooms.map((r) => (
                  <TabsTrigger key={r.room_id} value={r.room_id}>
                    {ROOM_LABELS[r.room_id] ?? r.room_id}
                    {r.power.pct >= 85 && (
                      <AlertTriangle className="w-3 h-3 ml-1.5 text-destructive" />
                    )}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>

            <div className="mt-6">
              {data.rooms
                .filter((r) => r.room_id === activeRoom)
                .map((room) => (
                  <RoomCapacityPanel
                    key={room.room_id}
                    room={room}
                    racks={data.racks}
                    config={data.config}
                  />
                ))}
            </div>
          </div>
        </>
      )}
    </PageShell>
  );
}