"use client";

import { useQuery } from "@tanstack/react-query";
import { CheckCircle2, Radio, Send, XCircle } from "lucide-react";
import { Alert } from "@/components/ui/alert";
import { StatCard } from "@/components/shared/stat-card";
import { getPushStats } from "@/services/push";
import { queryKeys } from "@/lib/query-keys";
import { formatNumber } from "@/lib/format";
import { useI18n, useT } from "@/i18n";

/**
 * The push health headline: how the delivery window ended, judged against the
 * backend thresholds, plus the tiles the support desk reads at a glance.
 */
export function PushStats() {
  const t = useT();
  const { locale } = useI18n();
  const query = useQuery({
    queryKey: queryKeys.push.stats,
    queryFn: async () => (await getPushStats()).Model ?? null,
  });

  const stats = query.data;
  const sent = stats?.counts["sent"] ?? 0;
  const failed = stats?.counts["failed"] ?? 0;
  const noDevice = stats?.counts["no_device"] ?? 0;

  return (
    <div className="space-y-4">
      {query.isError ? (
        <Alert variant="destructive" title={t("push.healthTitle")}>
          {String(query.error)}
        </Alert>
      ) : stats && !stats.healthy ? (
        <Alert variant="destructive" title={t("push.unhealthyTitle")}>
          {t("push.unhealthyBody", {
            failed: formatNumber(failed, locale),
            percent: formatNumber(stats.failure_percent, locale),
            window: String(stats.window_hours),
          })}
          <span className="mt-1 block text-xs opacity-80">
            {t("push.thresholdHint", {
              percent: String(stats.thresholds.failure_percent),
              minimum: String(stats.thresholds.minimum_failures),
            })}
          </span>
        </Alert>
      ) : stats && stats.total > 0 ? (
        <Alert variant="success" title={t("push.healthy")}>
          {t("push.overWindow", { window: String(stats.window_hours) })}
        </Alert>
      ) : null}

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard
          label={t("push.total")}
          value={formatNumber(stats?.total, locale)}
          icon={Radio}
          tone="primary"
          hint={t("push.overWindow", { window: String(stats?.window_hours ?? 24) })}
          loading={query.isPending}
        />
        <StatCard
          label={t("push.sent")}
          value={formatNumber(sent, locale)}
          icon={Send}
          tone="accent"
          hint={stats?.failure_percent ? `${t("push.failureRate")} ${stats.failure_percent}%` : undefined}
          loading={query.isPending}
        />
        <StatCard
          label={t("push.failed")}
          value={formatNumber(failed, locale)}
          icon={XCircle}
          tone="warning"
          hint={stats ? t("push.thresholdHint", {
            percent: String(stats.thresholds.failure_percent),
            minimum: String(stats.thresholds.minimum_failures),
          }) : undefined}
          loading={query.isPending}
        />
        <StatCard
          label={t("push.noDevice")}
          value={formatNumber(noDevice, locale)}
          icon={CheckCircle2}
          tone="muted"
          hint={t("push.noDeviceHint")}
          loading={query.isPending}
        />
      </div>
    </div>
  );
}