"use client";

import { useCommunicationCapabilities } from "@/modules/communication/hooks/useCommunicationCapabilities";
import { CommunicationPageLoader, CommunicationPageError } from "@/modules/communication/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { CommunicationBreadcrumbs } from "@/modules/communication/components/CommunicationBreadcrumbs";

export function CapabilitiesPage() {
  const q = useCommunicationCapabilities();
  if (q.isLoading) return <CommunicationPageLoader />;
  if (q.error) return <CommunicationPageError error={q.error} onRetry={() => q.refetch()} />;

  const features = q.data?.features ?? {};
  const channels = q.data?.channels ?? [];

  return (
    <div className="space-y-6">
      <CommunicationBreadcrumbs current="قابلیت‌ها" />
      <PageHeader title="قابلیت‌ها" description={`${q.data?.commercial_product} — فاز ${q.data?.phase}`} />
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {Object.entries(features).map(([k, v]) => (
          <Card key={k}>
            <CardContent className="flex items-center justify-between p-3">
              <span className="font-mono text-sm">{k}</span>
              <Badge tone={v ? "success" : "default"}>{v ? "فعال" : "غیرفعال"}</Badge>
            </CardContent>
          </Card>
        ))}
      </div>
      <Card>
        <CardContent className="p-4">
          <p className="mb-2 text-sm font-semibold">کانال‌ها</p>
          <div className="flex flex-wrap gap-2">
            {channels.map((c) => (
              <Badge key={c.channel} tone={c.status === "active" ? "success" : "warning"}>
                {c.channel}: {c.status}
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default CapabilitiesPage;