"use client";

import { useEffect, useState, useCallback } from "react";
import { toast } from "sonner";
import {
  fetchRackEnvReadings, fetchHumidityHistory, fetchTempHistory as fetchRoomTempHistory,
  fetchCracStatus, fetchLeakStatus, fetchFireStatus, fetchParticleStatus,
  type RoomEnvReadings, type HumidityBucket, type TempBucket, type CracStatus,
  type LeakSensorStatus, type FireZoneStatus, type ParticleStatus,
} from "@/lib/api";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useThresholds } from "@/lib/threshold-context";
import { TimeRangePicker } from "@/components/ui/time-range-picker";
import {
  ComposedChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  ResponsiveContainer, ReferenceLine, ReferenceArea,
} from "recharts";
import { Thermometer, Droplets, WifiOff, CheckCircle2, AlertTriangle, Flame, Wind } from "lucide-react";
import { RackDetailSheet } from "@/components/dashboard/rack-detail-sheet";
import { cn } from "@/lib/utils";
import Link from "next/link";

const SITE_ID = "sg-01";
const ROOM_COLORS: Record<string, { temp: string; hum: string }> = {
  "hall-a": { temp: "oklch(0.62 0.17 212)", hum: "oklch(0.55 0.18 270)" },
  "hall-b": { temp: "oklch(0.7 0.15 162)",  hum: "oklch(0.60 0.15 145)" },
};
const roomLabels: Record<string, string> = { "hall-a": "Hall A", "hall-b": "Hall B" };

