'use client';

import {Card} from '@astryxdesign/core/Card';
import {Grid} from '@astryxdesign/core/Grid';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {StatusDot} from '@astryxdesign/core/StatusDot';
import {AsyncBoundary} from '@/shared/components/data/AsyncBoundary';
import {SkeletonMetricGrid} from '@/shared/components/patterns/LoadingState';
import {HoverLift} from '@/shared/components/motion/HoverLift';
import {AnimatedNumber} from '@/shared/components/motion/AnimatedNumber';
import {useMetricColumns} from '@/features/dashboard/components/KpiRow';
import {ATTENDANCE} from '@/features/staff/utils/attendance';
import {formatPct} from '@/shared/utils/format';
import type {StaffSummary} from '@/features/staff/types/staff';
import type {Resource} from '@/shared/hooks/useResource';
import type {StatusDotVariant} from '@astryxdesign/core/StatusDot';

/**
 * Attendance counts.
 *
 * Deliberately NOT MetricCard: these have no trend line and no
 * period-over-period delta — "present today" has nothing meaningful to
 * compare against last month. What they carry instead is a status dot and a
 * share-of-total, so they get their own small card rather than a MetricCard
 * with two empty slots.
 */
function CountCard({
  label,
  value,
  total,
  tone,
}: {
  label: string;
  value: number;
  total: number;
  tone: StatusDotVariant;
}) {
  const share = total === 0 ? 0 : (value / total) * 100;

  return (
    <HoverLift>
      <Card>
        <VStack gap={3}>
          <HStack gap={2} vAlign="center">
            <StatusDot variant={tone} label={label} />
            <Text size="sm" color="secondary">
              {label}
            </Text>
          </HStack>
          {/* Text, not Heading — a count is data, not a section title. */}
          <Text type="display-3">
            <AnimatedNumber
              value={value}
              format={(v) => String(Math.round(v))}
            />
          </Text>
          <Text size="xsm" color="secondary">
            {formatPct(share, 0)} of {total} rostered
          </Text>
        </VStack>
      </Card>
    </HoverLift>
  );
}

export function StaffKpis({resource}: {resource: Resource<StaffSummary>}) {
  const columns = useMetricColumns();

  return (
    <AsyncBoundary
      resource={resource}
      loading={<SkeletonMetricGrid columns={columns} />}
    >
      {(s) => (
        <Grid columns={columns} gap={4}>
          <CountCard
            label={ATTENDANCE.present.label}
            value={s.present}
            total={s.total}
            tone={ATTENDANCE.present.tone}
          />
          <CountCard
            label={ATTENDANCE.late.label}
            value={s.late}
            total={s.total}
            tone={ATTENDANCE.late.tone}
          />
          <CountCard
            label={ATTENDANCE.absent.label}
            value={s.absent}
            total={s.total}
            tone={ATTENDANCE.absent.tone}
          />
          <CountCard
            label="Total staff"
            value={s.total}
            total={s.total}
            tone="neutral"
          />
        </Grid>
      )}
    </AsyncBoundary>
  );
}
