'use client';

import React from 'react';
import Image from 'next/image';
import { useTheme } from '@/features/theme';
import { cn } from '@/shared/lib/utils';
import { BRAND, getBrandLogo } from '@/shared/lib/brand-constants';

/**
 * EN: Brand logo variant types
 * VI: Các kiểu biến thể logo thương hiệu
 */
export type LogoVariant = 'full' | 'icon' | 'wordmark';

/**
 * EN: Brand logo size presets
 * VI: Kích thước logo định sẵn
 */
export type LogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

/**
 * EN: Brand logo component props
 * VI: Props cho component logo thương hiệu
 */
export interface BrandLogoProps {
    /** Logo variant / Biến thể logo */
    variant?: LogoVariant;
    /** Logo size / Kích thước logo */
    size?: LogoSize;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
    /** Whether to use Next.js Image optimization / Có sử dụng tối ưu Image của Next.js không */
    priority?: boolean;
}

/**
 * EN: Size mappings for different logo sizes
 * VI: Ánh xạ kích thước cho các size logo khác nhau
 */
const sizeClasses: Record<LogoSize, { width: string; height: string }> = {
    xs: { width: 'w-16', height: 'h-4' },
    sm: { width: 'w-24', height: 'h-6' },
    md: { width: 'w-32', height: 'h-8' },
    lg: { width: 'w-48', height: 'h-12' },
    xl: { width: 'w-64', height: 'h-16' },
    '2xl': { width: 'w-80', height: 'h-20' },
};

/**
 * EN: Size mappings for icon variant
 * VI: Ánh xạ kích thước cho biến thể icon
 */
const iconSizeClasses: Record<LogoSize, { width: string; height: string }> = {
    xs: { width: 'w-4', height: 'h-4' },
    sm: { width: 'w-6', height: 'h-6' },
    md: { width: 'w-8', height: 'h-8' },
    lg: { width: 'w-12', height: 'h-12' },
    xl: { width: 'w-16', height: 'h-16' },
    '2xl': { width: 'w-20', height: 'h-20' },
};

/**
 * EN: Brand Logo Component - Displays brand logo with automatic theme switching
 * VI: Component Logo Thương Hiệu - Hiển thị logo với tự động chuyển theme
 *
 * @example
 * ```tsx
 * <BrandLogo variant="full" size="lg" />
 * <BrandLogo variant="icon" size="md" />
 * <BrandLogo variant="wordmark" size="sm" />
 * ```
 */
export function BrandLogo({
    variant = 'full',
    size = 'md',
    className,
    priority = false,
}: BrandLogoProps) {
    const { resolvedTheme } = useTheme();

    // EN: Get logo path based on variant
    // VI: Lấy đường dẫn logo dựa trên biến thể
    const logoSrc = getBrandLogo(variant);

    // EN: Select size classes based on variant
    // VI: Chọn class kích thước dựa trên biến thể
    const sizes = variant === 'icon' ? iconSizeClasses[size] : sizeClasses[size];

    return (
        <div
            className={cn(
                'relative flex items-center justify-center',
                sizes.width,
                sizes.height,
                className
            )}
        >
            <Image
                src={logoSrc}
                alt={BRAND.name}
                fill
                priority={priority}
                className="object-contain"
                style={{
                    // EN: Apply theme-aware color for SVG text elements
                    // VI: Áp dụng màu nhận biết theme cho SVG text elements
                    color: resolvedTheme === 'dark' ? '#FFFFFF' : '#000000',
                }}
            />
        </div>
    );
}

/**
 * EN: Brand Logo Link - Clickable logo that links to home
 * VI: Logo Link - Logo có thể nhấp dẫn về trang chủ
 *
 * @example
 * ```tsx
 * <BrandLogoLink variant="full" size="lg" href="/" />
 * ```
 */
export interface BrandLogoLinkProps extends BrandLogoProps {
    href?: string;
}

export function BrandLogoLink({
    href = '/',
    ...logoProps
}: BrandLogoLinkProps) {
    return (
        <a
            href={href}
            className="inline-block transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary focus-visible:ring-offset-2 rounded-sm"
            aria-label={`${BRAND.name} - Go to homepage`}
        >
            <BrandLogo {...logoProps} />
        </a>
    );
}
