import { useEffect } from 'react';
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';
import './n8n-chat-theme.css';
import { motion } from 'framer-motion';

export default function N8nChat() {
    useEffect(() => {
        const style = document.createElement('style');
        style.innerHTML = `
            /* 1. TORNAMOS O BOTÃO DA N8N TRANSPARENTE */
            #n8n-chat .n8n-chat-toggle-button {
                background-color: transparent !important; 
                background-image: none !important;
                border: none !important;
                box-shadow: none !important;
            }

            /* Garante que o ícone branco fica bem visível sobre a nossa nova sombra */
            #n8n-chat .n8n-chat-toggle-button svg {
                filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
            }
        `;
        document.head.appendChild(style);

        const app = createChat({
            webhookUrl: 'https://n8n.dev.livetech.pt/webhook/b29d21a8-9fbd-4cdd-810f-30470bffe32e',
            target: '#n8n-chat',
            mode: 'window',
            initialMessages: ['Olá! 👋 Como posso ajudar?'],
            i18n: {
                en: {
                    title: 'Assistente AI',
                    subtitle: '',
                    footer: '',
                    getStarted: 'Nova conversa',
                    inputPlaceholder: 'Escreva a sua pergunta...',
                    closeButtonTooltip: 'Fechar',
                },
            },
        });

        return () => {
            app.unmount();
            document.head.removeChild(style);
        };
    }, []);

    return (
        <div style={{ position: 'relative' }}>
            
            {/* 2. ESTA AGORA É A VERDADEIRA E ÚNICA FORMA DO BOTÃO */}
            <motion.div
                style={{
                    position: 'fixed',
                    bottom: '16px', // Ajustado ligeiramente para centrar com o ícone
                    right: '16px',
                    width: '76px',  // Tamanho ideal para cobrir a área do chat
                    height: '76px',
                    // GRADIENTE RADIAL: O centro é a tua cor escura, que se funde suavemente com a cor primária e desaparece
                    background: 'radial-gradient(circle, #410002 0%, #B20112 45%, #C4534A 70%, rgba(196, 83, 74, 0) 100%)',
                    filter: 'blur(4px)', // Blur reduzido para não desmanchar o centro do botão, mantendo a borda super suave
                    zIndex: 9998,   
                    pointerEvents: 'none', 
                }}
                animate={{
                    // Rotação abstrata
                    rotate: [0, 360],
                    // A distorção líquida das bordas para dar o efeito AI
                    borderRadius: [
                        "44% 56% 62% 38% / 48% 42% 58% 52%",
                        "62% 38% 52% 48% / 55% 45% 55% 45%",
                        "44% 56% 62% 38% / 48% 42% 58% 52%"
                    ],
                    // Pulsação de tamanho muito leve e fluida
                    scale: [0.96, 1.04, 0.96]
                }}
                transition={{
                    repeat: Infinity,
                    duration: 5, 
                    ease: "easeInOut", // Mudei para easeInOut para tornar o movimento mais orgânico que o linear
                }}
            />

            {/* CONTAINER DO CHAT DA N8N */}
            <div
                id="n8n-chat"
                style={{ 
                    color: 'var(--text-primary-color)', 
                    textAlign: 'start',
                    position: 'relative',
                    zIndex: 9999 
                }}
            />
        </div>
    );
}