'use client';

import {Card} from '@astryxdesign/core/Card';
import {Grid} from '@astryxdesign/core/Grid';
import {VStack} from '@astryxdesign/core/Layout';
import {Skeleton} from '@astryxdesign/core/Skeleton';

/**
 * The named loading shapes.
 *
 * Skeletons were previously written inline with hand-picked pixel heights —
 * 38 here, 16/30/40 there — which meant every panel resolved with a small
 * layout jump because the placeholder never quite matched the real content.
 *
 * A skeleton's only job is to reserve the right space. Naming the shapes makes
 * that checkable: if a panel jumps on resolve, its skeleton is wrong, and
 * there is one place to fix it.
 */

/** Rows of equal height — activity feeds, table bodies, list panels. */
export function SkeletonRows({
  count = 5,
  height = 38,
}: {
  count?: number;
  height?: number;
}) {
  return (
    <VStack gap={3}>
      {Array.from({length: count}, (_, i) => (
        <Skeleton key={i} height={height} width="100%" />
      ))}
    </VStack>
  );
}

/** Matches MetricCard: label, value, sparkline. */
export function SkeletonMetric() {
  return (
    <Card>
      <VStack gap={3}>
        <Skeleton height={16} width="45%" />
        <Skeleton height={30} width="65%" />
        <Skeleton height={40} width="100%" />
      </VStack>
    </Card>
  );
}

/** A grid of metric placeholders, matching the real grid's column count. */
export function SkeletonMetricGrid({
  count = 4,
  columns,
}: {
  count?: number;
  columns: number;
}) {
  return (
    <Grid columns={columns} gap={4}>
      {Array.from({length: count}, (_, i) => (
        <SkeletonMetric key={i} />
      ))}
    </Grid>
  );
}

/** Reserves a chart's exact plotting height so the card cannot jump. */
export function SkeletonChart({height = 260}: {height?: number}) {
  return <Skeleton height={height} width="100%" />;
}

/** A grid of card placeholders — store grid, reward grid, staff grid. */
export function SkeletonCardGrid({
  count = 6,
  height = 190,
  minWidth = 320,
}: {
  count?: number;
  height?: number;
  minWidth?: number;
}) {
  return (
    <Grid columns={{minWidth, repeat: 'fit'}} gap={4}>
      {Array.from({length: count}, (_, i) => (
        <Skeleton key={i} height={height} width="100%" />
      ))}
    </Grid>
  );
}
