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

/** Page title + optional action buttons, matching the common page header layout. */
export function PageHeaderSkeleton({
  actions = 0,
  subtitle = false,
}: {
  actions?: number;
  subtitle?: boolean;
}) {
  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="space-y-2">
        <Skeleton className="h-9 w-48" />
        {subtitle && <Skeleton className="h-4 w-64" />}
      </div>
      {actions > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          {Array.from({ length: actions }).map((_, i) => (
            <Skeleton key={i} className="h-8 w-24" />
          ))}
        </div>
      )}
    </div>
  );
}

/** Mirrors the recipe GridCard: aspect-video thumb, title, description, meta row. */
export function RecipeCardSkeleton() {
  return (
    <div className="overflow-hidden rounded-xl border bg-card flex flex-col h-full">
      <Skeleton className="aspect-video w-full rounded-none" />
      <div className="flex flex-col flex-1 p-3 gap-2">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-1/2" />
      </div>
      <div className="px-3 pb-3 flex items-center justify-between">
        <Skeleton className="h-3 w-24" />
        <Skeleton className="h-3 w-3" />
      </div>
    </div>
  );
}

/** Grid of RecipeCardSkeletons; default classes match RecipesGrid's grid view. */
export function RecipeCardGridSkeleton({
  count = 8,
  className,
}: {
  count?: number;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 items-start",
        className,
      )}
    >
      {Array.from({ length: count }).map((_, i) => (
        <RecipeCardSkeleton key={i} />
      ))}
    </div>
  );
}

/** Mirrors a feed article: avatar + author line, title, description, meta chips. */
export function FeedItemSkeleton() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <Skeleton className="h-8 w-8 rounded-full" />
        <Skeleton className="h-4 w-32" />
      </div>
      <Skeleton className="h-6 w-2/3" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-1/2" />
      <div className="flex items-center gap-3">
        <Skeleton className="h-4 w-12" />
        <Skeleton className="h-4 w-10" />
        <Skeleton className="h-4 w-10" />
      </div>
    </div>
  );
}

/** Bordered row card, matching list rows (shopping lists, pantry items, etc.). */
export function ListRowSkeleton() {
  return (
    <div className="rounded-xl border p-4 space-y-2">
      <Skeleton className="h-5 w-1/2" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-3 w-16" />
    </div>
  );
}

/** Small bordered info card, matching search/explore result cards. */
export function InfoCardSkeleton() {
  return (
    <div className="rounded-lg border bg-card p-4 space-y-3">
      <Skeleton className="h-5 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
      <Skeleton className="h-3 w-2/3" />
    </div>
  );
}

/** Square photo tile with a caption line, matching profile recipe tiles. */
export function SquareTileSkeleton() {
  return (
    <div className="rounded-xl overflow-hidden border bg-card">
      <Skeleton className="aspect-square w-full rounded-none" />
      <div className="p-2">
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  );
}

/** Admin overview stat card. */
export function StatCardSkeleton() {
  return (
    <div className="rounded-xl border bg-card p-4 space-y-3">
      <div className="flex items-center justify-between">
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-4 w-4" />
      </div>
      <Skeleton className="h-8 w-16" />
    </div>
  );
}

/** Simple bordered table: one header row and `rows` body rows. */
export function TableSkeleton({ rows = 8 }: { rows?: number }) {
  return (
    <div className="rounded-xl border divide-y overflow-hidden">
      <div className="flex items-center gap-4 px-4 py-3 bg-muted/40">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-4 w-24" />
        <Skeleton className="h-4 w-20 ml-auto" />
      </div>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-4 px-4 py-3">
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-4 w-24" />
          <Skeleton className="h-4 w-16 ml-auto" />
        </div>
      ))}
    </div>
  );
}
