"use client";

import { useQuery } from "@tanstack/react-query";
import { hospitalityApi } from "@/modules/hospitality/services/hospitality-api";
import { useHospitalityCapabilities } from "@/modules/hospitality/hooks/useHospitalityCapabilities";
import { HospitalityPageLoader, HospitalityPageError } from "@/modules/hospitality/pages/shared";
import { PageHeader, Card, CardContent, Badge, Button } from "@/components/ds";
import { HospitalityBreadcrumbs } from "@/modules/hospitality/components/HospitalityBreadcrumbs";

export const HealthPage = function HospitalityHealthPage() {
  const healthQ = useQuery({
    queryKey: ["hospitality", "health"],
    queryFn: () => hospitalityApi.health(),
    refetchInterval: 15_000,
  });
  const capsQ = useHospitalityCapabilities();

  if (healthQ.isLoading || capsQ.isLoading) return <HospitalityPageLoader />;
  if (healthQ.error) return <HospitalityPageError error={healthQ.error} onRetry={() => healthQ.refetch()} />;

  return (
    <div className="space-y-6">
      <HospitalityBreadcrumbs current="سلامت سرویس" />
      <PageHeader
        title="سلامت سرویس"
        description="وضعیت زنده سرویس Hospitality و اتصال BFF."
        actions={
          <Button variant="outline" size="sm" onClick={() => healthQ.refetch()}>
            بررسی مجدد
          </Button>
        }
      />
      <Card>
        <CardContent className="space-y-4 p-6">
          <div className="flex flex-wrap items-center gap-3">
            <Badge tone={healthQ.data?.status === "ok" ? "success" : "danger"}>{healthQ.data?.status}</Badge>
            <span className="text-sm">{healthQ.data?.service}</span>
            <span className="text-sm text-[var(--muted)]">v{healthQ.data?.version}</span>
          </div>
          <p className="text-sm text-[var(--muted)]">
            Capabilities API: {capsQ.data ? "متصل" : "—"} — {Object.keys(capsQ.data?.features ?? {}).length} feature flag
          </p>
        </CardContent>
      </Card>
    </div>
  );
};

export default HealthPage;