import type { FC } from "react"
import { Skeleton } from "@/components/ui/skeleton"

/**
 * Skeleton loader for MetricCard component
 * Mimics the structure of the actual MetricCard with icon, title, value, and optional chart
 */
export const MetricCardSkeleton: FC<{ showChart?: boolean }> = ({ showChart = true }) => (
  <div className="bg-card rounded-xl border border-border p-4 h-full">
    <div className="flex items-start justify-between mb-2">
      <div className="flex-1">
        {/* Title skeleton */}
        <Skeleton className="h-4 w-32 mb-2" />
        {/* Value skeleton */}
        <Skeleton className="h-8 w-20" />
      </div>
      {/* Icon skeleton */}
      <Skeleton className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl" />
    </div>

    {showChart ? (
      /* Chart skeleton */
      <div className="mt-2">
        <Skeleton className="h-[60px] w-full rounded-md" />
      </div>
    ) : (
      /* Time text skeleton for cards without charts */
      <div className="mt-2">
        <Skeleton className="h-3 w-24" />
      </div>
    )}
  </div>
)

/**
 * Skeleton loader for Pull Request Activity Card
 * Mimics the PR activity chart card structure
 */
export const PullRequestActivityCardSkeleton: FC = () => (
  <div className="bg-card rounded-xl border border-border p-4 h-full flex flex-col">
    <div className="flex items-center justify-between mb-3">
      <div>
        <Skeleton className="h-5 w-40 mb-1" />
        <Skeleton className="h-3 w-28" />
      </div>
      <Skeleton className="h-6 w-20 rounded-md" />
    </div>

    {/* Stats row skeleton */}
    <div className="flex justify-between text-xs mb-3">
      {[1, 2, 3].map(i => (
        <div key={i} className="flex items-center gap-1">
          <Skeleton className="w-5 h-5 rounded-md" />
          <div>
            <Skeleton className="h-3 w-12 mb-1" />
            <Skeleton className="h-4 w-8" />
          </div>
        </div>
      ))}
    </div>

    {/* Chart skeleton */}
    <div className="flex-1 min-h-0">
      <Skeleton className="h-full w-full rounded-md" />
    </div>
  </div>
)

/**
 * Skeleton loader for Active Users Leaderboard
 * Mimics the leaderboard structure with user rows
 */
export const ActiveUsersLeaderboardSkeleton: FC = () => (
  <div className="bg-card rounded-xl border border-border p-4 h-full flex flex-col">
    <div className="mb-3">
      <Skeleton className="h-5 w-40 mb-1" />
      <Skeleton className="h-3 w-28" />
    </div>

    {/* User rows skeleton */}
    <div className="space-y-3 flex-1">
      {[1, 2, 3, 4, 5].map(i => (
        <div key={i} className="flex items-center gap-3 pb-3 border-b border-border last:border-0">
          {/* Rank */}
          <Skeleton className="h-6 w-6 rounded-full" />
          {/* Avatar */}
          <Skeleton className="h-9 w-9 rounded-full" />
          {/* Username and count */}
          <div className="flex-1">
            <Skeleton className="h-4 w-24 mb-1" />
            <Skeleton className="h-3 w-16" />
          </div>
          {/* Activity indicator */}
          <Skeleton className="h-6 w-12 rounded-full" />
        </div>
      ))}
    </div>
  </div>
)

/**
 * Skeleton loader for OptimizationPRsTable component
 * Mimics the table structure with header, filter controls, and row placeholders
 */
export const OptimizationPRsTableSkeleton: FC = () => (
  <div className="bg-card rounded-xl border border-border p-4 sm:p-5">
    {/* Header */}
    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
      <div>
        <Skeleton className="h-5 w-52 mb-1.5" />
        <Skeleton className="h-3.5 w-72" />
      </div>
      <div className="flex items-center gap-2">
        <Skeleton className="h-8 w-[130px] rounded-md" />
        <Skeleton className="h-8 w-8 rounded-md" />
      </div>
    </div>

    {/* Table */}
    <div className="rounded-lg border border-border overflow-hidden">
      {/* Table header */}
      <div className="bg-muted/30 px-4 py-3 flex items-center">
        <Skeleton className="h-4 w-40 mr-auto" />
        <Skeleton className="h-4 w-16 mx-4 hidden md:block" />
        <Skeleton className="h-4 w-16 mx-4 hidden lg:block" />
        <Skeleton className="h-4 w-20 mx-4 hidden sm:block" />
        <Skeleton className="h-4 w-16" />
      </div>
      {/* Table rows */}
      {[1, 2, 3, 4, 5].map(i => (
        <div key={i} className="px-4 py-3 border-t border-border flex items-center">
          <div className="flex items-center gap-3 flex-1">
            <Skeleton className="h-8 w-8 rounded-full flex-shrink-0" />
            <div className="space-y-1.5 flex-1">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-3 w-48" />
            </div>
          </div>
          <Skeleton className="h-6 w-20 rounded-full mx-4 hidden md:block" />
          <Skeleton className="h-6 w-16 mx-4 hidden lg:block" />
          <Skeleton className="h-4 w-24 mx-4 hidden sm:block" />
          <Skeleton className="h-8 w-20 rounded-md" />
        </div>
      ))}
    </div>
  </div>
)

/**
 * Complete Dashboard Skeleton Loader
 * Displays skeleton placeholders matching the full dashboard layout.
 * IMPORTANT: This skeleton must match the exact structure and spacing of
 * dashboard/page.tsx to prevent Cumulative Layout Shift (CLS).
 */
export const DashboardSkeleton: FC = () => {
  return (
    <div className="min-h-screen pb-8 py-6 sm:py-8 px-4 sm:px-6 max-w-[1400px] mx-auto">
      {/* Header skeleton */}
      <div className="mb-6 sm:mb-8">
        <div className="flex items-center justify-between mb-2">
          <Skeleton className="h-8 w-40" />
          <Skeleton className="h-6 w-24 rounded-md" />
        </div>
      </div>

      {/* Optimization PRs Table skeleton — must appear before stats grid to match page layout */}
      <div className="mb-6 sm:mb-8">
        <OptimizationPRsTableSkeleton />
      </div>

      {/* Main metrics grid */}
      <div className="grid grid-cols-1 gap-3 sm:gap-5 mb-6 sm:mb-8">
        {/* Top 2 large metric cards with charts */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-5">
          <MetricCardSkeleton showChart={true} />
          <MetricCardSkeleton showChart={true} />
        </div>

        {/* Bottom 4 smaller metric cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 sm:gap-5">
          <MetricCardSkeleton showChart={false} />
          <MetricCardSkeleton showChart={false} />
          <MetricCardSkeleton showChart={false} />
          <MetricCardSkeleton showChart={false} />
        </div>
      </div>

      {/* Activity cards grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-5 mb-6 sm:mb-8 h-96 md:h-[500px]">
        <PullRequestActivityCardSkeleton />
        <ActiveUsersLeaderboardSkeleton />
      </div>
    </div>
  )
}
