"use client";

import Link from "next/link";
import { communicationApi } from "@/modules/communication/services/communication-api";
import { useTenantId } from "@/hooks/useTenantId";
import { useQuery } from "@tanstack/react-query";
import { CommunicationPageLoader } from "@/modules/communication/pages/shared";
import { PageHeader, Card, CardContent, Button } from "@/components/ds";
import { CommunicationBreadcrumbs } from "@/modules/communication/components/CommunicationBreadcrumbs";

export function SettingsPage() {
  const { tenantId } = useTenantId();
  const q = useQuery({
    queryKey: ["communication", tenantId, "settings-providers"],
    queryFn: () => communicationApi.providers.list(tenantId!),
    enabled: !!tenantId,
  });
  if (!tenantId || q.isLoading) return <CommunicationPageLoader />;
  return (
    <div className="space-y-6">
      <CommunicationBreadcrumbs current="تنظیمات" />
      <PageHeader title="تنظیمات" description="مدیریت ارائه‌دهندگان و پیکربندی SMS" />
      <Card>
        <CardContent className="space-y-2 p-4">
          <p className="text-sm text-[var(--muted)]">{q.data?.length ?? 0} ارائه‌دهنده فعال</p>
          <Link href="/communication/sms/providers"><Button variant="outline">مدیریت ارائه‌دهندگان</Button></Link>
        </CardContent>
      </Card>
    </div>
  );
}

export default SettingsPage;