import { MessageSquareText, Sparkles } from 'lucide-react';
import { useState } from 'react';

import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';

import { ChatbotConversation } from './chatbot-conversation';

/**
 * Floating AI assistant: a launcher button (bottom-right) opening a large,
 * centered modal. Mounted globally for siège / compte principal users only
 * (gated in app-layout).
 */
export function ChatbotWidget() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <button
                type="button"
                onClick={() => setOpen(true)}
                aria-label="Assistant d'analyse"
                className="fixed right-6 bottom-6 z-[60] flex size-14 items-center justify-center rounded-full bg-gradient-to-br from-primary to-secondary text-primary-foreground shadow-xl transition hover:scale-105 active:scale-95"
            >
                <MessageSquareText className="size-6" />
            </button>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="flex h-[88vh] w-full max-w-[min(980px,94vw)] flex-col gap-0 overflow-hidden rounded-2xl border-0 p-0 sm:max-w-[min(980px,94vw)] [&>button:last-child]:top-3.5 [&>button:last-child]:text-primary-foreground [&>button:last-child]:opacity-90">
                    <div className="flex items-center gap-2 bg-gradient-to-r from-primary to-secondary px-5 py-3.5 text-primary-foreground">
                        <Sparkles className="size-5" />
                        <DialogTitle className="text-base font-semibold text-primary-foreground">
                            Assistant d'analyse
                        </DialogTitle>
                    </div>
                    <ChatbotConversation className="min-h-0 flex-1" />
                </DialogContent>
            </Dialog>
        </>
    );
}