"use client";

import type { Widget } from "@/lib/config/schema";
import { useWidgetSubscription } from "@/lib/ws/client";
import { StatusDot } from "@/components/widgets/StatusDot";
import { SkeletonLines } from "@/components/widgets/Skeleton";
import { WidgetCard } from "@/components/widgets/WidgetCard";
import { MetricBar } from "@/components/widgets/MetricBar";
import { BrandIcon } from "@/components/widgets/BrandIcon";
import { formatBytes, formatUptime } from "@/lib/format";

type DockerWidget = Extract<Widget, { type: "docker" }>;

export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "docker" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : null;
  const memPercent = data?.memUsageBytes != null && data.memLimitBytes ? (data.memUsageBytes / data.memLimitBytes) * 100 : null;

  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>
        <StatusDot status={data?.status} health={data?.health} />
      </div>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {!result && !errorMessage && <SkeletonLines />}
      {data && (
        <>
          {widget.showStats && data.cpuPercent !== null && memPercent !== null && (
            <div className="mt-0.5 flex gap-4">
              <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
              <MetricBar label="MEM" percent={memPercent} detail={`${memPercent.toFixed(0)}%`} />
            </div>
          )}
          <div className="flex items-center gap-3 text-[11px] text-fg-muted">
            {data.uptimeSeconds !== null && <span>up {formatUptime(data.uptimeSeconds)}</span>}
            {widget.showStats && data.memUsageBytes !== null && memPercent === null && (
              <span className="font-mono tabular-nums">{formatBytes(data.memUsageBytes)}</span>
            )}
            {data.restartCount > 0 && <span>{data.restartCount} restarts</span>}
          </div>
        </>
      )}
    </WidgetCard>
  );
}