'use client';

import React from 'react';

// Base Skeleton component
export const Skeleton = ({ 
    className = "", 
    width = "100%", 
    height = "h-4",
    animated = true 
}) => (
    <div 
        className={`${animated ? 'bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 dark:from-neutral-700/30 dark:via-neutral-600/30 dark:to-neutral-700/30 bg-[length:200%_100%] animate-shimmer' : 'bg-neutral-200 dark:bg-neutral-700/30'} rounded ${height} ${className}`}
        style={{ width }}
    />
);

// Loading Spinner component
export const LoadingSpinner = ({ 
    size = 'md', 
    className = '',
    color = 'white' 
}) => {
    const sizes = {
        sm: 'w-4 h-4',
        md: 'w-6 h-6',
        lg: 'w-8 h-8',
        xl: 'w-12 h-12'
    };

    const colors = {
        white: 'border-neutral-300 dark:border-white/20 border-t-neutral-600 dark:border-t-white',
        neutral: 'border-neutral-300 dark:border-[#1B1B1B] border-t-neutral-500 dark:border-t-neutral-400',
        primary: 'border-blue-500/20 border-t-blue-500'
    };

    return (
        <div 
            className={`border-2 rounded-full animate-spin ${sizes[size]} ${colors[color]} ${className}`}
        />
    );
};

// Full page loading state
export const PageLoading = ({ message = 'Loading...' }) => (
    <div className="flex items-center justify-center py-12">
        <div className="text-center">
            <LoadingSpinner size="lg" className="mx-auto mb-4" />
            <p className="text-sm text-neutral-500 dark:text-neutral-400">{message}</p>
        </div>
    </div>
);

// Table skeleton
export const TableSkeleton = ({ rows = 5, columns = 4 }) => (
    <div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl overflow-hidden">
        <div className="overflow-x-auto">
            <table className="w-full">
                <thead>
                    <tr className="border-b border-neutral-200 dark:border-[#1B1B1B]">
                        {Array.from({ length: columns }).map((_, index) => (
                            <th key={index} className="px-6 py-4 text-left">
                                <Skeleton height="h-4" width="60%" />
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody className="divide-y divide-neutral-200 dark:divide-neutral-700/30">
                    {Array.from({ length: rows }).map((_, rowIndex) => (
                        <tr key={rowIndex} className="hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors">
                            {Array.from({ length: columns }).map((_, colIndex) => (
                                <td key={colIndex} className="px-6 py-4 whitespace-nowrap">
                                    <Skeleton height="h-4" width={`${60 + Math.random() * 30}%`} />
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    </div>
);

// Card skeleton
export const CardSkeleton = ({ 
    hasHeader = true, 
    lines = 3, 
    hasFooter = false 
}) => (
    <div className="bg-neutral-100/80 dark:bg-[#0B0B0B] border border-neutral-200 dark:border-[#1B1B1B] rounded-xl p-6">
        {hasHeader && (
            <div className="border-b border-neutral-200 dark:border-[#1B1B1B] pb-4 mb-6">
                <Skeleton height="h-5" width="40%" className="mb-2" />
                <Skeleton height="h-3" width="60%" />
            </div>
        )}
        
        <div className="space-y-4">
            {Array.from({ length: lines }).map((_, index) => (
                <Skeleton 
                    key={index} 
                    height="h-4" 
                    width={`${70 + Math.random() * 20}%`} 
                />
            ))}
        </div>
        
        {hasFooter && (
            <div className="border-t border-neutral-200 dark:border-[#1B1B1B] pt-4 mt-6">
                <Skeleton height="h-8" width="30%" />
            </div>
        )}
    </div>
);

// Form skeleton
export const FormSkeleton = ({ fields = 4 }) => (
    <div className="flex flex-col gap-6">
        {Array.from({ length: fields }).map((_, index) => (
            <div key={index} className="space-y-2">
                <Skeleton height="h-4" width="20%" />
                <Skeleton height="h-10" width="100%" />
            </div>
        ))}
        <div className="flex gap-3 pt-4">
            <Skeleton height="h-10" width="100px" />
            <Skeleton height="h-10" width="80px" />
        </div>
    </div>
);

// Button skeleton
export const ButtonSkeleton = ({ 
    size = 'md', 
    width = 'auto', 
    className = '' 
}) => {
    const heights = {
        sm: 'h-8',
        md: 'h-10',
        lg: 'h-12'
    };

    const widths = {
        auto: 'w-24',
        full: 'w-full',
        fit: 'w-fit'
    };

    return (
        <Skeleton 
            height={heights[size]} 
            width={typeof width === 'string' ? widths[width] || width : width}
            className={`rounded-xl ${className}`}
        />
    );
};

// List skeleton
export const ListSkeleton = ({ items = 5, showAvatar = false }) => (
    <div className="space-y-4">
        {Array.from({ length: items }).map((_, index) => (
            <div key={index} className="flex items-center gap-3">
                {showAvatar && (
                    <Skeleton height="h-10" width="40px" className="rounded-full" />
                )}
                <div className="flex-1 space-y-2">
                    <Skeleton height="h-4" width="60%" />
                    <Skeleton height="h-3" width="40%" />
                </div>
            </div>
        ))}
    </div>
);

// Default export
const LoadingState = {
    Skeleton,
    LoadingSpinner,
    PageLoading,
    TableSkeleton,
    CardSkeleton,
    FormSkeleton,
    ButtonSkeleton,
    ListSkeleton
};

export default LoadingState; 