function formatTime(iso: string) {
  return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

// ── Utility functions ─────────────────────────────────────────────────────────

/** Magnus formula dew point (°C) from temperature (°C) and relative humidity (%) */
function dewPoint(temp: number, rh: number): number {
  const gamma = Math.log(rh / 100) + (17.625 * temp) / (243.04 + temp);
  return Math.round((243.04 * gamma / (17.625 - gamma)) * 10) / 10;
}

function humidityColor(hum: number | null): string {
  if (hum === null) return "oklch(0.25 0.02 265)";
  if (hum > 80)  return "oklch(0.55 0.22 25)";   // critical high
  if (hum > 65)  return "oklch(0.65 0.20 45)";   // warning high
  if (hum > 50)  return "oklch(0.72 0.18 84)";   // elevated
  if (hum >= 30) return "oklch(0.68 0.14 162)";  // optimal
  return "oklch(0.62 0.17 212)";                  // low (static risk)
}

// ── Temperature heatmap ───────────────────────────────────────────────────────

function tempColor(temp: number | null, warn = 26, crit = 28): string {
  if (temp === null) return "oklch(0.25 0.02 265)";
  if (temp >= crit + 4) return "oklch(0.55 0.22 25)";
  if (temp >= crit)     return "oklch(0.65 0.20 45)";
  if (temp >= warn)     return "oklch(0.72 0.18 84)";
  if (temp >= warn - 2) return "oklch(0.78 0.14 140)";
  if (temp >= warn - 4) return "oklch(0.68 0.14 162)";
  return "oklch(0.60 0.15 212)";
}

type HeatmapOverlay = "temp" | "humidity";

function TempHeatmap({
  rooms, onRackClick, activeRoom, tempWarn = 26, tempCrit = 28, humWarn = 65, humCrit = 80,
}: {
  rooms: RoomEnvReadings[];
  onRackClick: (rackId: string) => void;
  activeRoom: string;
  tempWarn?: number;
  tempCrit?: number;
  humWarn?: number;
  humCrit?: number;
}) {
  const [overlay, setOverlay] = useState<HeatmapOverlay>("temp");
  const room = rooms.find((r) => r.room_id === activeRoom);

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            {overlay === "temp"
              ? <Thermometer className="w-4 h-4 text-primary" />
              : <Droplets className="w-4 h-4 text-blue-400" />}
            {overlay === "temp" ? "Temperature" : "Humidity"} Heatmap
          </CardTitle>
          <div className="flex items-center gap-2">
            {/* Overlay toggle */}
            <div className="flex items-center gap-0.5 rounded-md border border-border p-0.5">
              <button
                onClick={() => setOverlay("temp")}
                aria-label="Temperature overlay"
                aria-pressed={overlay === "temp"}
                className={cn(
                  "flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium transition-colors",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
                  overlay === "temp" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
                )}
              >
                <Thermometer className="w-3 h-3" /> Temp
              </button>
              <button
                onClick={() => setOverlay("humidity")}
                aria-label="Humidity overlay"
                aria-pressed={overlay === "humidity"}
                className={cn(
                  "flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium transition-colors",
                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
                  overlay === "humidity" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
                )}
              >
                <Droplets className="w-3 h-3" /> Humidity
              </button>
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Callout — hottest or most humid */}
        {(() => {
          if (overlay === "temp") {
            const hottest = room?.racks.reduce((a, b) =>
              (a.temperature ?? 0) > (b.temperature ?? 0) ? a : b
            );
            if (!hottest || hottest.temperature === null) return null;
            const isHot = hottest.temperature >= tempWarn;
            return (
              <div className={cn(
                "flex items-center gap-2 rounded-lg px-3 py-2 text-xs",
                hottest.temperature >= tempCrit ? "bg-destructive/10 text-destructive" :
                isHot ? "bg-amber-500/10 text-amber-400" : "bg-muted/40 text-muted-foreground"
              )}>
                <Thermometer className="w-3.5 h-3.5 shrink-0" />
                <span>
                  Hottest: <strong>{hottest.rack_id.toUpperCase()}</strong> at <strong>{hottest.temperature}°C</strong>
                  {hottest.temperature >= tempCrit ? " — above critical threshold" : isHot ? " — above warning threshold" : " — within normal range"}
                </span>
              </div>
            );
          } else {
            const humid = room?.racks.reduce((a, b) =>
              (a.humidity ?? 0) > (b.humidity ?? 0) ? a : b
            );
            if (!humid || humid.humidity === null) return null;
            const isHigh = humid.humidity > humWarn;
            return (
              <div className={cn(
                "flex items-center gap-2 rounded-lg px-3 py-2 text-xs",
                humid.humidity > humCrit ? "bg-destructive/10 text-destructive" :
                isHigh ? "bg-amber-500/10 text-amber-400" : "bg-muted/40 text-muted-foreground"
              )}>
                <Droplets className="w-3.5 h-3.5 shrink-0" />
                <span>
                  Highest humidity: <strong>{humid.rack_id.toUpperCase()}</strong> at <strong>{humid.humidity}%</strong>
                  {humid.humidity > humCrit ? " — above critical threshold" : isHigh ? " — above warning threshold" : " — within normal range"}
                </span>
              </div>
            );
          }
        })()}

        {/* Rack grid */}
        <div className="grid grid-cols-5 gap-2">
          {room?.racks.map((rack) => {
            const offline = rack.temperature === null && rack.humidity === null;
            const bg = overlay === "temp" ? tempColor(rack.temperature, tempWarn, tempCrit) : humidityColor(rack.humidity);
            const mainVal = overlay === "temp"
              ? (rack.temperature !== null ? `${rack.temperature}°` : null)
              : (rack.humidity !== null ? `${rack.humidity}%` : null);
            const subVal = overlay === "temp"
              ? (rack.humidity !== null && rack.temperature !== null
                  ? `DP ${dewPoint(rack.temperature, rack.humidity)}°` : null)
              : (rack.temperature !== null ? `${rack.temperature}°C` : null);

            return (
              <div
                key={rack.rack_id}
                onClick={() => onRackClick(rack.rack_id)}
                className={cn(
                  "relative rounded-lg p-3 flex flex-col items-center justify-center gap-0.5 min-h-[72px] transition-all cursor-pointer hover:ring-2 hover:ring-white/20",
                  offline ? "hover:opacity-70" : "hover:opacity-80"
                )}
                style={{
                  backgroundColor: offline ? "oklch(0.22 0.02 265)" : bg,
                  backgroundImage: offline
                    ? "repeating-linear-gradient(45deg, transparent, transparent 4px, oklch(1 0 0 / 4%) 4px, oklch(1 0 0 / 4%) 8px)"
                    : undefined,
                }}
              >
                <span className="text-[10px] font-semibold text-white/70">
                  {rack.rack_id.replace("rack-", "").toUpperCase()}
                </span>
                {offline ? (
                  <WifiOff className="w-3.5 h-3.5 text-white/40" />
                ) : (
                  <span className="text-base font-bold text-white">{mainVal ?? "—"}</span>
                )}
                {subVal && (
                  <span className="text-[10px] text-white/60">{subVal}</span>
                )}
              </div>
            );
          })}
        </div>

        {/* Legend */}
        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
          {overlay === "temp" ? (
            <>
              <span>Cool</span>
              {(["oklch(0.60 0.15 212)", "oklch(0.68 0.14 162)", "oklch(0.78 0.14 140)", "oklch(0.72 0.18 84)", "oklch(0.65 0.20 45)", "oklch(0.55 0.22 25)"] as string[]).map((c, i) => (
                <span key={i} className="w-6 h-3 rounded-sm inline-block" style={{ backgroundColor: c }} />
              ))}
              <span>Hot</span>
              <span className="ml-auto">Warn: {tempWarn}°C &nbsp;|&nbsp; Crit: {tempCrit}°C · Tiles show dew point (DP)</span>
            </>
          ) : (
            <>
              <span>Dry</span>
              {(["oklch(0.62 0.17 212)", "oklch(0.68 0.14 162)", "oklch(0.72 0.18 84)", "oklch(0.65 0.20 45)", "oklch(0.55 0.22 25)"] as string[]).map((c, i) => (
                <span key={i} className="w-6 h-3 rounded-sm inline-block" style={{ backgroundColor: c }} />
              ))}
              <span>Humid</span>
              <span className="ml-auto">Optimal: 30–65% &nbsp;|&nbsp; ASHRAE A1 max: 80%</span>
            </>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

// ── Dual-axis trend chart ─────────────────────────────────────────────────────

function EnvTrendChart({
  tempData, humData, hours, activeRoom, tempWarn = 26, tempCrit = 28, humWarn = 65,
}: {
  tempData: TempBucket[];
  humData: HumidityBucket[];
  hours: number;
  activeRoom: string;
  tempWarn?: number;
  tempCrit?: number;
  humWarn?: number;
}) {
  const roomIds = [...new Set(tempData.map((d) => d.room_id))].sort();

  // Build combined rows for the active room
  type ComboRow = { time: string; temp: number | null; hum: number | null };
  const buckets = new Map<string, ComboRow>();

  for (const d of tempData.filter((d) => d.room_id === activeRoom)) {
    const time = formatTime(d.bucket);
    if (!buckets.has(time)) buckets.set(time, { time, temp: null, hum: null });
    buckets.get(time)!.temp = d.avg_temp;
  }
  for (const d of humData.filter((d) => d.room_id === activeRoom)) {
    const time = formatTime(d.bucket);
    if (!buckets.has(time)) buckets.set(time, { time, temp: null, hum: null });
    buckets.get(time)!.hum = d.avg_humidity;
  }
  const chartData = Array.from(buckets.values());
  const colors = ROOM_COLORS[activeRoom] ?? ROOM_COLORS["hall-a"];

  const labelSuffix = hours <= 1 ? "1h" : hours <= 6 ? "6h" : hours <= 24 ? "24h" : "7d";

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <Thermometer className="w-4 h-4 text-primary" />
            <Droplets className="w-4 h-4 text-blue-400" />
            Temp &amp; Humidity — last {labelSuffix}
          </CardTitle>
        </div>
        {/* Legend */}
        <div className="flex items-center gap-4 text-[10px] text-muted-foreground mt-1 flex-wrap">
          <span className="flex items-center gap-1.5">
            <span className="w-4 h-0.5 inline-block rounded" style={{ backgroundColor: colors.temp }} />
            Temp (°C, left axis)
          </span>
          <span className="flex items-center gap-1.5">
            <span className="w-4 h-0.5 inline-block rounded border-t-2 border-dashed" style={{ borderColor: colors.hum }} />
            Humidity (%, right axis)
          </span>
          <span className="flex items-center gap-1.5 ml-auto">
            <span className="w-4 h-3 inline-block rounded opacity-40" style={{ backgroundColor: "#22c55e" }} />
            ASHRAE A1 safe zone
          </span>
        </div>
      </CardHeader>
      <CardContent>
        {chartData.length === 0 ? (
          <div className="h-[240px] flex items-center justify-center text-sm text-muted-foreground">
            Waiting for data...
          </div>
        ) : (
          <ResponsiveContainer width="100%" height={240}>
            <ComposedChart data={chartData} margin={{ top: 4, right: 30, left: -16, bottom: 0 }}>
              {/* ASHRAE A1 safe zones */}
              <ReferenceArea yAxisId="temp" y1={18} y2={27} fill="#22c55e" fillOpacity={0.07} />
              <ReferenceArea yAxisId="hum"  y1={20} y2={80} fill="#3b82f6" fillOpacity={0.05} />

              <CartesianGrid strokeDasharray="3 3" stroke="oklch(1 0 0 / 8%)" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
                tickLine={false}
                axisLine={false}
              />
              {/* Left axis — temperature */}
              <YAxis
                yAxisId="temp"
                domain={[16, 36]}
                tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
                tickLine={false}
                axisLine={false}
                tickFormatter={(v) => `${v}°`}
              />
              {/* Right axis — humidity */}
              <YAxis
                yAxisId="hum"
                orientation="right"
                domain={[0, 100]}
                tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
                tickLine={false}
                axisLine={false}
                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) =>
                  name === "temp" ? [`${Number(v).toFixed(1)}°C`, "Temperature"] :
                  [`${Number(v).toFixed(0)}%`, "Humidity"]
                }
              />

              {/* Temp reference lines */}
              <ReferenceLine yAxisId="temp" y={tempWarn} stroke="oklch(0.72 0.18 84)" strokeDasharray="4 4" strokeWidth={1}
                label={{ value: `Warn ${tempWarn}°`, fontSize: 9, fill: "oklch(0.72 0.18 84)", position: "right" }} />
              <ReferenceLine yAxisId="temp" y={tempCrit} stroke="oklch(0.55 0.22 25)" strokeDasharray="4 4" strokeWidth={1}
                label={{ value: `Crit ${tempCrit}°`, fontSize: 9, fill: "oklch(0.55 0.22 25)", position: "right" }} />

              {/* Humidity reference line */}
              <ReferenceLine yAxisId="hum" y={humWarn} stroke="oklch(0.62 0.17 212)" strokeDasharray="4 4" strokeWidth={1} />

              {/* Lines */}
              <Line
                yAxisId="temp"
                type="monotone"
                dataKey="temp"
                stroke={colors.temp}
                strokeWidth={2}
                dot={false}
                activeDot={{ r: 4 }}
                connectNulls
              />
              <Line
                yAxisId="hum"
                type="monotone"
                dataKey="hum"
                stroke={colors.hum}
                strokeWidth={2}
                strokeDasharray="6 3"
                dot={false}
                activeDot={{ r: 4 }}
                connectNulls
              />
            </ComposedChart>
          </ResponsiveContainer>
        )}
        <p className="text-[10px] text-muted-foreground mt-2">
          Green shaded band = ASHRAE A1 thermal envelope (18–27°C / 20–80% RH)
        </p>
      </CardContent>
    </Card>
  );
}

