'use client';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinner';
import { cn } from '@/lib/utils';
import { useMitt } from '@/plugins/MittContext';
import CoinIcon from '@/reusables/coin-icon';
import useMediaStore from '@/stores/MediaStore';
import useUserStore from '@/stores/UserStore';
import { usePage } from '@inertiajs/react';
import { useEffect, useState } from 'react';

const EditorAISheet = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [prompt, setPrompt] = useState('');
    const emitter = useMitt();
    const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints } = useMediaStore();

    const { credits } = useUserStore();
    const { auth } = usePage().props;

    useEffect(() => {
        const openSheetListener = () => {
            setIsOpen(true);
            fetchAIHints();
        };

        emitter.on('open-ai-editor-sheet', openSheetListener);

        return () => {
            emitter.off('open-ai-editor-sheet', openSheetListener);
        };
    }, [emitter, fetchAIHints]);

    const handleOpenChange = (open) => {
        setIsOpen(open);
    };

    const handleSend = () => {
        if (prompt.trim()) {
            generateMeme(prompt);
        }
    };

    return (
        <Sheet open={isOpen} onOpenChange={handleOpenChange}>
            <SheetContent
                side="bottom"
                className={cn('gap-0! rounded-t-4xl pb-1', isGeneratingMeme && '[&>button]:hidden')}
                onInteractOutside={(e) => isGeneratingMeme && e.preventDefault()}
                onEscapeKeyDown={(e) => isGeneratingMeme && e.preventDefault()}
            >
                <SheetHeader className="mb-2 px-5">
                    <SheetTitle className="text-center text-xl font-semibold text-balance">
                        {isGeneratingMeme ? 'Creating...' : 'What meme would you like to create?'}
                    </SheetTitle>
                    <SheetDescription className="hidden"></SheetDescription>
                </SheetHeader>

                <div className="mx-auto w-full max-w-[600px] space-y-4 px-4 pb-4">
                    <div className="space-y-3">
                        <Input
                            disabled={isGeneratingMeme}
                            placeholder="Make a meme for e.g. work life stress"
                            value={prompt}
                            onChange={(e) => setPrompt(e.target.value)}
                            className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-center text-base"
                        />

                        {/* AI Keywords */}
                        {isLoadingAIHints && <div className="text-muted-foreground text-center text-sm">Loading AI hints...</div>}

                        {keywords.length > 0 && !isLoadingAIHints && (
                            <div className="flex flex-wrap justify-center gap-2">
                                {keywords.map((keyword, index) => (
                                    <Button
                                        disabled={isGeneratingMeme}
                                        key={index}
                                        variant="secondary"
                                        size="sm"
                                        className="h-auto rounded-full px-3 py-1 text-xs"
                                        onClick={() => setPrompt(keyword)}
                                    >
                                        {keyword}
                                    </Button>
                                ))}
                            </div>
                        )}
                        <div className={cn('space-y-2', !prompt.trim() && 'invisible')}>
                            {auth.user ? (
                                <>
                                    <Button
                                        onClick={handleSend}
                                        className={cn('w-full rounded-full')}
                                        size="lg"
                                        variant="outline"
                                        disabled={!prompt.trim() || isGeneratingMeme}
                                    >
                                        {isGeneratingMeme ? (
                                            <Spinner className="text-primary h-4 w-4" />
                                        ) : (
                                            <>
                                                Generate Meme
                                                <div className="flex items-center gap-1">
                                                    <CoinIcon></CoinIcon> 2
                                                </div>
                                            </>
                                        )}
                                    </Button>
                                    <div className="text-muted-foreground text-center text-xs">
                                        A new meme costs 1 credit for AI captions & 1 credit for AI background.{' '}
                                    </div>
                                    <div className="text-muted-foreground text-center text-xs">You have {credits} credits remaining.</div>
                                </>
                            ) : (
                                <>
                                    <div className="text-muted-foreground text-center text-xs">Login / Signup to use AI features.</div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
};

export default EditorAISheet;