"use client";

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 { StatusDot } from "@/components/widgets/StatusDot";
import { BrandIcon } from "@/components/widgets/BrandIcon";

type TraefikWidget = Extract<Widget, { type: "traefik" }>;

export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "traefik" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;
  const enabledCount = data?.routers.filter((router) => router.status === "enabled").length ?? 0;

  return (
    <WidgetCard span={4}>
      <div className="flex items-center justify-between gap-2">
        <div className="flex min-w-0 items-center gap-2">
          <BrandIcon slug={widget.icon} />
          {widget.href ? (
            <a
              href={widget.href}
              target="_blank"
              rel="noreferrer"
              className="truncate text-[15px] font-medium text-fg hover:text-accent"
            >
              {widget.name}
            </a>
          ) : (
            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {data && (
            <span className="font-mono text-[11px] tabular-nums text-fg-muted">
              {data.entrypoints.length} entrypoints
            </span>
          )}
          <StatusDot status={data ? "running" : undefined} />
        </div>
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines count={3} />}
      {data && (
        <>
          <div className="flex items-start gap-4">
            <div className="flex flex-col gap-0.5">
              <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
                {data.routers.length}
              </span>
              <span className="text-[10px] tracking-wide text-fg-muted uppercase">Routes</span>
            </div>
            {enabledCount !== data.routers.length && (
              <div className="flex flex-col gap-0.5 border-l border-border pl-4">
                <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-status-degraded">
                  {enabledCount}
                </span>
                <span className="text-[10px] tracking-wide text-fg-muted uppercase">Enabled</span>
              </div>
            )}
          </div>
          <span className="text-[11px] text-fg-muted">
            <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
          </span>
        </>
      )}
    </WidgetCard>
  );
}