'use client';

import React from 'react';
import { Loader2, Image as ImageIcon, Video } from 'lucide-react';
import { cn } from '@/utils';

interface MediaPlaceholderProps {
  /** Type of media being loaded */
  type: 'image' | 'video';
  /** Optional loading message */
  message?: string;
  /** Whether to show animated skeleton */
  animated?: boolean;
  /** Custom className */
  className?: string;
}

/**
 * MediaPlaceholder Component
 * 
 * Displays a placeholder while media content (images/videos) is being loaded.
 * Used in progressive loading to provide visual feedback during the loading process.
 * 
 * @example
 * ```tsx
 * <MediaPlaceholder type="image" message="Loading image..." />
 * <MediaPlaceholder type="video" animated />
 * ```
 */
export const MediaPlaceholder: React.FC<MediaPlaceholderProps> = ({
  type,
  message,
  animated = true,
  className,
}) => {
  const Icon = type === 'video' ? Video : ImageIcon;

  return (
    <div
      className={cn(
        'absolute inset-0 flex flex-col items-center justify-center gap-3',
        'bg-gradient-to-br from-white/5 to-white/[0.02]',
        animated && 'animate-pulse',
        className
      )}
    >
      {/* Animated background pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,.05)_25%,rgba(255,255,255,.05)_50%,transparent_50%,transparent_75%,rgba(255,255,255,.05)_75%,rgba(255,255,255,.05))] bg-[length:20px_20px]" />
      </div>

      {/* Icon container */}
      <div className="relative z-10 w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center">
        {animated ? (
          <Loader2 className="w-8 h-8 text-cyan-400 animate-spin" />
        ) : (
          <Icon className="w-8 h-8 text-white/40" />
        )}
      </div>

      {/* Loading message */}
      {message && (
        <span className="relative z-10 text-[11px] font-medium text-white/60 tracking-wide">
          {message}
        </span>
      )}

      {/* Loading indicator dots */}
      {animated && !message && (
        <div className="relative z-10 flex gap-1.5">
          <div className="w-1.5 h-1.5 rounded-full bg-cyan-400/60 animate-bounce [animation-delay:-0.3s]" />
          <div className="w-1.5 h-1.5 rounded-full bg-cyan-400/60 animate-bounce [animation-delay:-0.15s]" />
          <div className="w-1.5 h-1.5 rounded-full bg-cyan-400/60 animate-bounce" />
        </div>
      )}
    </div>
  );
};

/**
 * Skeleton placeholder for text content
 */
export const TextPlaceholder: React.FC<{ className?: string }> = ({ className }) => {
  return (
    <div className={cn('space-y-2 animate-pulse', className)}>
      <div className="h-3 bg-white/10 rounded w-3/4" />
      <div className="h-3 bg-white/10 rounded w-1/2" />
      <div className="h-3 bg-white/10 rounded w-5/6" />
    </div>
  );
};

/**
 * Grid placeholder for multiple items
 */
export const GridPlaceholder: React.FC<{
  count?: number;
  type: 'image' | 'video';
  className?: string;
}> = ({ count = 4, type, className }) => {
  return (
    <div className={cn('grid grid-cols-2 gap-2 p-2', className)}>
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="relative aspect-video rounded-lg bg-white/5 border border-white/10 overflow-hidden"
        >
          <div className="absolute inset-0 flex items-center justify-center">
            {type === 'video' ? (
              <Video className="w-6 h-6 text-white/20" />
            ) : (
              <ImageIcon className="w-6 h-6 text-white/20" />
            )}
          </div>
          <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent animate-pulse" />
        </div>
      ))}
    </div>
  );
};
