import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
} from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

function OverviewMetaSkeletonField({ className }: { className?: string }) {
  return (
    <div className={`flex items-center gap-3 ${className ?? ''}`}>
      <Skeleton className="size-5 shrink-0 rounded-lg" />
      <div className="min-w-0 space-y-2">
        <Skeleton className="h-3 w-24" />
        <Skeleton className="h-4 w-32 max-w-full" />
      </div>
    </div>
  );
}

function SummarySkeletonCard() {
  return (
    <div className="rounded-lg bg-muted/40 p-4">
      <Skeleton className="h-7 w-10" />
      <Skeleton className="mt-3 h-3 w-24 max-w-full" />
      <Skeleton className="mt-2 h-3 w-16" />
    </div>
  );
}

export function TicketOverviewHeaderSkeleton() {
  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div className="min-w-0 space-y-2">
        <Skeleton className="h-8 w-40" />
        <Skeleton className="h-3 w-36 max-w-full" />
      </div>

      <div className="flex shrink-0 items-center gap-2">
        <Skeleton className="h-8 w-28" />
      </div>
    </div>
  );
}

export function TicketOverviewCardSkeleton() {
  return (
    <div className="space-y-5" aria-label="Loading ticket overview">
      <Card>
        <CardContent className="grid gap-4 py-4 sm:grid-cols-3 sm:divide-x">
          <OverviewMetaSkeletonField className="sm:pr-4" />
          <OverviewMetaSkeletonField className="sm:px-4" />
          <OverviewMetaSkeletonField className="sm:pl-4" />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <Skeleton className="size-5 rounded-lg" />
            <Skeleton className="h-5 w-40" />
          </div>
          <CardAction>
            <Skeleton className="h-9 w-28" />
          </CardAction>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-3 lg:grid-cols-3 xl:grid-cols-6">
            {Array.from({ length: 6 }).map((_, index) => (
              <SummarySkeletonCard key={index} />
            ))}
          </div>

          <div className="grid gap-3 rounded-lg bg-muted/35 px-4 py-3 sm:grid-cols-3">
            {Array.from({ length: 3 }).map((_, index) => (
              <div
                key={index}
                className="flex items-center justify-center gap-2"
              >
                <Skeleton className="size-4 rounded-lg" />
                <Skeleton className="h-4 w-24" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}