"use client"

import React 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
 */
const MetricCardSkeleton: React.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
 */
const PullRequestActivityCardSkeleton: React.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
 */
const ActiveUsersLeaderboardSkeleton: React.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>
)

/**
 * Complete Dashboard Skeleton Loader
 * Displays skeleton placeholders matching the full dashboard layout
 * Used while dashboard data is being fetched
 */
export const DashboardSkeleton: React.FC = () => {
  return (
    <div className="h-screen 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>

      {/* 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>
  )
}
