/**
 * 现代化加载组件
 * 提供多种加载状态的视觉反馈
 */

import React from 'react';
import { cn } from '../../utils/cn';
import { Card } from './Card';

export interface LoadingProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  variant?: 'spinner' | 'dots' | 'pulse' | 'bars';
  color?: 'blue' | 'gray' | 'green' | 'red' | 'yellow';
  text?: string;
  className?: string;
}

const sizeClasses = {
  sm: 'w-4 h-4',
  md: 'w-6 h-6',
  lg: 'w-8 h-8',
  xl: 'w-12 h-12',
};

const colorClasses = {
  blue: 'text-blue-600',
  gray: 'text-gray-600',
  green: 'text-green-600',
  red: 'text-red-600',
  yellow: 'text-yellow-600',
};

export const Loading: React.FC<LoadingProps> = ({
  size = 'md',
  variant = 'spinner',
  color = 'blue',
  text,
  className,
}) => {
  const renderSpinner = () => (
    <svg
      className={cn(
        'animate-spin',
        sizeClasses[size],
        colorClasses[color],
        className
      )}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      />
    </svg>
  );

  const renderDots = () => (
    <div className={cn('flex space-x-1', className)}>
      {[0, 1, 2].map((i) => (
        <div
          key={i}
          className={cn(
            'rounded-full animate-pulse',
            size === 'sm' ? 'w-2 h-2' : 
            size === 'md' ? 'w-3 h-3' :
            size === 'lg' ? 'w-4 h-4' : 'w-6 h-6',
            color === 'blue' ? 'bg-blue-600' :
            color === 'gray' ? 'bg-gray-600' :
            color === 'green' ? 'bg-green-600' :
            color === 'red' ? 'bg-red-600' : 'bg-yellow-600'
          )}
          style={{
            animationDelay: `${i * 0.2}s`,
            animationDuration: '1.4s',
          }}
        />
      ))}
    </div>
  );

  const renderPulse = () => (
    <div
      className={cn(
        'rounded-full animate-pulse',
        sizeClasses[size],
        color === 'blue' ? 'bg-blue-600' :
        color === 'gray' ? 'bg-gray-600' :
        color === 'green' ? 'bg-green-600' :
        color === 'red' ? 'bg-red-600' : 'bg-yellow-600',
        className
      )}
    />
  );

  const renderBars = () => (
    <div className={cn('flex space-x-1 items-end', className)}>
      {[0, 1, 2, 3].map((i) => (
        <div
          key={i}
          className={cn(
            'animate-pulse',
            size === 'sm' ? 'w-1' : 
            size === 'md' ? 'w-1.5' :
            size === 'lg' ? 'w-2' : 'w-3',
            color === 'blue' ? 'bg-blue-600' :
            color === 'gray' ? 'bg-gray-600' :
            color === 'green' ? 'bg-green-600' :
            color === 'red' ? 'bg-red-600' : 'bg-yellow-600'
          )}
          style={{
            height: `${20 + i * 10}px`,
            animationDelay: `${i * 0.1}s`,
            animationDuration: '1.2s',
          }}
        />
      ))}
    </div>
  );

  const renderLoader = () => {
    switch (variant) {
      case 'dots':
        return renderDots();
      case 'pulse':
        return renderPulse();
      case 'bars':
        return renderBars();
      default:
        return renderSpinner();
    }
  };

  return (
    <div className="flex flex-col items-center justify-center space-y-3">
      {renderLoader()}
      {text && (
        <p className={cn('text-sm font-medium', colorClasses[color])}>
          {text}
        </p>
      )}
    </div>
  );
};

// 页面级加载组件
export interface PageLoadingProps {
  text?: string;
  className?: string;
}

export const PageLoading: React.FC<PageLoadingProps> = ({
  text = '加载中...',
  className,
}) => (
  <div className={cn(
    'flex items-center justify-center min-h-[400px]',
    className
  )}>
    <Loading size="lg" text={text} />
  </div>
);

// 内联加载组件
export interface InlineLoadingProps {
  text?: string;
  size?: LoadingProps['size'];
  className?: string;
}

export const InlineLoading: React.FC<InlineLoadingProps> = ({
  text,
  size = 'sm',
  className,
}) => (
  <div className={cn('flex items-center space-x-2', className)}>
    <Loading size={size} variant="spinner" />
    {text && <span className="text-sm text-gray-600">{text}</span>}
  </div>
);

// 骨架屏组件
export interface SkeletonProps {
  className?: string;
  lines?: number;
  avatar?: boolean;
}

export const Skeleton: React.FC<SkeletonProps> = ({
  className,
  lines = 3,
  avatar = false,
}) => (
  <div className={cn('animate-pulse', className)}>
    <div className="flex space-x-4">
      {avatar && (
        <div className="rounded-full bg-gray-300 h-10 w-10" />
      )}
      <div className="flex-1 space-y-2">
        {Array.from({ length: lines }).map((_, i) => (
          <div
            key={i}
            className={cn(
              'h-4 bg-gray-300 rounded',
              i === lines - 1 ? 'w-3/4' : 'w-full'
            )}
          />
        ))}
      </div>
    </div>
  </div>
);

// 卡片骨架屏
export const CardSkeleton: React.FC<{ className?: string }> = ({ className }) => (
  <Card className={cn('p-6', className)}>
    <Skeleton lines={4} />
  </Card>
);

// 表格骨架屏
export interface TableSkeletonProps {
  rows?: number;
  columns?: number;
  className?: string;
}

export const TableSkeleton: React.FC<TableSkeletonProps> = ({
  rows = 5,
  columns = 4,
  className,
}) => (
  <div className={cn('space-y-3', className)}>
    {Array.from({ length: rows }).map((_, rowIndex) => (
      <div key={rowIndex} className="flex space-x-4">
        {Array.from({ length: columns }).map((_, colIndex) => (
          <div
            key={colIndex}
            className={cn(
              'h-4 bg-gray-300 rounded animate-pulse',
              colIndex === 0 ? 'w-1/4' :
              colIndex === columns - 1 ? 'w-1/6' : 'flex-1'
            )}
          />
        ))}
      </div>
    ))}
  </div>
);
