"use client";

/**
 * Loading placeholder for the campaigns dashboard.
 *
 * Mirrors the real layout — KPI row, analytics card, table — so the page doesn't
 * reflow when data lands. Shown while the first signup fetch is in flight; the
 * table and charts keep their own finer-grained skeletons after that.
 */

import { Card, Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";

export function DashboardSkeleton() {
  return (
    <Stack gap="md">
      {/* KPI tiles */}
      <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={`tile-${i}`} height={104} radius="lg" />
        ))}
      </SimpleGrid>

      {/* Analytics card: two donuts side by side, country panel below. */}
      <Card withBorder radius="lg" p="md">
        <Group justify="space-between" mb="md">
          <Skeleton height={16} width={90} radius="sm" />
          <Skeleton height={22} width={130} radius="sm" />
        </Group>
        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg" mb="lg">
          <Stack gap="xs">
            <Skeleton height={14} width={140} radius="sm" />
            <Skeleton height={220} radius="md" />
          </Stack>
          <Stack gap="xs">
            <Skeleton height={14} width={170} radius="sm" />
            <Skeleton height={220} radius="md" />
          </Stack>
        </SimpleGrid>
        <Stack gap="sm">
          <Group gap="sm">
            <Skeleton height={28} width={80} radius="md" />
            <Skeleton height={28} width={80} radius="md" />
            <Skeleton height={28} width={80} radius="md" />
          </Group>
          <Skeleton height={300} radius="md" />
        </Stack>
      </Card>

      {/* Campaigns table */}
      <Card withBorder radius="lg" p="lg">
        <Group justify="space-between" mb="md">
          <Skeleton height={18} width={130} radius="sm" />
          <Group gap="sm">
            <Skeleton height={34} width={240} radius="sm" />
            <Skeleton height={34} width={200} radius="sm" />
          </Group>
        </Group>
        <Skeleton height={34} radius="sm" mb={8} />
        {Array.from({ length: 6 }).map((_, i) => (
          <Skeleton key={`row-${i}`} height={26} radius="sm" mb={6} />
        ))}
      </Card>
    </Stack>
  );
}