"use client"

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

/**
 * Skeleton loader for Repository Header
 * Mimics the repository header structure with avatar, name, and badges
 */
const RepositoryHeaderSkeleton: React.FC = () => (
  <div className="mb-6 sm:mb-8">
    <div className="flex items-start">
      <div className="flex items-start gap-4 w-full">
        {/* Avatar skeleton */}
        <div className="flex-shrink-0">
          <Skeleton className="w-12 h-12 sm:w-16 sm:h-16 rounded-full" />
        </div>

        {/* Repository info skeleton */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap mb-2">
            <Skeleton className="h-7 w-48 sm:w-64" />
            <Skeleton className="h-6 w-16 rounded-full" />
            <Skeleton className="h-6 w-16 rounded-full" />
          </div>
          <Skeleton className="h-4 w-36 sm:w-48 mb-2" />
          <div className="flex items-center gap-2">
            <Skeleton className="h-5 w-32" />
          </div>
        </div>
      </div>
    </div>
  </div>
)

/**
 * Skeleton loader for Tab Navigation
 * Mimics the tab navigation buttons
 */
const TabNavigationSkeleton: React.FC = () => (
  <div className="mb-6 sm:mb-8">
    <div className="flex gap-2">
      <Skeleton className="h-10 w-28 rounded-lg" />
      <Skeleton className="h-10 w-28 rounded-lg" />
    </div>
  </div>
)

/**
 * Skeleton loader for Metric Card
 * Reusable component for metric card placeholders
 */
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">
        <Skeleton className="h-4 w-32 mb-2" />
        <Skeleton className="h-8 w-20" />
      </div>
      <Skeleton className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl" />
    </div>
    {showChart && <Skeleton className="h-[60px] w-full rounded-md mt-2" />}
  </div>
)

/**
 * Skeleton loader for Statistics Tab
 * Mimics the complete statistics section with metrics and charts
 */
const StatisticsTabSkeleton: React.FC = () => (
  <div className="grid grid-cols-1 gap-3 sm:gap-5">
    {/* Top 2 large metric cards */}
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-5">
      <MetricCardSkeleton showChart={true} />
      <MetricCardSkeleton showChart={true} />
    </div>

    {/* Activity cards */}
    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-5 h-96 md:h-[500px]">
      <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>
        <div className="flex-1">
          <Skeleton className="h-full w-full rounded-md" />
        </div>
      </div>

      <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>
        <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"
            >
              <Skeleton className="h-6 w-6 rounded-full" />
              <Skeleton className="h-9 w-9 rounded-full" />
              <div className="flex-1">
                <Skeleton className="h-4 w-24 mb-1" />
                <Skeleton className="h-3 w-16" />
              </div>
              <Skeleton className="h-6 w-12 rounded-full" />
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
)

/**
 * Complete Repository Detail Skeleton Loader
 * Displays skeleton placeholders for the repository detail page
 * Used while repository data is being fetched
 */
export const RepositoryDetailSkeleton: React.FC<{ showTabNavigation?: boolean }> = ({
  showTabNavigation = true,
}) => {
  return (
    <div className="flex-1 bg-background">
      <div className="h-screen py-6 sm:py-8 px-4 sm:px-6 max-w-[1400px] mx-auto">
        <RepositoryHeaderSkeleton />
        {showTabNavigation && <TabNavigationSkeleton />}
        <StatisticsTabSkeleton />
      </div>
    </div>
  )
}
