"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import Layout from "@/components/layout/layout";
import { Loader2 } from "lucide-react";

export default function DashboardLoading() {
  return (
    <Layout>
      <div className="space-y-6 animate-in fade-in duration-500">
        {/* Header skeleton with greeting & quote */}
        <div>
          <Skeleton className="h-8 w-72 mb-2" />
          <Skeleton className="h-4 w-96" />
        </div>

        {/* Order statistics skeletons */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[...Array(4)].map((_, i) => (
            <Card key={i} className="border-border/40 shadow-sm">
              <CardHeader className="pb-2">
                <div className="text-sm text-muted-foreground">
                  <Skeleton className="h-4 w-24" />
                </div>
                <div className="flex justify-between items-center">
                  <CardTitle>
                    <Skeleton className="h-7 w-16" />
                  </CardTitle>
                  <Skeleton className="h-8 w-8 rounded-full" />
                </div>
              </CardHeader>
            </Card>
          ))}
        </div>

        {/* Best selling products skeleton */}
        <Card className="border-border/40 shadow-sm mt-8 relative">
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
              <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
              <p className="text-lg font-medium">Loading dashboard data...</p>
            </div>
          </div>
          
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <CardTitle>
                <Skeleton className="h-6 w-52" />
              </CardTitle>
              <div className="text-sm text-muted-foreground">
                <Skeleton className="h-4 w-80 mt-1" />
              </div>
            </div>
          </CardHeader>
          
          <CardContent className="opacity-30">
            <div className="space-y-4">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="flex items-center gap-4">
                  <Skeleton className="h-12 w-12 rounded-md" />
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-40" />
                    <Skeleton className="h-4 w-20" />
                  </div>
                  <div className="ml-auto text-right">
                    <Skeleton className="h-4 w-16 ml-auto" />
                    <Skeleton className="h-4 w-16 ml-auto mt-2" />
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
}