"use client";

import { useQuery } from "@tanstack/react-query";
import { sportsCenterApi } from "@/modules/sports-center/services/sports-center-api";
import { SportsCenterPageLoader, SportsCenterPageError } from "@/modules/sports-center/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { SportsCenterBreadcrumbs } from "@/modules/sports-center/components/SportsCenterBreadcrumbs";

export function HealthPage() {
  const healthQ = useQuery({
    queryKey: ["sports-center", "health"],
    queryFn: () => sportsCenterApi.health(),
  });

  if (healthQ.isLoading) return <SportsCenterPageLoader label="بررسی سلامت سرویس…" />;
  if (healthQ.error) return <SportsCenterPageError error={healthQ.error} onRetry={() => healthQ.refetch()} />;

  const h = healthQ.data!;

  return (
    <div className="space-y-6">
      <SportsCenterBreadcrumbs current="سلامت سرویس" />
      <PageHeader title="سلامت سرویس" description="وضعیت runtime سرویس مرکز ورزشی" />
      <Card>
        <CardContent className="space-y-3 p-6">
          <div className="flex items-center justify-between">
            <span className="text-sm text-[var(--muted)]">وضعیت</span>
            <Badge tone={h.status === "ok" ? "success" : "danger"}>{h.status}</Badge>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-[var(--muted)]">سرویس</span>
            <span className="text-sm font-medium">{h.service}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-[var(--muted)]">نسخه</span>
            <span className="text-sm font-medium">{h.version}</span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default HealthPage;