import { Skeleton } from "@/components/ui/skeleton";

export function UploadDropzoneSkeleton() {
  return (
    <div className="glass-panel panel-elevated rounded-2xl border border-white/10 p-6">
      <div className="mx-auto flex max-w-md flex-col items-center gap-3 text-center">
        <Skeleton className="size-12 rounded-2xl" />
        <Skeleton className="h-4 w-44" />
        <Skeleton className="h-3 w-64" />
        <div className="flex gap-2">
          <Skeleton className="h-8 w-28" />
          <Skeleton className="h-8 w-20" />
        </div>
      </div>
    </div>
  );
}

export function VideoPreviewSkeleton() {
  return (
    <div className="glass-panel panel-elevated overflow-hidden rounded-2xl border border-white/10">
      <Skeleton className="aspect-video w-full rounded-none" />
    </div>
  );
}

export function TimelineScrubberSkeleton() {
  return (
    <div className="glass-panel rounded-xl border border-white/10 p-4">
      <div className="mb-3 flex justify-between">
        <Skeleton className="h-3 w-24" />
        <Skeleton className="h-3 w-16" />
      </div>
      <Skeleton className="h-2 w-full rounded-full" />
      <div className="mt-3 flex gap-2">
        <Skeleton className="h-8 w-24" />
        <Skeleton className="h-8 w-24" />
      </div>
    </div>
  );
}

export function MetadataPanelSkeleton() {
  return (
    <div className="glass-panel rounded-2xl border border-white/10 p-4">
      <Skeleton className="h-5 w-32" />
      <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {Array.from({ length: 6 }, (_, index) => (
          <div key={`metadata-skeleton-${index}`} className="rounded-lg border border-white/10 bg-white/5 p-3">
            <Skeleton className="h-3 w-20" />
            <Skeleton className="mt-2 h-4 w-24" />
          </div>
        ))}
      </div>
    </div>
  );
}

export function ToolPageSkeleton() {
  return (
    <div className="space-y-4">
      <UploadDropzoneSkeleton />
      <MetadataPanelSkeleton />
      <VideoPreviewSkeleton />
      <TimelineScrubberSkeleton />
    </div>
  );
}
