"use client";

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

type DatabaseWidget = Extract<Widget, { type: "database" }>;

const ENGINE_LABEL: Record<DatabaseWidget["engine"], string> = {
  postgres: "PostgreSQL",
  redis: "Redis",
};

const ENGINE_ICON: Record<DatabaseWidget["engine"], string> = {
  postgres: "postgresql",
  redis: "redis",
};

export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) {
  const result = useWidgetSubscription(widgetId);
  const data = result?.type === "database" ? result.data : null;
  const errorMessage = result?.type === "error" ? result.message : 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={ENGINE_ICON[widget.engine]} />
          <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
        </div>
        <StatusDot status={data?.status} health={data?.health} />
      </div>
      <span className="text-[11px] text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>
      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
      {data?.uptimeSeconds != null && (
        <span className="text-[11px] text-fg-muted">
          up <span className="font-mono tabular-nums text-fg">{formatUptime(data.uptimeSeconds)}</span>
        </span>
      )}
    </WidgetCard>
  );
}