import { useTheme } from '@/hooks/use-theme';
import { componentClasses, semanticVariants, type SemanticVariant } from '@/lib/colors';
import { cn } from '@/lib/utils';

interface ColorDemoProps {
    className?: string;
}

/**
 * Demo component showcasing the centralized color system
 * This component demonstrates all the available colors and how to use them
 */
export function ColorDemo({ className }: ColorDemoProps) {
    const { appearance, toggleTheme, isDark, resolvedTheme } = useTheme();

    const colorCategories = [
        {
            name: 'Semantic Colors',
            colors: Object.keys(semanticVariants) as SemanticVariant[],
        },
        {
            name: 'Brand Colors',
            colors: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
        },
        {
            name: 'Chart Colors',
            colors: [1, 2, 3, 4, 5],
        },
    ];

    return (
        <div className={cn('space-y-8 p-6', className)}>
            {/* Theme Controls */}
            <div className="flex items-center justify-between border-b border-border pb-4">
                <div>
                    <h1 className="text-2xl font-bold text-foreground">Color System Demo</h1>
                    <p className="text-muted-foreground">
                        Current theme: <span className="font-medium">{appearance}</span>
                        {appearance === 'system' && ` (resolved: ${resolvedTheme})`}
                    </p>
                </div>
                <button onClick={toggleTheme} className={cn(componentClasses.button.primary, 'rounded-md px-4 py-2 transition-colors')}>
                    Toggle to {isDark ? 'Light' : 'Dark'}
                </button>
            </div>

            {/* Semantic Colors */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Semantic Colors</h2>
                <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
                    {Object.entries(semanticVariants).map(([variant, classes]) => (
                        <div key={variant} className={cn('rounded-lg border p-4 transition-colors', classes.bg, classes.text, classes.border)}>
                            <div className="font-medium capitalize">{variant}</div>
                            <div className="mt-1 text-sm opacity-75">{variant}-foreground</div>
                        </div>
                    ))}
                </div>
            </section>

            {/* Button Variants */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Button Variants</h2>
                <div className="flex flex-wrap gap-3">
                    {Object.entries(componentClasses.button).map(([variant, classes]) => (
                        <button key={variant} className={cn(classes, 'rounded-md px-4 py-2 transition-colors')}>
                            {variant} Button
                        </button>
                    ))}
                </div>
            </section>

            {/* Brand Color Scale */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Brand Color Scale</h2>
                <div className="grid grid-cols-5 gap-2 md:grid-cols-11">
                    {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => (
                        <div key={shade} className="text-center">
                            <div
                                className={`mb-2 h-16 w-full rounded-md bg-brand-${shade} border border-border`}
                                style={{ backgroundColor: `hsl(var(--brand-${shade}))` }}
                            />
                            <div className="text-xs text-muted-foreground">{shade}</div>
                        </div>
                    ))}
                </div>
            </section>

            {/* Chart Colors */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Chart Colors</h2>
                <div className="grid grid-cols-5 gap-4">
                    {[1, 2, 3, 4, 5].map((index) => (
                        <div key={index} className="text-center">
                            <div
                                className="mb-2 h-16 w-full rounded-md border border-border"
                                style={{ backgroundColor: `hsl(var(--chart-${index}))` }}
                            />
                            <div className="text-sm text-foreground">Chart {index}</div>
                        </div>
                    ))}
                </div>
            </section>

            {/* Cards with Different Variants */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Card Variants</h2>
                <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {(['primary', 'success', 'warning', 'info', 'destructive'] as const).map((variant) => (
                        <div
                            key={variant}
                            className={cn(
                                'rounded-lg border p-4',
                                semanticVariants[variant].bg,
                                semanticVariants[variant].text,
                                semanticVariants[variant].border,
                            )}
                        >
                            <h3 className="mb-2 font-medium capitalize">{variant} Card</h3>
                            <p className="text-sm opacity-90">
                                This is a {variant} card demonstrating the color system. The background, text, and border colors are all theme-aware.
                            </p>
                            <button
                                className={cn(
                                    'mt-3 rounded px-3 py-1 text-sm',
                                    componentClasses.button[variant as keyof typeof componentClasses.button] || componentClasses.button.primary,
                                )}
                            >
                                Action
                            </button>
                        </div>
                    ))}
                </div>
            </section>

            {/* Usage Examples */}
            <section>
                <h2 className="mb-4 text-xl font-semibold text-foreground">Usage Examples</h2>
                <div className="rounded-lg bg-muted p-4">
                    <h3 className="mb-2 font-medium">Class Usage:</h3>
                    <pre className="overflow-x-auto rounded bg-background p-2 text-sm text-foreground">
                        {`// Semantic colors
<div className="bg-primary text-primary-foreground">Primary</div>
<div className="bg-success text-success-foreground">Success</div>

// Brand colors
<div className="bg-brand-500 text-white">Brand Primary</div>
<div className="bg-brand-100 text-brand-900">Brand Light</div>

// Chart colors
<div style={{ backgroundColor: 'hsl(var(--chart-1))' }}>Chart 1</div>

// Using component classes
<button className={componentClasses.button.primary}>Button</button>`}
                    </pre>
                </div>
            </section>
        </div>
    );
}

export default ColorDemo;