"use client";

import type { HealthEngine } from "@/lib/types";

interface HealthPanelProps {

  engines: HealthEngine[];

  ok: boolean;

}

function stalenessLabel(h: number): string {

  if (h < 1) return `${Math.round(h * 60)}m`;

  if (h < 24) return `${h.toFixed(1)}h`;

  return `${Math.round(h / 24)}d`;

}

function stalenessClass(h: number, status: "up" | "down"): string {

  if (status === "down") return "text-red-400";

  if (h < 2) return "text-teal-bio";

  if (h < 12) return "text-text-secondary";

  return "text-text-muted";

}

function EngineRow({ engine }: { engine: HealthEngine }) {

  const isUp = engine.status === "up";

  const stale = engine.staleness_h > 12;

  return (

    <div className="flex items-center gap-3 py-2 border-b border-surface-2 last:border-0">

      {}

      <div

        className={[

          "w-2 h-2 rounded-full flex-shrink-0",

          isUp && !stale ? "bg-teal-bio animate-pulse-slow" : "",

          isUp && stale ? "bg-text-muted" : "",

          !isUp ? "bg-red-500" : "",

        ].join(" ")}

      />

      {}

      <span

        className={[

          "font-mono text-label-sm uppercase tracking-widest flex-1",

          isUp ? "text-text-primary" : "text-text-muted",

        ].join(" ")}

      >

        {engine.engine}

      </span>

      {}

      <span className={`font-mono text-label-sm ${stalenessClass(engine.staleness_h, engine.status)}`}>

        {isUp ? stalenessLabel(engine.staleness_h) : "down"}

      </span>

    </div>

  );

}

export default function HealthPanel({ engines, ok }: HealthPanelProps) {

  const upCount = engines.filter((e) => e.status === "up").length;

  const freshCount = engines.filter((e) => e.status === "up" && e.staleness_h < 2).length;

  return (

    <div className="border border-surface-2 p-4">

      {}

      <div className="flex items-center justify-between mb-4">

        <div className="flex items-center gap-2">

          <div className={`w-2 h-2 rounded-full ${ok ? "bg-teal-bio animate-pulse-slow" : "bg-red-500"}`} />

          <span className="font-mono text-label-sm uppercase tracking-widest text-text-primary">

            Organism health

          </span>

        </div>

        <span className="font-mono text-label-sm text-text-muted">

          {upCount}/{engines.length} up

        </span>

      </div>

      {}

      <div>

        {engines.map((eng) => (

          <EngineRow key={eng.engine} engine={eng} />

        ))}

      </div>

      {}

      <div className="mt-4 pt-3 border-t border-surface-2 flex justify-between items-center">

        <span className="font-mono text-label-sm text-text-muted">

          {freshCount} nodes fresh

        </span>

        <span className={`font-mono text-label-sm ${ok ? "text-teal-bio" : "text-red-400"}`}>

          {ok ? "HEALTHY" : "DEGRADED"}

        </span>

      </div>

    </div>

  );

}