"use client";

import { cn } from "@/lib/utils";

interface SkeletonProps {
  className?: string;
  variant?: "text" | "title" | "avatar" | "card" | "image" | "button" | "circle";
  width?: string | number;
  height?: string | number;
  count?: number;
}

export function Skeleton({
  className,
  variant = "text",
  width,
  height,
  count = 1,
}: SkeletonProps) {
  const variantClasses = {
    text: "skeleton skeleton-text h-4",
    title: "skeleton skeleton-title h-6",
    avatar: "skeleton skeleton-avatar w-10 h-10",
    card: "skeleton skeleton-card",
    image: "skeleton skeleton-image",
    button: "skeleton skeleton-button",
    circle: "skeleton rounded-full",
  };

  const style: React.CSSProperties = {};
  if (width) style.width = typeof width === "number" ? `${width}px` : width;
  if (height) style.height = typeof height === "number" ? `${height}px` : height;

  if (count > 1) {
    return (
      <div className="space-y-2">
        {Array.from({ length: count }).map((_, i) => (
          <div
            key={i}
            className={cn(variantClasses[variant], className)}
            style={style}
          />
        ))}
      </div>
    );
  }

  return (
    <div className={cn(variantClasses[variant], className)} style={style} />
  );
}

export function CardSkeleton({ className }: { className?: string }) {
  return (
    <div className={cn("skeleton skeleton-card p-4 space-y-3", className)}>
      <Skeleton variant="image" className="w-full h-40" />
      <Skeleton variant="title" width="70%" />
      <Skeleton variant="text" width="90%" />
      <Skeleton variant="text" width="60%" />
      <div className="flex gap-2 mt-4">
        <Skeleton variant="button" width={80} />
        <Skeleton variant="button" width={80} />
      </div>
    </div>
  );
}

export function TableRowSkeleton({ columns = 5 }: { columns?: number }) {
  return (
    <div className="flex items-center gap-4 p-4 border-b">
      {Array.from({ length: columns }).map((_, i) => (
        <Skeleton
          key={i}
          variant="text"
          className="flex-1"
          width={i === 0 ? 40 : undefined}
        />
      ))}
    </div>
  );
}

export function ListSkeleton({
  count = 3,
  type = "card",
}: {
  count?: number;
  type?: "card" | "row";
}) {
  if (type === "row") {
    return (
      <div className="space-y-0">
        {Array.from({ length: count }).map((_, i) => (
          <TableRowSkeleton key={i} />
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {Array.from({ length: count }).map((_, i) => (
        <CardSkeleton key={i} />
      ))}
    </div>
  );
}

export function ProfileSkeleton() {
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Skeleton variant="avatar" width={80} height={80} />
        <div className="space-y-2 flex-1">
          <Skeleton variant="title" width="40%" />
          <Skeleton variant="text" width="60%" />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <Skeleton variant="card" height={100} />
        <Skeleton variant="card" height={100} />
      </div>
    </div>
  );
}

export function FilterSkeleton() {
  return (
    <div className="filter-container p-4 space-y-3">
      <div className="flex flex-wrap gap-2">
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton
            key={i}
            variant="button"
            width={80 + i * 10}
            height={36}
            className="rounded-full"
          />
        ))}
      </div>
    </div>
  );
}

export default Skeleton;