"use client";

import { useEffect, useState } from "react";
import { fetchCracStatus, fetchCracHistory, type CracStatus, type CracHistoryPoint } from "@/lib/api";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { TimeRangePicker } from "@/components/ui/time-range-picker";
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  ResponsiveContainer, ReferenceLine,
} from "recharts";
import { Thermometer, Wind, Zap, Gauge, Settings2, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface Props {
  siteId: string;
  cracId: string | null;
  onClose: () => void;
}

function fmt(v: number | null | undefined, dec = 1, unit = "") {
  if (v == null) return "—";
  return `${v.toFixed(dec)}${unit}`;
}

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

function FillBar({
  value, max, color, warn, crit,
}: {
  value: number | null; max: number; color: string; warn?: number; crit?: number;
}) {
  const pct = value != null ? Math.min(100, (value / max) * 100) : 0;
  const barColor =
    crit && value != null && value >= crit ? "#ef4444" :
    warn && value != null && value >= warn ? "#f59e0b" :
    color;
  return (
    <div className="h-1.5 rounded-full bg-muted overflow-hidden w-full">
      <div
        className="h-full rounded-full transition-all duration-500"
        style={{ width: `${pct}%`, backgroundColor: barColor }}
      />
    </div>
  );
}

function SectionLabel({ icon: Icon, title }: { icon: React.ElementType; title: string }) {
  return (
    <div className="flex items-center gap-1.5 mt-5 mb-2">
      <Icon className="h-3.5 w-3.5 text-muted-foreground" />
      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
        {title}
      </span>
    </div>
  );
}

function StatRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
  return (
    <div className="flex justify-between items-center py-1.5 border-b border-border/40 last:border-0">
      <span className="text-xs text-muted-foreground">{label}</span>
      <span className={cn("text-sm font-mono font-medium", highlight && "text-amber-400")}>{value}</span>
    </div>
  );
}

function RefrigerantRow({ label, value, status }: { label: string; value: string; status: "ok" | "warn" | "crit" }) {
  return (
    <div className="flex justify-between items-center py-2 border-b border-border/40 last:border-0">
      <span className="text-xs text-muted-foreground">{label}</span>
      <div className="flex items-center gap-2">
        <span className="text-sm font-mono font-medium">{value}</span>
        <span className={cn(
          "text-[10px] font-semibold px-1.5 py-0.5 rounded-full uppercase tracking-wide",
          status === "ok"   ? "bg-green-500/10 text-green-400" :
          status === "warn" ? "bg-amber-500/10 text-amber-400" :
                              "bg-destructive/10 text-destructive",
        )}>
          {status === "ok" ? "normal" : status}
        </span>
      </div>
    </div>
  );
}

