import { Skeleton } from "@/components/ui/Skeleton";

export function AdminTableSkeleton({
  rows = 6,
  columns = 5,
}: {
  rows?: number;
  columns?: number;
}) {
  return (
    <div
      className="overflow-hidden rounded-[10px] border border-line/80 bg-surface shadow-pv"
      aria-busy="true"
      aria-live="polite"
    >
      <div className="border-b border-line/80 bg-[#FAFBFC] px-4 py-3">
        <div className="flex gap-6">
          {Array.from({ length: columns }).map((_, index) => (
            <Skeleton key={index} className="h-3 w-16" />
          ))}
        </div>
      </div>
      <div className="divide-y divide-line/80">
        {Array.from({ length: rows }).map((_, rowIndex) => (
          <div key={rowIndex} className="flex items-center gap-6 px-4 py-3.5">
            {Array.from({ length: columns }).map((_, colIndex) => (
              <Skeleton
                key={colIndex}
                className={colIndex === 0 ? "h-4 w-36" : "h-3.5 w-20"}
              />
            ))}
          </div>
        ))}
      </div>
      <p className="sr-only">Loading…</p>
    </div>
  );
}

export function AdminDetailSkeleton() {
  return (
    <div className="space-y-5" aria-busy="true" aria-live="polite">
      <div className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
        <Skeleton className="h-3 w-24" />
        <Skeleton className="mt-3 h-7 w-56" />
        <Skeleton className="mt-2 h-4 w-72 max-w-full" />
      </div>
      <div className="grid gap-4 lg:grid-cols-2">
        {Array.from({ length: 4 }).map((_, index) => (
          <div key={index} className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv">
            <Skeleton className="mb-3 h-4 w-28" />
            <div className="space-y-3">
              <Skeleton className="h-3.5 w-full" />
              <Skeleton className="h-3.5 w-5/6" />
              <Skeleton className="h-3.5 w-2/3" />
            </div>
          </div>
        ))}
      </div>
      <p className="sr-only">Loading…</p>
    </div>
  );
}

export function AdminDashboardSkeleton() {
  return (
    <div className="w-full min-w-0 space-y-7" aria-busy="true" aria-live="polite">
      <div className="flex flex-col gap-3 border-b border-line/80 pb-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="space-y-2">
          <Skeleton className="h-3.5 w-80 max-w-full" />
          <Skeleton className="h-3 w-28" />
        </div>
        <Skeleton className="h-8 w-20" />
      </div>

      <div className="space-y-3">
        <Skeleton className="h-4 w-40" />
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 8 }).map((_, index) => (
            <div
              key={index}
              className="rounded-[10px] border border-line/80 bg-surface px-4 py-3.5 shadow-pv"
            >
              <Skeleton className="h-3 w-24" />
              <Skeleton className="mt-3 h-7 w-20" />
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <div className="space-y-3">
          <Skeleton className="h-4 w-36" />
          <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv sm:p-5">
            <div className="flex flex-col items-center gap-4 lg:flex-row">
              <Skeleton className="size-[188px] shrink-0 rounded-full" />
              <div className="w-full min-w-0 space-y-2">
                <Skeleton className="h-3.5 w-full" />
                <Skeleton className="h-3.5 w-5/6" />
                <Skeleton className="h-3.5 w-2/3" />
                <Skeleton className="h-3.5 w-1/2" />
              </div>
            </div>
          </div>
        </div>
        <div className="space-y-3">
          <Skeleton className="h-4 w-48" />
          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
            {Array.from({ length: 4 }).map((_, index) => (
              <div
                key={index}
                className="rounded-[10px] border border-line/80 bg-surface p-3.5 shadow-pv"
              >
                <Skeleton className="h-3 w-24" />
                <Skeleton className="mt-2.5 h-6 w-10" />
              </div>
            ))}
          </div>
          <div className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv">
            <Skeleton className="mb-3 h-3 w-28" />
            <Skeleton className="h-2 w-full" />
            <Skeleton className="mt-3 h-2 w-4/5" />
            <Skeleton className="mt-3 h-2 w-3/5" />
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <Skeleton className="h-4 w-36" />
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5">
          {Array.from({ length: 5 }).map((_, index) => (
            <div
              key={index}
              className="rounded-[10px] border border-line/80 bg-surface p-3.5 shadow-pv"
            >
              <Skeleton className="h-3 w-24" />
              <Skeleton className="mt-2.5 h-6 w-20" />
            </div>
          ))}
        </div>
        <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
          <div className="min-w-0 space-y-0 overflow-hidden rounded-[10px] border border-line/80 bg-surface shadow-pv">
            {Array.from({ length: 5 }).map((_, index) => (
              <div key={index} className="border-b border-line/80 px-4 py-3 last:border-b-0">
                <Skeleton className="h-3.5 w-40" />
                <Skeleton className="mt-2 h-3 w-28" />
              </div>
            ))}
          </div>
          <div className="min-w-0 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv">
            <Skeleton className="mb-4 h-3 w-40" />
            <Skeleton className="h-[128px] w-full" />
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <Skeleton className="h-4 w-40" />
        <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
            {Array.from({ length: 6 }).map((_, index) => (
              <div
                key={index}
                className="rounded-[10px] border border-line/80 bg-surface p-3.5 shadow-pv"
              >
                <Skeleton className="h-3 w-16" />
                <Skeleton className="mt-2.5 h-5 w-10" />
              </div>
            ))}
          </div>
          <div className="min-w-0 space-y-3 rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv">
            <Skeleton className="h-4 w-28" />
            <Skeleton className="h-3.5 w-full" />
            <Skeleton className="h-3.5 w-5/6" />
            <Skeleton className="h-3.5 w-2/3" />
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <Skeleton className="h-4 w-36" />
        <div className="grid grid-cols-1 gap-2.5 xl:grid-cols-2">
          {Array.from({ length: 2 }).map((_, index) => (
            <div
              key={index}
              className="rounded-[10px] border border-line/80 bg-surface p-4 shadow-pv"
            >
              <Skeleton className="h-4 w-48" />
              <Skeleton className="mt-2 h-3 w-72 max-w-full" />
            </div>
          ))}
        </div>
      </div>

      <p className="sr-only">Loading metrics…</p>
    </div>
  );
}