'use client';

import React from 'react';
import Image from 'next/image';
import { cn } from '@/lib/utils';
import { getBrandIllustration } from '@/lib/brand-constants';
import { Button } from './button';

/**
 * EN: Empty state action button configuration
 * VI: Cấu hình button hành động cho empty state
 */
export interface EmptyStateAction {
    /** Button label / Nhãn button */
    label: string;
    /** Click handler / Hàm xử lý click */
    onClick: () => void;
    /** Button variant / Biến thể button */
    variant?: 'brand' | 'primary' | 'secondary' | 'ghost';
}

/**
 * EN: Empty state component props
 * VI: Props cho component empty state
 */
export interface EmptyStateProps {
    /** Title text / Tiêu đề */
    title: string;
    /** Description text / Mô tả */
    description?: string;
    /** Illustration type / Loại minh họa */
    illustration?: 'empty' | 'error' | 'custom';
    /** Custom illustration path / Đường dẫn minh họa tùy chỉnh */
    customIllustration?: string;
    /** Primary action button / Button hành động chính */
    action?: EmptyStateAction;
    /** Secondary action button / Button hành động phụ */
    secondaryAction?: EmptyStateAction;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
    /** Show illustration / Hiển thị minh họa */
    showIllustration?: boolean;
}

/**
 * EN: Empty State Component - Professional empty state with illustrations
 * VI: Component Empty State - Empty state chuyên nghiệp với minh họa
 *
 * @example
 * ```tsx
 * <EmptyState
 *   title="No data found"
 *   description="Try adding some items to get started"
 *   illustration="empty"
 *   action={{ label: 'Add Item', onClick: () => {} }}
 * />
 * ```
 */
export function EmptyState({
    title,
    description,
    illustration = 'empty',
    customIllustration,
    action,
    secondaryAction,
    className,
    showIllustration = true,
}: EmptyStateProps) {
    // EN: Get illustration path
    // VI: Lấy đường dẫn minh họa
    const illustrationSrc =
        illustration === 'custom' && customIllustration
            ? customIllustration
            : getBrandIllustration(illustration === 'custom' ? 'empty' : illustration);

    return (
        <div
            className={cn(
                'flex flex-col items-center justify-center p-12 text-center min-h-[400px]',
                className
            )}
            role="status"
            aria-live="polite"
        >
            {/* EN: Illustration / VI: Minh họa */}
            {showIllustration && (
                <div className="relative w-64 h-64 mb-8 opacity-60 hover:opacity-80 transition-opacity duration-normal">
                    <Image
                        src={illustrationSrc}
                        alt={title}
                        fill
                        className="object-contain"
                        priority={false}
                    />
                </div>
            )}

            {/* EN: Title / VI: Tiêu đề */}
            <h3 className="text-2xl font-heading font-semibold mb-3 text-text-primary">
                {title}
            </h3>

            {/* EN: Description / VI: Mô tả */}
            {description && (
                <p className="text-text-secondary mb-8 max-w-md leading-relaxed">
                    {description}
                </p>
            )}

            {/* EN: Actions / VI: Hành động */}
            {(action || secondaryAction) && (
                <div className="flex gap-4 items-center">
                    {action && (
                        <Button
                            variant={action.variant || 'brand'}
                            size="lg"
                            onClick={action.onClick}
                            className="shadow-brand hover:shadow-brand-lg"
                        >
                            {action.label}
                        </Button>
                    )}
                    {secondaryAction && (
                        <Button
                            variant={secondaryAction.variant || 'ghost'}
                            size="lg"
                            onClick={secondaryAction.onClick}
                        >
                            {secondaryAction.label}
                        </Button>
                    )}
                </div>
            )}
        </div>
    );
}

/**
 * EN: Error State Component - Specialized empty state for errors
 * VI: Component Error State - Empty state chuyên biệt cho lỗi
 *
 * @example
 * ```tsx
 * <ErrorState
 *   title="Something went wrong"
 *   description="Please try again or contact support"
 *   action={{ label: 'Try Again', onClick: () => {} }}
 * />
 * ```
 */
export function ErrorState(props: Omit<EmptyStateProps, 'illustration'>) {
    return <EmptyState {...props} illustration="error" />;
}
