import React from 'react';
import { motion } from 'framer-motion';

/**
 * Skeleton loading component with shimmer animation
 * @param {Object} props
 * @param {string} [props.className] - Additional CSS classes
 * @param {'text'|'avatar'|'image'|'card'|'button'} [props.variant] - Preset variants
 * @param {number} [props.width] - Custom width
 * @param {number} [props.height] - Custom height
 * @param {boolean} [props.rounded] - Full rounded (for avatars)
 * @param {number} [props.count] - Number of skeleton items to render
 */
export function Skeleton({
  className = '',
  variant = 'text',
  width,
  height,
  rounded = false,
  count = 1,
}) {
  const variants = {
    text: 'h-4 w-full',
    avatar: 'w-12 h-12 rounded-full',
    image: 'w-full h-48 rounded-xl',
    card: 'w-full h-64 rounded-2xl',
    button: 'h-10 w-24 rounded-full',
    title: 'h-6 w-3/4',
    snippet: 'h-4 w-full',
  };

  const baseClasses = variants[variant] || variants.text;
  const roundedClass = rounded ? 'rounded-full' : '';

  const style = {};
  if (width) style.width = typeof width === 'number' ? `${width}px` : width;
  if (height) style.height = typeof height === 'number' ? `${height}px` : height;

  const items = Array.from({ length: count }, (_, i) => i);

  return (
    <>
      {items.map((i) => (
        <motion.div
          key={i}
          className={`
            relative overflow-hidden
            bg-gradient-to-r from-surface-800/60 via-surface-700/40 to-surface-800/60
            ${baseClasses}
            ${roundedClass}
            ${className}
          `}
          style={style}
          initial={{ opacity: 0.6 }}
          animate={{ opacity: [0.6, 0.8, 0.6] }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          {/* Shimmer overlay */}
          <motion.div
            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"
            initial={{ x: '-100%' }}
            animate={{ x: '100%' }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              ease: 'linear',
            }}
          />
        </motion.div>
      ))}
    </>
  );
}

/**
 * PostCard Skeleton - Complete loading state for a post card
 */
export function PostCardSkeleton() {
  return (
    <motion.div
      className="glass-card p-0 overflow-hidden"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      {/* Header */}
      <div className="flex items-center gap-3 p-4">
        <Skeleton variant="avatar" />
        <div className="flex-1 space-y-2">
          <Skeleton variant="text" className="w-32 h-4" />
          <Skeleton variant="text" className="w-20 h-3" />
        </div>
        <Skeleton variant="button" className="w-16" />
      </div>

      {/* Image */}
      <Skeleton variant="image" className="rounded-none h-56" />

      {/* Body */}
      <div className="p-4 space-y-3">
        <Skeleton variant="title" />
        <Skeleton variant="snippet" />
        <Skeleton variant="snippet" className="w-2/3" />
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between p-4 border-t border-white/5">
        <div className="flex gap-4">
          <Skeleton variant="text" className="w-12 h-4" />
          <Skeleton variant="text" className="w-12 h-4" />
          <Skeleton variant="text" className="w-12 h-4" />
        </div>
        <div className="flex gap-2">
          <Skeleton variant="button" />
          <Skeleton variant="button" />
        </div>
      </div>
    </motion.div>
  );
}

/**
 * Feed Skeleton - Multiple post card skeletons
 */
export function FeedSkeleton({ count = 3 }) {
  return (
    <div className="space-y-5">
      {Array.from({ length: count }, (_, i) => (
        <PostCardSkeleton key={i} />
      ))}
    </div>
  );
}

export default Skeleton;