// ── ASHRAE A1 Compliance Table ────────────────────────────────────────────────

// ASHRAE A1: 15–32°C, 20–80% RH
function AshraeTable({ rooms }: { rooms: RoomEnvReadings[] }) {
  const allRacks = rooms.flatMap(r =>
    r.racks.map(rack => ({ ...rack, room_id: r.room_id }))
  ).filter(r => r.temperature !== null || r.humidity !== null);

  type Issue = { type: string; detail: string };
  const rows = allRacks.map(rack => {
    const issues: Issue[] = [];
    if (rack.temperature !== null) {
      if (rack.temperature < 15) issues.push({ type: "Temp", detail: `${rack.temperature}°C — below 15°C min` });
      if (rack.temperature > 32) issues.push({ type: "Temp", detail: `${rack.temperature}°C — above 32°C max` });
    }
    if (rack.humidity !== null) {
      if (rack.humidity < 20) issues.push({ type: "RH", detail: `${rack.humidity}% — below 20% min` });
      if (rack.humidity > 80) issues.push({ type: "RH", detail: `${rack.humidity}% — above 80% max` });
    }
    const dp = rack.temperature !== null && rack.humidity !== null
      ? dewPoint(rack.temperature, rack.humidity) : null;
    return { rack, issues, dp };
  });

  const violations = rows.filter(r => r.issues.length > 0);
  const compliant  = rows.filter(r => r.issues.length === 0);

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4 text-primary" /> ASHRAE A1 Compliance
          </CardTitle>
          <span className={cn(
            "text-[10px] font-semibold px-2 py-0.5 rounded-full",
            violations.length > 0 ? "bg-destructive/10 text-destructive" : "bg-green-500/10 text-green-400"
          )}>
            {violations.length === 0 ? `All ${compliant.length} racks compliant` : `${violations.length} violation${violations.length > 1 ? "s" : ""}`}
          </span>
        </div>
      </CardHeader>
      <CardContent>
        {violations.length === 0 ? (
          <p className="text-sm text-green-400 flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4" />
            All racks within ASHRAE A1 envelope (15–32°C, 20–80% RH)
          </p>
        ) : (
          <div className="space-y-2">
            {violations.map(({ rack, issues, dp }) => (
              <div key={rack.rack_id} className="flex items-start gap-3 rounded-lg bg-destructive/5 border border-destructive/20 px-3 py-2 text-xs">
                <AlertTriangle className="w-3.5 h-3.5 text-destructive mt-0.5 shrink-0" />
                <div className="flex-1">
                  <span className="font-semibold">{rack.rack_id.toUpperCase()}</span>
                  <span className="text-muted-foreground ml-2">{roomLabels[rack.room_id] ?? rack.room_id}</span>
                  <div className="flex flex-wrap gap-x-4 gap-y-0.5 mt-0.5 text-destructive">
                    {issues.map((iss, i) => <span key={i}>{iss.type}: {iss.detail}</span>)}
                    {dp !== null && <span className="text-muted-foreground">DP: {dp}°C</span>}
                  </div>
                </div>
              </div>
            ))}
            <p className="text-[10px] text-muted-foreground pt-1">
              ASHRAE A1 envelope: 15–32°C dry bulb, 20–80% relative humidity
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// ── Dew Point Panel ───────────────────────────────────────────────────────────

function DewPointPanel({
  rooms, cracs, activeRoom,
}: {
  rooms: RoomEnvReadings[];
  cracs: CracStatus[];
  activeRoom: string;
}) {
  const room = rooms.find(r => r.room_id === activeRoom);
  const crac = cracs.find(c => c.room_id === activeRoom);
  const supplyTemp = crac?.supply_temp ?? null;

  const rackDps = (room?.racks ?? [])
    .filter(r => r.temperature !== null && r.humidity !== null)
    .map(r => ({
      rack_id: r.rack_id,
      dp: dewPoint(r.temperature!, r.humidity!),
      temp: r.temperature!,
      hum: r.humidity!,
    }))
    .sort((a, b) => b.dp - a.dp);

  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <Droplets className="w-4 h-4 text-blue-400" /> Dew Point by Rack
          </CardTitle>
          {supplyTemp !== null && (
            <span className="text-[10px] text-muted-foreground">
              CRAC supply: <strong className="text-blue-400">{supplyTemp}°C</strong>
              {rackDps.some(r => r.dp >= supplyTemp - 1) && (
                <span className="text-destructive ml-1">— condensation risk!</span>
              )}
            </span>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {rackDps.length === 0 ? (
          <p className="text-sm text-muted-foreground">No data available</p>
        ) : (
          <div className="space-y-1.5">
            {rackDps.map(({ rack_id, dp, temp, hum }) => {
              const nearCondensation = supplyTemp !== null && dp >= supplyTemp - 1;
              const dpColor = nearCondensation ? "text-destructive"
                : dp > 15 ? "text-amber-400" : "text-foreground";
              return (
                <div key={rack_id} className="flex items-center gap-3 text-xs">
                  <span className="font-mono w-16 shrink-0 text-muted-foreground">
                    {rack_id.replace("rack-", "").toUpperCase()}
                  </span>
                  <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
                    <div
                      className={cn("h-full rounded-full transition-all", nearCondensation ? "bg-destructive" : dp > 15 ? "bg-amber-500" : "bg-blue-500")}
                      style={{ width: `${Math.min(100, Math.max(0, (dp / 30) * 100))}%` }}
                    />
                  </div>
                  <span className={cn("font-mono font-semibold w-16 text-right", dpColor)}>
                    {dp}°C DP
                  </span>
                  <span className="text-muted-foreground w-20 text-right hidden sm:block">
                    {temp}° / {hum}%
                  </span>
                </div>
              );
            })}
            <p className="text-[10px] text-muted-foreground pt-1">
              Dew point approaching CRAC supply temp = condensation risk on cold surfaces
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// ── Leak sensor panel ─────────────────────────────────────────────────────────

function LeakPanel({ sensors }: { sensors: LeakSensorStatus[] }) {
  const detected = sensors.filter(s => s.state === "detected");
  const anyDetected = detected.length > 0;

  return (
    <Card className={cn("border", anyDetected && "border-destructive/50")}>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <Droplets className="w-4 h-4 text-blue-400" /> Water / Leak Detection
          </CardTitle>
          <div className="flex items-center gap-2">
            <Link href="/leak" className="text-[10px] text-primary hover:underline">View full page →</Link>
            <span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide",
              anyDetected ? "bg-destructive/10 text-destructive animate-pulse" : "bg-green-500/10 text-green-400",
            )}>
              {anyDetected ? `${detected.length} leak detected` : "All clear"}
            </span>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-2">
        {sensors.map(s => {
          const detected = s.state === "detected";
          return (
            <div key={s.sensor_id} className={cn(
              "flex items-start justify-between rounded-lg px-3 py-2 text-xs",
              detected ? "bg-destructive/10" : "bg-muted/30",
            )}>
              <div>
                <p className={cn("font-semibold", detected ? "text-destructive" : "text-foreground")}>
                  {detected ? <AlertTriangle className="w-3 h-3 inline mr-1" /> : <CheckCircle2 className="w-3 h-3 inline mr-1 text-green-400" />}
                  {s.sensor_id}
                </p>
                <p className="text-muted-foreground mt-0.5">
                  Zone: {s.floor_zone}
                  {s.under_floor ? " · under-floor" : ""}
                  {s.near_crac ? " · near CRAC" : ""}
                  {s.room_id ? ` · ${s.room_id}` : ""}
                </p>
              </div>
              <span className={cn("font-semibold shrink-0 ml-2", detected ? "text-destructive" : "text-green-400")}>
                {s.state === "detected" ? "DETECTED" : s.state === "clear" ? "Clear" : "Unknown"}
              </span>
            </div>
          );
        })}
        {sensors.length === 0 && (
          <p className="text-sm text-muted-foreground text-center py-2">No sensors configured</p>
        )}
      </CardContent>
    </Card>
  );
}

// ── VESDA / Fire panel ────────────────────────────────────────────────────────

const VESDA_LEVEL_CONFIG: Record<string, { label: string; color: string; bg: string }> = {
  normal: { label: "Normal", color: "text-green-400",      bg: "bg-green-500/10" },
  alert:  { label: "Alert",  color: "text-amber-400",      bg: "bg-amber-500/10" },
  action: { label: "Action", color: "text-orange-400",     bg: "bg-orange-500/10" },
  fire:   { label: "FIRE",   color: "text-destructive",    bg: "bg-destructive/10" },
};

function FirePanel({ zones }: { zones: FireZoneStatus[] }) {
  const elevated = zones.filter(z => z.level !== "normal");

  return (
    <Card className={cn("border", elevated.length > 0 && elevated.some(z => z.level === "fire") && "border-destructive/50")}>
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-sm font-semibold flex items-center gap-2">
            <Flame className="w-4 h-4 text-orange-400" /> VESDA / Smoke Detection
          </CardTitle>
          <div className="flex items-center gap-2">
            <Link href="/fire" className="text-[10px] text-primary hover:underline">View full page →</Link>
            <span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide",
              elevated.length === 0 ? "bg-green-500/10 text-green-400" :
              zones.some(z => z.level === "fire") ? "bg-destructive/10 text-destructive animate-pulse" :
              "bg-amber-500/10 text-amber-400",
            )}>
              {elevated.length === 0 ? "All normal" : `${elevated.length} zone${elevated.length !== 1 ? "s" : ""} elevated`}
            </span>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-2">
        {zones.map(zone => {
          const cfg = VESDA_LEVEL_CONFIG[zone.level] ?? VESDA_LEVEL_CONFIG.normal;
          return (
            <div key={zone.zone_id} className={cn("rounded-lg px-3 py-2 text-xs", cfg.bg)}>
              <div className="flex items-center justify-between mb-1.5">
                <div>
                  <p className="font-semibold">{zone.zone_id}</p>
                  {zone.room_id && <p className="text-muted-foreground">{zone.room_id}</p>}
                </div>
                <span className={cn("font-bold text-sm uppercase", cfg.color)}>{cfg.label}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">
                  Obscuration: <strong className={cn(zone.level !== "normal" ? cfg.color : "")}>{zone.obscuration_pct_m != null ? `${zone.obscuration_pct_m.toFixed(3)} %/m` : "—"}</strong>
                </span>
                <div className="flex gap-2 text-[10px]">
                  {!zone.detector_1_ok && <span className="text-destructive">Det1 fault</span>}
                  {!zone.detector_2_ok && <span className="text-destructive">Det2 fault</span>}
                  {!zone.power_ok    && <span className="text-destructive">Power fault</span>}
                  {!zone.flow_ok     && <span className="text-destructive">Flow fault</span>}
                  {zone.detector_1_ok && zone.detector_2_ok && zone.power_ok && zone.flow_ok && (
                    <span className="text-green-400">Systems OK</span>
                  )}
                </div>
              </div>
            </div>
          );
        })}
        {zones.length === 0 && (
          <p className="text-sm text-muted-foreground text-center py-2">No VESDA zones configured</p>
        )}
      </CardContent>
    </Card>
  );
}

// ── Particle count panel (ISO 14644) ──────────────────────────────────────────

const ISO_LABELS: Record<number, { label: string; color: string }> = {
  5: { label: "ISO 5",  color: "text-green-400"  },
  6: { label: "ISO 6",  color: "text-green-400"  },
  7: { label: "ISO 7",  color: "text-green-400"  },
  8: { label: "ISO 8",  color: "text-amber-400"  },
  9: { label: "ISO 9",  color: "text-destructive" },
};

const ISO8_0_5UM = 3_520_000;
const ISO8_5UM   =    29_300;

function ParticlePanel({ rooms }: { rooms: ParticleStatus[] }) {
  if (rooms.length === 0) return null;
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold flex items-center gap-2">
          <Wind className="w-4 h-4 text-primary" />
          Air Quality — ISO 14644
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {rooms.map(r => {
          const cls = r.iso_class ? ISO_LABELS[r.iso_class] : null;
          const p05pct = r.particles_0_5um !== null ? Math.min(100, (r.particles_0_5um / ISO8_0_5UM) * 100) : null;
          const p5pct  = r.particles_5um   !== null ? Math.min(100, (r.particles_5um   / ISO8_5UM)   * 100) : null;
          return (
            <div key={r.room_id} className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">{r.room_id === "hall-a" ? "Hall A" : r.room_id === "hall-b" ? "Hall B" : r.room_id}</span>
                {cls ? (
                  <span className={cn("text-xs font-semibold px-2 py-0.5 rounded-full bg-muted/40", cls.color)}>
                    {cls.label}
                  </span>
                ) : (
                  <span className="text-xs text-muted-foreground">No data</span>
                )}
              </div>
              <div className="space-y-1.5 text-xs text-muted-foreground">
                <div className="flex items-center gap-2">
                  <span className="w-28 shrink-0">≥0.5 µm</span>
                  <div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
                    {p05pct !== null && (
                      <div
                        className={cn("h-full rounded-full transition-all", p05pct >= 100 ? "bg-destructive" : p05pct >= 70 ? "bg-amber-500" : "bg-green-500")}
                        style={{ width: `${p05pct}%` }}
                      />
                    )}
                  </div>
                  <span className="w-32 text-right font-mono">
                    {r.particles_0_5um !== null ? r.particles_0_5um.toLocaleString() : "—"} /m³
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="w-28 shrink-0">≥5 µm</span>
                  <div className="flex-1 h-2 rounded-full bg-muted overflow-hidden">
                    {p5pct !== null && (
                      <div
                        className={cn("h-full rounded-full transition-all", p5pct >= 100 ? "bg-destructive" : p5pct >= 70 ? "bg-amber-500" : "bg-green-500")}
                        style={{ width: `${p5pct}%` }}
                      />
                    )}
                  </div>
                  <span className="w-32 text-right font-mono">
                    {r.particles_5um !== null ? r.particles_5um.toLocaleString() : "—"} /m³
                  </span>
                </div>
              </div>
            </div>
          );
        })}
        <p className="text-[10px] text-muted-foreground pt-1">
          DC target: ISO 8 (≤3,520,000 particles ≥0.5 µm/m³ · ≤29,300 ≥5 µm/m³)
        </p>
      </CardContent>
    </Card>
  );
}

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

export default function EnvironmentalPage() {
  const { thresholds } = useThresholds();
  const [rooms, setRooms]         = useState<RoomEnvReadings[]>([]);
  const [tempHist, setTempHist]   = useState<TempBucket[]>([]);
  const [humHist, setHumHist]     = useState<HumidityBucket[]>([]);
  const [cracs, setCracs]         = useState<CracStatus[]>([]);
  const [leakSensors, setLeak]    = useState<LeakSensorStatus[]>([]);
  const [fireZones, setFire]      = useState<FireZoneStatus[]>([]);
  const [particles, setParticles] = useState<ParticleStatus[]>([]);
  const [hours, setHours]         = useState(6);
  const [loading, setLoading]     = useState(true);
  const [selectedRack, setSelectedRack] = useState<string | null>(null);
  const [activeRoom, setActiveRoom] = useState("hall-a");

  const load = useCallback(async () => {
    try {
      const [r, t, h, c, l, f, p] = await Promise.all([
        fetchRackEnvReadings(SITE_ID),
        fetchRoomTempHistory(SITE_ID, hours),
        fetchHumidityHistory(SITE_ID, hours),
        fetchCracStatus(SITE_ID),
        fetchLeakStatus(SITE_ID).catch(() => []),
        fetchFireStatus(SITE_ID).catch(() => []),
        fetchParticleStatus(SITE_ID).catch(() => []),
      ]);
      setRooms(r);
      setTempHist(t);
      setHumHist(h);
      setCracs(c);
      setLeak(l);
      setFire(f);
      setParticles(p);
    } catch {
      toast.error("Failed to load environmental data");
    } finally {
      setLoading(false);
    }
  }, [hours]);

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

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-xl font-semibold">Environmental Monitoring</h1>
          <p className="text-sm text-muted-foreground">Singapore DC01 — refreshes every 30s</p>
        </div>
        <TimeRangePicker value={hours} onChange={setHours} />
      </div>

      {loading ? (
        <div className="space-y-4">
          <Skeleton className="h-64 w-full" />
          <Skeleton className="h-48 w-full" />
        </div>
      ) : (
        <>
          <RackDetailSheet siteId={SITE_ID} rackId={selectedRack} onClose={() => setSelectedRack(null)} />

          {/* Page-level room tab selector */}
          {rooms.length > 0 && (
            <Tabs value={activeRoom} onValueChange={setActiveRoom}>
              <TabsList>
                {rooms.map(r => (
                  <TabsTrigger key={r.room_id} value={r.room_id} className="px-6">
                    {roomLabels[r.room_id] ?? r.room_id}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          )}

          {rooms.length > 0 && (
            <TempHeatmap rooms={rooms} onRackClick={setSelectedRack} activeRoom={activeRoom}
              tempWarn={thresholds.temp.warn} tempCrit={thresholds.temp.critical}
              humWarn={thresholds.humidity.warn} humCrit={thresholds.humidity.critical} />
          )}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {rooms.length > 0 && <AshraeTable rooms={rooms} />}
            {rooms.length > 0 && (
              <DewPointPanel rooms={rooms} cracs={cracs} activeRoom={activeRoom} />
            )}
          </div>
          {/* Leak + VESDA panels */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <LeakPanel sensors={leakSensors} />
            <FirePanel zones={fireZones} />
          </div>
          <EnvTrendChart tempData={tempHist} humData={humHist} hours={hours} activeRoom={activeRoom}
            tempWarn={thresholds.temp.warn} tempCrit={thresholds.temp.critical}
            humWarn={thresholds.humidity.warn} />
          <ParticlePanel rooms={particles} />
        </>
      )}
    </div>
  );
}