"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 CapabilitiesPage() {
  const capsQ = useQuery({
    queryKey: ["sports-center", "capabilities"],
    queryFn: () => sportsCenterApi.capabilities(),
  });

  if (capsQ.isLoading) return <SportsCenterPageLoader />;
  if (capsQ.error) return <SportsCenterPageError error={capsQ.error} onRetry={() => capsQ.refetch()} />;

  const caps = capsQ.data!;
  const features = Object.entries(caps.features ?? {});

  return (
    <div className="space-y-6">
      <SportsCenterBreadcrumbs current="قابلیت‌ها" />
      <PageHeader
        title="قابلیت‌های سرویس"
        description={`فاز ${caps.phase} — ${caps.service}`}
        actions={<Badge tone="primary">v{caps.version}</Badge>}
      />
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {features.map(([key, enabled]) => (
          <Card key={key}>
            <CardContent className="flex items-center justify-between p-4">
              <span className="text-sm font-medium">{key}</span>
              <Badge tone={enabled ? "success" : "default"}>{enabled ? "فعال" : "غیرفعال"}</Badge>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

export default CapabilitiesPage;