"use client";

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

type AeReportTreeSkeletonProps = {
  message?: string;
  className?: string;
};

function SkeletonMetricCells() {
  return (
    <>
      {Array.from({ length: 15 }).map((_, i) => (
        <td key={i} className="p-2 align-middle">
          <Skeleton className="ml-auto h-3.5 w-14 rounded bg-border/30" />
        </td>
      ))}
    </>
  );
}

export function AeReportTreeSkeleton({
  message = "Loading AE report…",
  className,
}: AeReportTreeSkeletonProps) {
  return (
    <div
      className={cn("flex flex-col gap-4", className)}
      aria-busy="true"
      aria-live="polite"
      role="status"
    >
      <div className="flex items-center gap-3 rounded-xl border border-[#6C63FF]/20 bg-[#6C63FF]/5 px-4 py-3">
        <Loader variant="circular-progress" size="sm" className="text-[#6C63FF] shrink-0" />
        <p className="text-[13px] font-medium font-['Lexend_Deca'] text-gray-700">{message}</p>
      </div>

      <div className="overflow-x-auto rounded-[14px] border border-white bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] animate-pulse">
        <table className="w-full min-w-[1200px] border-collapse text-sm">
          <thead>
            <tr className="border-b border-border/40">
              <th className="sticky left-0 z-20 bg-[#f4f6ff] p-3 text-left min-w-[220px]">
                <Skeleton className="h-3.5 w-36 rounded bg-border/40" />
              </th>
              {Array.from({ length: 15 }).map((_, i) => (
                <th key={i} className="p-3">
                  <Skeleton className="ml-auto h-3 w-16 rounded bg-border/35" />
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: 4 }).map((_, divisionIndex) => (
              <tr key={divisionIndex} className="border-b border-border/25 bg-[#e3e4f4]/60">
                <td className="sticky left-0 z-10 bg-[#e3e4f4] p-3">
                  <div className="flex items-center gap-2">
                    <Skeleton className="size-4 rounded bg-border/40" />
                    <Skeleton className="h-4 w-32 rounded bg-border/45" />
                  </div>
                </td>
                <SkeletonMetricCells />
              </tr>
            ))}
            {Array.from({ length: 3 }).map((_, teamIndex) => (
              <tr key={`team-${teamIndex}`} className="border-b border-border/20 bg-[#eceef8]/50">
                <td className="sticky left-0 z-10 bg-[#eceef8] p-3 pl-8">
                  <div className="flex items-center gap-2">
                    <Skeleton className="size-4 rounded bg-border/35" />
                    <Skeleton className="h-3.5 w-28 rounded bg-border/40" />
                  </div>
                </td>
                <SkeletonMetricCells />
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
