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

export default function N8nChat() {
    useEffect(() => {
        const style = document.createElement('style');
        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();
        };
    }, []);

    return (
        <div
            id="n8n-chat"
            style={{ color: 'var(--text-primary-color)', textAlign: 'start'}}
        />
    );
}