"use client";

import { useState } from 'react';
import { SwatchIcon } from '@heroicons/react/24/outline';

const themePresets = [
    {
        name: 'Azul (Marca)',
        gradient: 'linear-gradient(135deg, #0ea5e9, #0284c7)',
    },
    {
        name: 'Azul/Roxo',
        gradient: 'linear-gradient(135deg, #0066FF, #9333EA)',
    },
    {
        name: 'Verde/Esmeralda',
        gradient: 'linear-gradient(135deg, #10B981, #059669)',
    },
    {
        name: 'Ciano/Azul',
        gradient: 'linear-gradient(135deg, #06B6D4, #3B82F6)',
    },
    {
        name: 'Rosa/Roxo',
        gradient: 'linear-gradient(135deg, #EC4899, #A855F7)',
    },
    {
        name: 'Vermelho/Laranja',
        gradient: 'linear-gradient(135deg, #EF4444, #F97316)',
    },
    {
        name: 'Índigo/Violeta',
        gradient: 'linear-gradient(135deg, #6366F1, #8B5CF6)',
    },
    {
        name: 'Âmbar/Amarelo',
        gradient: 'linear-gradient(135deg, #F59E0B, #EAB308)',
    },
];

export default function ThemeTester() {
    const [isOpen, setIsOpen] = useState(false);

    const applyTheme = (gradient: string) => {
        document.documentElement.style.setProperty('--gradient-primary', gradient);
        document.documentElement.style.setProperty('--gradient', gradient);
        document.documentElement.style.setProperty('--gradient-text', gradient);
        document.documentElement.style.setProperty('--color-gradient-brand', gradient);
    };

    return (
        <div className="fixed bottom-4 right-4 z-50">
            {/* Botão flutuante */}
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110"
                style={{ background: 'var(--gradient-primary)' }}
                title="Testar Temas"
            >
                <SwatchIcon className="w-6 h-6 text-white" />
            </button>

            {/* Painel de temas */}
            {isOpen && (
                <div className="absolute bottom-16 right-0 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 className="font-semibold text-gray-900 dark:text-white">Testar Gradientes</h3>
                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            Clique para aplicar temporariamente
                        </p>
                    </div>

                    <div className="p-3 max-h-96 overflow-y-auto space-y-2">
                        {themePresets.map((theme) => (
                            <button
                                key={theme.name}
                                onClick={() => applyTheme(theme.gradient)}
                                className="w-full flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors group"
                            >
                                <div
                                    className="w-12 h-12 rounded-lg shrink-0"
                                    style={{ background: theme.gradient }}
                                />
                                <span className="text-sm font-medium text-gray-900 dark:text-white text-left">
                                    {theme.name}
                                </span>
                            </button>
                        ))}
                    </div>

                    <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
                        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
                            💡 Recarregue a página para voltar ao tema original
                        </p>
                    </div>
                </div>
            )}
        </div>
    );
}