"use client";

import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";

type HttpWidget = Extract<Widget, { type: "http" }>;

function statusColor(up: boolean | undefined, consecutiveFailures: number): string {
  if (up === undefined) return "bg-fg-muted";
  if (up) return "bg-status-up";
  return consecutiveFailures > 2 ? "bg-status-down" : "bg-status-degraded";
}

export function HttpWidget({ widget, widgetId }: { widget: HttpWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "http" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;

  return (
    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
      <div className="flex items-center justify-between gap-2">
        <span className="text-sm font-medium text-fg">{widget.name}</span>
        <span
          className={`h-2.5 w-2.5 shrink-0 rounded-full ${statusColor(data?.up, data?.consecutiveFailures ?? 0)}`}
          title={data ? (data.up ? "up" : `down (${data.consecutiveFailures} checks failed)`) : "unknown"}
        />
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {data && (
        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
          <div>Status: {data.statusCode ?? "—"}</div>
          <div>Latency: {data.latencyMs}ms</div>
          {!data.up && data.error && <div className="text-status-down">{data.error}</div>}
        </dl>
      )}
    </div>
  );
}