"use client";

import { Suspense } from "react";
import { Skeleton, Stack, Text } from "@mantine/core";
import { ClientBillingHub } from "@/components/billing/ClientBillingHub";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { useAuthStore } from "@/store/authStore";

function BillingHubFallback() {
  return (
    <Stack gap="lg">
      <Skeleton height={48} radius="md" />
      <Skeleton height={160} radius="lg" />
      <Skeleton height={280} radius="lg" />
    </Stack>
  );
}

export default function AssinaturasDashboardPage() {
  const user = useAuthStore((s) => s.user);
  const isClient = user?.role === "client" || user?.role === "partner";

  if (isClient) {
    return (
      <Suspense fallback={<BillingHubFallback />}>
        <ClientBillingHub />
      </Suspense>
    );
  }

  return (
    <DashboardPage title="Assinaturas">
      <PageHeader
        title="Assinaturas"
        description="Gestão de planos e ciclos (visão administrativa)."
      />
      <Text c="dimmed">
        Use Planos e Addons para gerenciar o catálogo. Assinaturas de clientes no Financeiro.
      </Text>
    </DashboardPage>
  );
}