"use client";

interface SkeletonProps {
  className?: string;
  variant?: "text" | "circular" | "rectangular";
  style?: React.CSSProperties;
}

export default function Skeleton({ className = "", variant = "rectangular", style }: SkeletonProps) {
  const baseClasses = "relative overflow-hidden bg-gray-200/80 dark:bg-white/[0.07]";
  const variantClasses = {
    text: "rounded-md h-4 w-full",
    circular: "rounded-full",
    rectangular: "rounded-xl",
  };
  return (
    <div className={`${baseClasses} ${variantClasses[variant]} ${className}`} style={style} aria-hidden>
      <div className="absolute inset-0 animate-shimmer" />
    </div>
  );
}

/* Preset skeleton layouts */

export function SkeletonCard() {
  return (
    <div className="card p-3 sm:p-4">
      <div className="flex items-center gap-3">
        <Skeleton variant="circular" className="w-10 h-10 flex-shrink-0" />
        <div className="flex-1 space-y-2">
          <Skeleton variant="text" className="h-4 w-3/4" />
          <Skeleton variant="text" className="h-3 w-1/2" />
        </div>
      </div>
    </div>
  );
}

export function SkeletonStat() {
  return (
    <div className="card p-3.5 sm:p-4 flex items-center gap-3">
      <Skeleton className="w-10 h-10 flex-shrink-0 rounded-xl" />
      <div className="flex-1 space-y-2">
        <Skeleton variant="text" className="h-5 w-14" />
        <Skeleton variant="text" className="h-3 w-20" />
      </div>
    </div>
  );
}

export function SkeletonFileCard() {
  return (
    <div className="card shrink-0 w-[150px] sm:w-[176px] p-2">
      <Skeleton className="w-full aspect-[4/3] rounded-xl mb-2" />
      <Skeleton variant="text" className="h-3 w-4/5 mb-1.5 mx-1" />
      <Skeleton variant="text" className="h-2.5 w-1/3 mx-1" />
    </div>
  );
}

export function SkeletonActivity() {
  return (
    <div className="flex items-start gap-3 px-1 py-2.5">
      <Skeleton className="w-9 h-9 flex-shrink-0 rounded-xl" />
      <div className="flex-1 space-y-1.5 pt-1">
        <Skeleton variant="text" className="h-3 w-3/4" />
        <Skeleton variant="text" className="h-2.5 w-1/3" />
      </div>
      <Skeleton variant="text" className="h-3 w-12 flex-shrink-0 mt-1" />
    </div>
  );
}

export function SkeletonRow() {
  return (
    <div className="flex items-center gap-3 px-2 h-11">
      <Skeleton className="w-8 h-8 rounded-lg flex-shrink-0" />
      <Skeleton variant="text" className="h-3 flex-1" />
      <Skeleton variant="text" className="h-3 w-12 flex-shrink-0" />
    </div>
  );
}

export function DashboardSkeleton() {
  return (
    <div className="p-3 sm:p-5 lg:p-6 space-y-4 sm:space-y-5 max-w-[1400px] mx-auto" aria-busy="true" aria-label="Chargement du tableau de bord">
      {/* Bandeau */}
      <div className="card p-5 sm:p-7 flex flex-col lg:flex-row lg:items-end gap-5 lg:gap-8 rounded-3xl">
        <div className="flex-1 space-y-3">
          <Skeleton variant="text" className="h-3 w-40" />
          <Skeleton variant="text" className="h-8 w-72" />
          <Skeleton variant="text" className="h-4 w-56" />
        </div>
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 lg:w-[560px] shrink-0">
          {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-16 rounded-2xl" />)}
        </div>
      </div>

      {/* KPI */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-3">
        {[...Array(5)].map((_, i) => <SkeletonStat key={i} />)}
      </div>

      {/* Stockage + activité */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-5">
        <div className="card p-4 sm:p-5 lg:col-span-5">
          <Skeleton variant="text" className="h-3 w-24 mb-4" />
          <div className="flex flex-col sm:flex-row sm:items-center gap-5">
            <Skeleton variant="circular" className="w-[168px] h-[168px] mx-auto sm:mx-0 shrink-0" />
            <div className="flex-1 space-y-2.5">
              {[...Array(5)].map((_, i) => <Skeleton key={i} variant="text" className="h-3.5" />)}
            </div>
          </div>
        </div>
        <div className="card p-4 sm:p-5 lg:col-span-7">
          <Skeleton variant="text" className="h-3 w-24 mb-4" />
          <div className="flex items-baseline gap-4 mb-3">
            <Skeleton variant="text" className="h-7 w-16" />
            <Skeleton variant="text" className="h-7 w-16" />
          </div>
          <div className="flex items-end gap-1.5 h-[150px] ml-8">
            {[...Array(14)].map((_, i) => <Skeleton key={i} className="flex-1 rounded-t-[4px]" style={{ height: `${20 + ((i * 37) % 70)}%` }} />)}
          </div>
        </div>
      </div>

      {/* Reprendre */}
      <div>
        <Skeleton variant="text" className="h-3 w-28 mb-3" />
        <div className="flex gap-2.5 sm:gap-3 overflow-hidden">
          {[...Array(6)].map((_, i) => <SkeletonFileCard key={i} />)}
        </div>
      </div>

      {/* Timeline + latéral */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-5">
        <div className="card p-4 sm:p-5 lg:col-span-7">
          <Skeleton variant="text" className="h-3 w-32 mb-3" />
          {[...Array(6)].map((_, i) => <SkeletonActivity key={i} />)}
        </div>
        <div className="lg:col-span-5 space-y-4 sm:space-y-5">
          <div className="card p-4 sm:p-5">
            <Skeleton variant="text" className="h-3 w-20 mb-3" />
            {[...Array(4)].map((_, i) => <SkeletonRow key={i} />)}
          </div>
          <div className="card p-4 sm:p-5">
            <Skeleton variant="text" className="h-3 w-36 mb-3" />
            {[...Array(4)].map((_, i) => <SkeletonRow key={i} />)}
          </div>
        </div>
      </div>
    </div>
  );
}