function MiniChart({
  data, dataKey, color, label, unit, refLine,
}: {
  data: CracHistoryPoint[];
  dataKey: keyof CracHistoryPoint;
  color: string;
  label: string;
  unit: string;
  refLine?: number;
}) {
  const vals = data.map(d => d[dataKey] as number | null).filter(v => v != null) as number[];
  const last = vals[vals.length - 1];
  return (
    <div className="mb-5">
      <div className="flex justify-between items-baseline mb-1">
        <span className="text-xs text-muted-foreground">{label}</span>
        <span className="text-sm font-mono font-medium" style={{ color }}>
          {last != null ? `${last.toFixed(1)}${unit}` : "—"}
        </span>
      </div>
      <ResponsiveContainer width="100%" height={60}>
        <LineChart data={data} margin={{ top: 2, right: 4, left: -28, bottom: 0 }}>
          <XAxis
            dataKey="bucket"
            tickFormatter={formatTime}
            tick={{ fontSize: 9 }}
            interval="preserveStartEnd"
          />
          <YAxis tick={{ fontSize: 9 }} domain={["auto", "auto"]} />
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
          <Tooltip
            formatter={(v: unknown) => [`${(v as number).toFixed(1)}${unit}`, label]}
            labelFormatter={(l: unknown) => formatTime(String(l))}
            contentStyle={{ fontSize: 11, background: "#1e1e2e", border: "1px solid #333" }}
          />
          {refLine != null && (
            <ReferenceLine y={refLine} stroke="rgba(251,191,36,0.4)" strokeDasharray="4 2" />
          )}
          <Line
            type="monotone"
            dataKey={dataKey}
            stroke={color}
            dot={false}
            strokeWidth={1.5}
            connectNulls
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

// ── Overview tab ──────────────────────────────────────────────────────────────

function OverviewTab({ status }: { status: CracStatus }) {
  const deltaWarn  = (status.delta ?? 0) > 11;
  const deltaCrit  = (status.delta ?? 0) > 14;
  const capWarn    = (status.cooling_capacity_pct ?? 0) > 75;
  const capCrit    = (status.cooling_capacity_pct ?? 0) > 90;
  const copWarn    = (status.cop ?? 99) < 1.5;
  const filterWarn = (status.filter_dp_pa ?? 0) > 80;
  const filterCrit = (status.filter_dp_pa ?? 0) > 120;
  const compWarn   = (status.compressor_load_pct ?? 0) > 95;

  return (
    <div>
      {/* ── Thermal hero ──────────────────────────────────────────── */}
      <SectionLabel icon={Thermometer} title="Thermal" />
      <div className="rounded-lg bg-muted/20 px-4 py-3 mb-3">
        <div className="flex items-center justify-between">
          <div className="text-center">
            <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-0.5">Supply</p>
            <p className="text-2xl font-bold tabular-nums text-blue-400">
              {fmt(status.supply_temp, 1)}°C
            </p>
          </div>
          <div className="flex-1 flex flex-col items-center gap-1 px-4">
            <p className={cn(
              "text-sm font-bold tabular-nums",
              deltaCrit ? "text-destructive" : deltaWarn ? "text-amber-400" : "text-muted-foreground",
            )}>
              ΔT {fmt(status.delta, 1)}°C
            </p>
            <div className="flex items-center gap-1 w-full">
              <div className="flex-1 h-px bg-muted-foreground/30" />
              <ArrowRight className="w-3 h-3 text-muted-foreground/50 shrink-0" />
              <div className="flex-1 h-px bg-muted-foreground/30" />
            </div>
          </div>
          <div className="text-center">
            <p className="text-[10px] text-muted-foreground uppercase tracking-wide mb-0.5">Return</p>
            <p className={cn(
              "text-2xl font-bold tabular-nums",
              deltaCrit ? "text-destructive" : deltaWarn ? "text-amber-400" : "text-orange-400",
            )}>
              {fmt(status.return_temp, 1)}°C
            </p>
          </div>
        </div>
      </div>

      <div className="bg-muted/30 rounded-lg px-3 py-1 mb-3">
        <StatRow label="Supply Humidity" value={fmt(status.supply_humidity, 0, "%")} />
        <StatRow label="Return Humidity" value={fmt(status.return_humidity, 0, "%")} />
        <StatRow label="Airflow"         value={status.airflow_cfm != null ? `${Math.round(status.airflow_cfm).toLocaleString()} CFM` : "—"} />
      </div>

      <div>
        <div className="flex justify-between text-[10px] mb-1">
          <span className="text-muted-foreground">Filter ΔP</span>
          <span className={cn(
            "font-mono",
            filterCrit ? "text-destructive" : filterWarn ? "text-amber-400" : "text-foreground",
          )}>
            {fmt(status.filter_dp_pa, 0)} Pa
            {!filterWarn && <span className="text-green-400 ml-1.5">✓</span>}
          </span>
        </div>
        <FillBar value={status.filter_dp_pa} max={150} color="#94a3b8" warn={80} crit={120} />
      </div>

      {/* ── Cooling capacity ──────────────────────────────────────── */}
      <SectionLabel icon={Gauge} title="Cooling Capacity" />
      <div className="mb-1.5">
        <div className="flex justify-between items-baseline mb-1.5">
          <span className={cn(
            "text-sm font-bold tabular-nums",
            capCrit ? "text-destructive" : capWarn ? "text-amber-400" : "text-foreground",
          )}>
            {fmt(status.cooling_capacity_kw, 1)} kW
          </span>
          <span className="text-xs text-muted-foreground">of {status.rated_capacity_kw} kW rated</span>
        </div>
        <FillBar value={status.cooling_capacity_pct} max={100} color="#34d399" warn={75} crit={90} />
        <p className={cn(
          "text-[10px] mt-1 text-right",
          capCrit ? "text-destructive" : capWarn ? "text-amber-400" : "text-muted-foreground",
        )}>
          {fmt(status.cooling_capacity_pct, 1)}% utilised
        </p>
      </div>
      <div className="bg-muted/30 rounded-lg px-3 py-1">
        <StatRow label="COP" value={fmt(status.cop, 2)} highlight={copWarn} />
        <StatRow label="Sensible Heat Ratio" value={fmt(status.sensible_heat_ratio, 2)} />
      </div>

      {/* ── Compressor ────────────────────────────────────────────── */}
      <SectionLabel icon={Settings2} title="Compressor" />
      <div className="mb-2">
        <div className="flex justify-between text-[10px] mb-1">
          <span className="text-muted-foreground">
            Load
            <span className={cn(
              "ml-2 font-semibold px-1.5 py-0.5 rounded-full",
              status.compressor_state === 1
                ? "bg-green-500/10 text-green-400"
                : "bg-muted text-muted-foreground",
            )}>
              {status.compressor_state === 1 ? "● Running" : "○ Off"}
            </span>
          </span>
          <span className={cn("font-mono", compWarn ? "text-amber-400" : "text-foreground")}>
            {fmt(status.compressor_load_pct, 1)}%
          </span>
        </div>
        <FillBar value={status.compressor_load_pct} max={100} color="#e879f9" warn={80} crit={95} />
      </div>
      <div className="bg-muted/30 rounded-lg px-3 py-1">
        <StatRow label="Power"     value={fmt(status.compressor_power_kw, 2, " kW")} />
        <StatRow label="Run Hours" value={status.compressor_run_hours != null ? status.compressor_run_hours.toLocaleString() + " h" : "—"} />
      </div>

      {/* ── Fan ───────────────────────────────────────────────────── */}
      <SectionLabel icon={Wind} title="Fan" />
      <div className="mb-2">
        <div className="flex justify-between text-[10px] mb-1">
          <span className="text-muted-foreground">Speed</span>
          <span className="font-mono text-foreground">
            {fmt(status.fan_pct, 1)}%
            {status.fan_rpm != null ? ` · ${Math.round(status.fan_rpm).toLocaleString()} rpm` : ""}
          </span>
        </div>
        <FillBar value={status.fan_pct} max={100} color="#60a5fa" />
      </div>
      <div className="bg-muted/30 rounded-lg px-3 py-1">
        <StatRow label="Fan Power" value={fmt(status.fan_power_kw, 2, " kW")} />
        <StatRow label="Run Hours" value={status.fan_run_hours != null ? status.fan_run_hours.toLocaleString() + " h" : "—"} />
      </div>

      {/* ── Electrical ────────────────────────────────────────────── */}
      <SectionLabel icon={Zap} title="Electrical" />
      <div className="bg-muted/30 rounded-lg px-3 py-1">
        <StatRow label="Total Unit Power" value={fmt(status.total_unit_power_kw, 2, " kW")} />
        <StatRow label="Input Voltage"    value={fmt(status.input_voltage_v, 1, " V")} />
        <StatRow label="Input Current"    value={fmt(status.input_current_a, 1, " A")} />
        <StatRow label="Power Factor"     value={fmt(status.power_factor, 3)} />
      </div>
    </div>
  );
}

// ── Refrigerant tab ───────────────────────────────────────────────────────────

function RefrigerantTab({ status }: { status: CracStatus }) {
  const hiP  = status.high_pressure_bar ?? 0;
  const loP  = status.low_pressure_bar ?? 99;
  const sh   = status.discharge_superheat_c ?? 0;
  const sc   = status.liquid_subcooling_c ?? 0;
  const load = status.compressor_load_pct ?? 0;

  // Normal ranges for R410A-style DX unit
  const hiPStatus: "ok" | "warn" | "crit" = hiP > 22 ? "crit" : hiP > 20 ? "warn" : "ok";
  const loPStatus: "ok" | "warn" | "crit" = loP < 3  ? "crit" : loP < 4  ? "warn" : "ok";
  const shStatus:  "ok" | "warn" | "crit" = sh > 16  ? "warn" : sh < 4   ? "warn" : "ok";
  const scStatus:  "ok" | "warn" | "crit" = sc < 2   ? "warn" : "ok";
  const ldStatus:  "ok" | "warn" | "crit" = load > 95 ? "warn" : "ok";

  const compRunning = status.compressor_state === 1;

  return (
    <div>
      <p className="text-xs text-muted-foreground mt-4 mb-4 leading-relaxed">
        Refrigerant circuit data for the DX cooling system. Pressures assume an R410A charge.
        Values outside normal range are flagged automatically.
      </p>

      <div className="rounded-lg bg-muted/20 px-3 mb-4">
        <div className="flex justify-between items-center py-3 border-b border-border/30">
          <span className="text-xs text-muted-foreground">Compressor State</span>
          <span className={cn(
            "text-xs font-semibold px-2 py-0.5 rounded-full",
            compRunning ? "bg-green-500/10 text-green-400" : "bg-muted text-muted-foreground",
          )}>
            {compRunning ? "● Running" : "○ Off"}
          </span>
        </div>
        <RefrigerantRow
          label="High Side Pressure"
          value={fmt(status.high_pressure_bar, 2, " bar")}
          status={hiPStatus}
        />
        <RefrigerantRow
          label="Low Side Pressure"
          value={fmt(status.low_pressure_bar, 2, " bar")}
          status={loPStatus}
        />
        <RefrigerantRow
          label="Discharge Superheat"
          value={fmt(status.discharge_superheat_c, 1, "°C")}
          status={shStatus}
        />
        <RefrigerantRow
          label="Liquid Subcooling"
          value={fmt(status.liquid_subcooling_c, 1, "°C")}
          status={scStatus}
        />
        <RefrigerantRow
          label="Compressor Load"
          value={fmt(status.compressor_load_pct, 1, "%")}
          status={ldStatus}
        />
        <div className="flex justify-between items-center py-2">
          <span className="text-xs text-muted-foreground">Compressor Power</span>
          <span className="text-sm font-mono font-medium">{fmt(status.compressor_power_kw, 2, " kW")}</span>
        </div>
      </div>

      <div className="rounded-md bg-muted/30 px-3 py-2.5 text-xs text-muted-foreground space-y-1">
        <p className="font-semibold text-foreground mb-1.5">Normal Ranges (R410A)</p>
        <p>High side pressure: 15 – 20 bar</p>
        <p>Low side pressure: 4 – 6 bar</p>
        <p>Discharge superheat: 5 – 15°C</p>
        <p>Liquid subcooling: 3 – 8°C</p>
      </div>
    </div>
  );
}

// ── Trends tab ────────────────────────────────────────────────────────────────

function TrendsTab({ history }: { history: CracHistoryPoint[] }) {
  if (history.length < 2) {
    return (
      <p className="text-sm text-muted-foreground mt-6 text-center">
        Not enough history yet — data accumulates every 5 minutes.
      </p>
    );
  }
  return (
    <div className="mt-4">
      <MiniChart data={history} dataKey="supply_temp" color="#60a5fa" label="Supply Temp"  unit="°C" />
      <MiniChart data={history} dataKey="return_temp" color="#f97316" label="Return Temp"  unit="°C" refLine={36} />
      <MiniChart data={history} dataKey="delta_t"     color="#a78bfa" label="ΔT"           unit="°C" />
      <MiniChart data={history} dataKey="capacity_kw" color="#34d399" label="Cooling kW"   unit=" kW" />
      <MiniChart data={history} dataKey="capacity_pct"color="#fbbf24" label="Utilisation"  unit="%"   refLine={90} />
      <MiniChart data={history} dataKey="cop"         color="#38bdf8" label="COP"          unit=""    refLine={1.5} />
      <MiniChart data={history} dataKey="comp_load"   color="#e879f9" label="Comp Load"    unit="%"   refLine={95} />
      <MiniChart data={history} dataKey="filter_dp"   color="#fb923c" label="Filter ΔP"   unit=" Pa" refLine={80} />
      <MiniChart data={history} dataKey="fan_pct"     color="#94a3b8" label="Fan Speed"    unit="%" />
    </div>
  );
}

// ── Sheet ─────────────────────────────────────────────────────────────────────

export function CracDetailSheet({ siteId, cracId, onClose }: Props) {
  const [hours, setHours]     = useState(6);
  const [status, setStatus]   = useState<CracStatus | null>(null);
  const [history, setHistory] = useState<CracHistoryPoint[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!cracId) return;
    setLoading(true);
    Promise.all([
      fetchCracStatus(siteId),
      fetchCracHistory(siteId, cracId, hours),
    ]).then(([statuses, hist]) => {
      setStatus(statuses.find(c => c.crac_id === cracId) ?? null);
      setHistory(hist);
    }).finally(() => setLoading(false));
  }, [siteId, cracId, hours]);

  return (
    <Sheet open={cracId != null} onOpenChange={open => { if (!open) onClose(); }}>
      <SheetContent className="w-[500px] sm:w-[560px] overflow-y-auto" side="right">
        <SheetHeader className="mb-2">
          <SheetTitle className="flex items-center justify-between">
            <span>{cracId?.toUpperCase() ?? "CRAC Unit"}</span>
            {status && (
              <Badge
                variant={status.state === "online" ? "default" : "destructive"}
                className="text-xs"
              >
                {status.state}
              </Badge>
            )}
          </SheetTitle>
          {status && (
            <p className="text-xs text-muted-foreground">
              {status.room_id ? `Room: ${status.room_id}` : ""}
              {status.state === "online" ? " · Mode: Cooling · Setpoint 22°C" : ""}
            </p>
          )}
        </SheetHeader>

        {loading && !status ? (
          <div className="space-y-3 mt-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <Skeleton key={i} className="h-8 w-full" />
            ))}
          </div>
        ) : status ? (
          <Tabs defaultValue="overview">
            <div className="flex items-center justify-between mt-3 mb-1">
              <TabsList>
                <TabsTrigger value="overview">Overview</TabsTrigger>
                <TabsTrigger value="refrigerant">Refrigerant</TabsTrigger>
                <TabsTrigger value="trends">Trends</TabsTrigger>
              </TabsList>
              <TimeRangePicker value={hours} onChange={setHours} />
            </div>

            <TabsContent value="overview">
              <OverviewTab status={status} />
            </TabsContent>

            <TabsContent value="refrigerant">
              <RefrigerantTab status={status} />
            </TabsContent>

            <TabsContent value="trends">
              <TrendsTab history={history} />
            </TabsContent>
          </Tabs>
        ) : (
          <p className="text-sm text-muted-foreground mt-4">No data available for {cracId}.</p>
        )}
      </SheetContent>
    </Sheet>
  );
}