"use client";

import { useCommunicationMonitoring } from "@/modules/communication/hooks/useCommunicationCapabilities";
import { useTenantId } from "@/hooks/useTenantId";
import { CommunicationPageLoader, CommunicationPageError } from "@/modules/communication/pages/shared";
import { PageHeader, StatCard, Card, CardContent } from "@/components/ds";
import { CommunicationBreadcrumbs } from "@/modules/communication/components/CommunicationBreadcrumbs";
import Link from "next/link";
import { Button } from "@/components/ds";

export function SmsDashboard() {
  const { tenantId } = useTenantId();
  const q = useCommunicationMonitoring(tenantId);

  if (!tenantId || q.isLoading) return <CommunicationPageLoader />;
  if (q.error) return <CommunicationPageError error={q.error} onRetry={() => q.refetch()} />;

  const m = q.data!;
  const msg = m.messages_by_status ?? {};
  const queue = m.queue_by_status ?? {};

  return (
    <div className="space-y-6">
      <CommunicationBreadcrumbs current="داشبورد SMS" />
      <PageHeader title="داشبورد SMS" description="Production Ready — mock + Payamak" />
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {Object.entries(msg).map(([k, v]) => (
          <StatCard key={k} label={`پیام: ${k}`} value={String(v)} />
        ))}
        {Object.entries(queue).map(([k, v]) => (
          <StatCard key={`q-${k}`} label={`صف: ${k}`} value={String(v)} />
        ))}
      </div>
      <Card>
        <CardContent className="flex flex-wrap gap-2 p-4">
          <Link href="/communication/sms/send"><Button>ارسال جدید</Button></Link>
          <Link href="/communication/sms/queue"><Button variant="outline">صف</Button></Link>
          <Link href="/communication/sms/delivery-reports"><Button variant="outline">گزارش تحویل</Button></Link>
        </CardContent>
      </Card>
    </div>
  );
}

export default SmsDashboard;