"use client";

import { Globe, Timer } from "@phosphor-icons/react/ssr";
import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";
import { SkeletonLines } from "@/components/widgets/Skeleton";
import { WidgetCard } from "@/components/widgets/WidgetCard";
import { StatusTag } from "@/components/widgets/StatusTag";

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

function statusTone(up: boolean | undefined, consecutiveFailures: number): "accent" | "down" | "degraded" | "neutral" {
  if (up === undefined) return "neutral";
  if (up) return "accent";
  return consecutiveFailures > 2 ? "down" : "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 (
    <WidgetCard span={3}>
      <div className="flex items-center gap-2.5">
        <Globe size={18} className="text-accent" aria-hidden />
        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
      </div>
      <div>
        <StatusTag tone={statusTone(data?.up, data?.consecutiveFailures ?? 0)}>
          {data ? (data.up ? `${data.statusCode ?? "up"}` : "down") : "…"}
        </StatusTag>
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines />}
      {data && (
        <div className="flex items-center gap-1.5 text-[11px] text-fg-muted">
          <Timer size={12} aria-hidden />
          <span className="font-mono tabular-nums text-fg">{data.latencyMs}ms</span> latency
          {!data.up && data.error && <span className="text-status-down">{data.error}</span>}
        </div>
      )}
    </WidgetCard>
  );
}