'use client';

import React from 'react';
import { cn } from '@/lib/utils';

/**
 * EN: Loading spinner size types
 * VI: Kiểu kích thước loading spinner
 */
export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

/**
 * EN: Loading spinner props
 * VI: Props cho loading spinner
 */
export interface SpinnerProps {
    /** Spinner size / Kích thước spinner */
    size?: SpinnerSize;
    /** Spinner color / Màu spinner */
    color?: 'brand' | 'primary' | 'white';
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
}

/**
 * EN: Size mappings for spinner
 * VI: Ánh xạ kích thước cho spinner
 */
const spinnerSizes: Record<SpinnerSize, string> = {
    xs: 'w-4 h-4 border-2',
    sm: 'w-6 h-6 border-2',
    md: 'w-8 h-8 border-3',
    lg: 'w-12 h-12 border-4',
    xl: 'w-16 h-16 border-4',
};

/**
 * EN: Color mappings for spinner
 * VI: Ánh xạ màu cho spinner
 */
const spinnerColors: Record<string, string> = {
    brand: 'border-brand-primary/20 border-t-brand-primary',
    primary: 'border-text-primary/20 border-t-text-primary',
    white: 'border-white/20 border-t-white',
};

/**
 * EN: Brand Spinner - Loading spinner with brand colors
 * VI: Brand Spinner - Loading spinner với màu thương hiệu
 *
 * @example
 * ```tsx
 * <BrandSpinner size="md" color="brand" />
 * ```
 */
export function BrandSpinner({
    size = 'md',
    color = 'brand',
    className,
}: SpinnerProps) {
    return (
        <div
            className={cn(
                'inline-block rounded-full animate-spin',
                spinnerSizes[size],
                spinnerColors[color],
                className
            )}
            role="status"
            aria-label="Loading"
        >
            <span className="sr-only">Loading...</span>
        </div>
    );
}

/**
 * EN: Skeleton component props
 * VI: Props cho skeleton component
 */
export interface SkeletonProps {
    /** Skeleton variant / Biến thể skeleton */
    variant?: 'text' | 'circular' | 'rectangular';
    /** Width / Chiều rộng */
    width?: string | number;
    /** Height / Chiều cao */
    height?: string | number;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
    /** Animation wave effect / Hiệu ứng sóng animation */
    wave?: boolean;
}

/**
 * EN: Skeleton - Loading placeholder with shimmer effect
 * VI: Skeleton - Loading placeholder với hiệu ứng shimmer
 *
 * @example
 * ```tsx
 * <Skeleton variant="text" width="100%" height="20px" />
 * <Skeleton variant="circular" width="40px" height="40px" />
 * <Skeleton variant="rectangular" width="200px" height="100px" />
 * ```
 */
export function Skeleton({
    variant = 'rectangular',
    width,
    height,
    className,
    wave = true,
}: SkeletonProps) {
    const variantClasses = {
        text: 'rounded',
        circular: 'rounded-full',
        rectangular: 'rounded-md',
    };

    return (
        <div
            className={cn(
                'bg-bg-tertiary animate-pulse',
                variantClasses[variant],
                wave && 'relative overflow-hidden',
                className
            )}
            style={{
                width: typeof width === 'number' ? `${width}px` : width,
                height: typeof height === 'number' ? `${height}px` : height,
            }}
            role="status"
            aria-label="Loading"
        >
            {wave && (
                <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent" />
            )}
            <span className="sr-only">Loading...</span>
        </div>
    );
}

/**
 * EN: Skeleton Card - Pre-built skeleton for card layouts
 * VI: Skeleton Card - Skeleton định sẵn cho layout card
 */
export function SkeletonCard({ className }: { className?: string }) {
    return (
        <div className={cn('p-6 border border-border-primary rounded-lg', className)}>
            <Skeleton variant="circular" width="48px" height="48px" className="mb-4" />
            <Skeleton variant="text" width="70%" height="24px" className="mb-2" />
            <Skeleton variant="text" width="100%" height="16px" className="mb-1" />
            <Skeleton variant="text" width="90%" height="16px" className="mb-4" />
            <div className="flex gap-2">
                <Skeleton variant="rectangular" width="80px" height="32px" />
                <Skeleton variant="rectangular" width="80px" height="32px" />
            </div>
        </div>
    );
}

/**
 * EN: Skeleton List - Pre-built skeleton for list layouts
 * VI: Skeleton List - Skeleton định sẵn cho layout list
 */
export function SkeletonList({
    count = 3,
    className,
}: {
    count?: number;
    className?: string;
}) {
    return (
        <div className={cn('space-y-3', className)}>
            {Array.from({ length: count }).map((_, index) => (
                <div key={index} className="flex items-center gap-4 p-4 border border-border-primary rounded-lg">
                    <Skeleton variant="circular" width="40px" height="40px" />
                    <div className="flex-1 space-y-2">
                        <Skeleton variant="text" width="40%" height="16px" />
                        <Skeleton variant="text" width="60%" height="14px" />
                    </div>
                </div>
            ))}
        </div>
    );
}

/**
 * EN: Loading Overlay - Full screen loading overlay
 * VI: Loading Overlay - Overlay loading toàn màn hình
 */
export interface LoadingOverlayProps {
    /** Loading message / Thông báo loading */
    message?: string;
    /** Show overlay / Hiển thị overlay */
    show: boolean;
    /** Spinner size / Kích thước spinner */
    size?: SpinnerSize;
}

export function LoadingOverlay({
    message = 'Loading...',
    show,
    size = 'lg',
}: LoadingOverlayProps) {
    if (!show) return null;

    return (
        <div
            className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-bg-primary/80 backdrop-blur-sm"
            role="status"
            aria-live="assertive"
            aria-label={message}
        >
            <BrandSpinner size={size} color="brand" />
            <p className="mt-6 text-lg text-text-secondary font-medium">{message}</p>
        </div>
    );
}

/**
 * EN: Progress Bar - Linear progress indicator with brand colors
 * VI: Progress Bar - Thanh tiến trình với màu thương hiệu
 */
export interface ProgressBarProps {
    /** Progress value (0-100) / Giá trị tiến trình (0-100) */
    value: number;
    /** Show percentage label / Hiển thị nhãn phần trăm */
    showLabel?: boolean;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
    /** Progress bar color / Màu thanh tiến trình */
    color?: 'brand' | 'success' | 'warning' | 'error';
}

const progressColors: Record<string, string> = {
    brand: 'bg-brand-gradient',
    success: 'bg-accent-success',
    warning: 'bg-accent-warning',
    error: 'bg-accent-error',
};

export function ProgressBar({
    value,
    showLabel = false,
    className,
    color = 'brand',
}: ProgressBarProps) {
    const clampedValue = Math.max(0, Math.min(100, value));

    return (
        <div className={cn('w-full', className)} role="progressbar" aria-valuenow={clampedValue} aria-valuemin={0} aria-valuemax={100}>
            <div className="flex items-center gap-3">
                <div className="flex-1 h-2 bg-bg-tertiary rounded-full overflow-hidden">
                    <div
                        className={cn(
                            'h-full transition-all duration-slow ease-out',
                            progressColors[color]
                        )}
                        style={{ width: `${clampedValue}%` }}
                    />
                </div>
                {showLabel && (
                    <span className="text-sm font-medium text-text-secondary min-w-[3ch] text-right">
                        {Math.round(clampedValue)}%
                    </span>
                )}
            </div>
        </div>
    );
}
