"use client";

import { useQuery } from "@tanstack/react-query";
import { beautyBusinessApi } from "@/modules/beauty/services/beauty-business-api";
import { useTenantId } from "@/hooks/useTenantId";
import {
  PageHeader,
  DataTable,
  EmptyState,
  LoadingState,
  ErrorState,
  Badge,
} from "@/components/ds";

export default function IntegrationsPage() {
  const { tenantId } = useTenantId();

  const loyaltyQ = useQuery({
    queryKey: ["beauty", tenantId, "loyalty-integrations"],
    queryFn: () => beautyBusinessApi.loyaltyIntegrations.list(tenantId!),
    enabled: !!tenantId,
  });

  const commQ = useQuery({
    queryKey: ["beauty", tenantId, "communication-integrations"],
    queryFn: () => beautyBusinessApi.communicationIntegrations.list(tenantId!),
    enabled: !!tenantId,
  });

  const dispatchQ = useQuery({
    queryKey: ["beauty", tenantId, "integration-dispatches"],
    queryFn: () => beautyBusinessApi.integrationDispatches.list(tenantId!),
    enabled: !!tenantId,
  });

  if (!tenantId || loyaltyQ.isLoading || commQ.isLoading) return <LoadingState />;
  const err = loyaltyQ.error || commQ.error || dispatchQ.error;
  if (err) {
    return <ErrorState message={err.message} onRetry={() => loyaltyQ.refetch()} />;
  }

  return (
    <div className="space-y-8">
      <PageHeader title="یکپارچه‌سازی‌ها" description="اتصال به وفاداری، ارتباطات و dispatch." />

      <section>
        <h2 className="mb-3 font-semibold text-secondary">وفاداری</h2>
        <DataTable
          columns={[
            { key: "code", header: "کد" },
            { key: "name", header: "نام" },
            {
              key: "status",
              header: "وضعیت",
              render: (r) => <Badge>{String(r.status)}</Badge>,
            },
          ]}
          rows={(loyaltyQ.data ?? []) as unknown as Record<string, unknown>[]}
          empty={<EmptyState title="یکپارچه‌سازی وفاداری ثبت نشده" />}
        />
      </section>

      <section>
        <h2 className="mb-3 font-semibold text-secondary">ارتباطات</h2>
        <DataTable
          columns={[
            { key: "code", header: "کد" },
            { key: "name", header: "نام" },
            {
              key: "status",
              header: "وضعیت",
              render: (r) => <Badge>{String(r.status)}</Badge>,
            },
          ]}
          rows={(commQ.data ?? []) as unknown as Record<string, unknown>[]}
          empty={<EmptyState title="یکپارچه‌سازی ارتباطات ثبت نشده" />}
        />
      </section>

      <section>
        <h2 className="mb-3 font-semibold text-secondary">Dispatch رویدادها</h2>
        <DataTable
          columns={[
            { key: "integration_kind", header: "نوع" },
            { key: "event_type", header: "رویداد" },
            {
              key: "status",
              header: "وضعیت",
              render: (r) => <Badge>{String(r.status)}</Badge>,
            },
          ]}
          rows={(dispatchQ.data ?? []) as unknown as Record<string, unknown>[]}
          empty={<EmptyState title="dispatch ثبت نشده" />}
        />
      </section>
    </div>
  );
}
