import clsx from "clsx";

const variants = {
  text: "h-4 rounded-md",
  title: "h-7 rounded-lg",
  avatar: "rounded-full",
  button: "h-10 rounded-xl",
  card: "rounded-3xl",
};

const sizes = {
  xs: "w-16",
  sm: "w-24",
  md: "w-40",
  lg: "w-64",
  xl: "w-full",
};

export default function Skeleton({
  variant = "text",
  width,
  height,
  size = "md",
  className = "",
  animate = true,
  style = {},
  ...props
}) {
  const computedStyle = { ...style };

  if (width) {
    computedStyle.width = typeof width === "number" ? `${width}px` : width;
  }

  if (height) {
    computedStyle.height = typeof height === "number" ? `${height}px` : height;
  }

  return (
    <div
      style={computedStyle}
      aria-hidden="true"
      className={clsx(
        "bg-slate-200 dark:bg-slate-800", // Soft slate in light mode, dark in dark mode
        animate && "animate-pulse",
        variants[variant],
        !width && sizes[size],
        variant === "avatar" && !width && "h-12 w-12",
        variant === "button" && !width && "w-32",
        variant === "card" && !width && "h-48 w-full",
        className
      )}
      {...props}
    />
  );
}

export function SkeletonCard() {
  return (
    <div className="rounded-3xl border border-slate-200 bg-white p-6 dark:border-slate-800 dark:bg-slate-900">
      <Skeleton variant="title" size="sm" />

      <div className="mt-6 space-y-3">
        <Skeleton size="xl" />
        <Skeleton size="lg" />
        <Skeleton size="md" />
      </div>

      <div className="mt-8 flex items-center justify-between">
        <Skeleton variant="button" size="sm" />
        <Skeleton variant="avatar" />
      </div>
    </div>
  );
}

export function SkeletonTable({ rows = 5 }) {
  return (
    <div className="overflow-hidden rounded-3xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div className="border-b border-slate-200 p-6 dark:border-slate-800">
        <Skeleton variant="title" size="sm" />
      </div>

      <div className="divide-y divide-slate-200 dark:divide-slate-800">
        {Array.from({ length: rows }).map((_, index) => (
          <div
            key={index}
            className="flex items-center gap-6 px-6 py-5"
          >
            <Skeleton variant="avatar" />

            <div className="flex-1 space-y-2">
              <Skeleton size="md" />
              <Skeleton size="lg" />
            </div>

            <Skeleton variant="button" size="xs" />
          </div>
        ))}
      </div>
    </div>
  );
}

export function SkeletonDashboard() {
  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
        {Array.from({ length: 4 }).map((_, index) => (
          <SkeletonCard key={index} />
        ))}
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div className="xl:col-span-2">
          <Skeleton variant="card" className="h-[420px]" />
        </div>

        <Skeleton variant="card" className="h-[420px]" />
      </div>
    </div>
  );
}