"use client";

/**
 * Skeleton Loader Component
 * 
 * Provides a placeholder UI while content is loading.
 * Use this to improve perceived performance by showing
 * structure instead of blank screens.
 * 
 * @example
 * ```tsx
 * import { Skeleton } from '@/components/common/Skeleton';
 * 
 * // While loading
 * <Skeleton className="h-8 w-48" />
 * 
 * // Card skeleton
 * <Skeleton variant="card" />
 * ```
 */

interface SkeletonProps {
  className?: string;
  variant?: 'text' | 'card' | 'avatar' | 'button' | 'rectangle';
  lines?: number; // For text variant
  animate?: boolean;
}

export function Skeleton({ 
  className = '', 
  variant = 'rectangle',
  lines = 1,
  animate = true 
}: SkeletonProps) {
  const baseClasses = animate ? 'skeleton' : 'bg-gray-200 dark:bg-gray-700';

  const variants = {
    text: (
      <div className="space-y-2">
        {Array.from({ length: lines }).map((_, i) => (
          <div
            key={i}
            className={`h-4 rounded ${baseClasses} ${className}`}
            style={{ width: i === lines - 1 ? '70%' : '100%' }}
          />
        ))}
      </div>
    ),
    card: (
      <div className={`rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`}>
        <div className={`h-32 rounded mb-4 ${baseClasses}`} />
        <div className={`h-4 rounded mb-2 ${baseClasses}`} />
        <div className={`h-4 rounded w-3/4 ${baseClasses}`} />
      </div>
    ),
    avatar: (
      <div className={`rounded-full ${baseClasses} ${className}`} style={{ width: '40px', height: '40px' }} />
    ),
    button: (
      <div className={`h-10 rounded-md ${baseClasses} ${className}`} style={{ width: '120px' }} />
    ),
    rectangle: (
      <div className={`rounded ${baseClasses} ${className}`} />
    ),
  };

  return variants[variant];
}

/**
 * List Skeleton
 * Pre-built skeleton for list items
 */
export function ListSkeleton({ items = 3 }: { items?: number }) {
  return (
    <div className="space-y-4">
      {Array.from({ length: items }).map((_, i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton variant="avatar" />
          <div className="flex-1">
            <Skeleton className="h-4 w-3/4 mb-2" />
            <Skeleton className="h-3 w-1/2" />
          </div>
        </div>
      ))}
    </div>
  );
}

/**
 * Station Card Skeleton
 * Skeleton for station/charge point cards
 */
export function StationCardSkeleton() {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 space-y-3">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <Skeleton className="h-6 w-3/4 mb-2" />
          <Skeleton className="h-4 w-1/2" />
        </div>
        <Skeleton className="h-8 w-8 rounded-full" />
      </div>
      
      <div className="flex items-center space-x-4">
        <Skeleton className="h-10 w-10 rounded" />
        <div className="flex-1">
          <Skeleton className="h-3 w-20 mb-1" />
          <Skeleton className="h-4 w-32" />
        </div>
      </div>
      
      <Skeleton variant="button" className="w-full" />
    </div>
  );
}

/**
 * Page Skeleton
 * Full page skeleton with header and content
 */
export function PageSkeleton() {
  return (
    <div className="space-y-6 p-4">
      {/* Header skeleton */}
      <div className="space-y-2">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-4 w-96" />
      </div>
      
      {/* Content skeleton */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <StationCardSkeleton />
        <StationCardSkeleton />
        <StationCardSkeleton />
      </div>
    </div>
  );
}