import { MemeCard } from '@/components/custom/meme-card';
import EditorSkeleton from '@/components/editor/EditorSkeleton';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { KeywordBadge } from '@/components/ui/keyword-badge';
import Footer from '@/pages/home/partials/Footer';
import { Link } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import { useEffect, useState } from 'react';
import { route } from 'ziggy-js';
import BrandLogo from '../home/partials/BrandLogo';

interface MemeMedia {
    ids: string;
    name: string;
    description: string;
    keywords: string[];
    action_keywords: string[];
    emotion_keywords: string[];
    misc_keywords: string[];
    mov_url: string;
    webm_url: string;
    gif_url: string;
    webp_url: string;
    slug: string;
}

interface Props {
    meme: MemeMedia;
    relatedMemes: MemeMedia[];
}

export default function MemeShow({ meme, relatedMemes }: Props) {
    const [isClient, setIsClient] = useState(false);
    const [Editor, setEditor] = useState(null);

    useEffect(() => {
        setIsClient(true);
        // Dynamically import Editor only on client-side to avoid SSR issues with Konva
        if (typeof window !== 'undefined') {
            import('@/modules/editor/editor.jsx').then((module) => {
                setEditor(() => module.default);
            });
        }
    }, []);

    const allKeywords = [
        ...(meme.keywords || []),
        ...(meme.action_keywords || []),
        ...(meme.emotion_keywords || []),
        ...(meme.misc_keywords || []),
    ].filter(Boolean);

    return (
        <>
            <div className="space-y-0 bg-neutral-50 py-6 dark:bg-black">
                <div className="container mx-auto px-4">
                    <BrandLogo className="pb-2" />

                    {/* Breadcrumbs */}
                    <Breadcrumb className="mb-6">
                        <BreadcrumbList>
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href={route('home')}>Home</Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator />
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href={route('memes.index')}>Meme Library</Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator />
                            <BreadcrumbItem>
                                <BreadcrumbPage>{meme.name}</BreadcrumbPage>
                            </BreadcrumbItem>
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>

                <div className="w-full">
                    <div className="container mx-auto mb-6 space-y-2 px-4 text-center">
                        <h1 className="text-foreground text-3xl font-bold">{meme.name} Meme</h1>
                        <h2 className="text-muted-foreground">
                            Use our video meme editor to customise your {meme.name} meme and export as MP4 video in minutes!
                        </h2>
                    </div>
                    {isClient && Editor ? (
                        <Editor
                            setInitialMeme={(setMeme) => setMeme(meme)}
                            //setInitialBackground={(setBackground) => setBackground(null)}
                            setInitialText={(setText) => setText('add your meme caption here')}
                        />
                    ) : (
                        <EditorSkeleton />
                    )}
                </div>
                <div className="container mx-auto grid justify-center gap-5 lg:grid-cols-1" id="more-info">
                    <div className="">
                        {/* Keywords */}
                        <Card className="h-auto">
                            <CardHeader>
                                <CardTitle className="text-lg">Know Your Meme</CardTitle>
                                <CardDescription className="hidden"></CardDescription>
                            </CardHeader>
                            <CardContent>
                                <b>Description: </b>
                                {meme.description && (
                                    <div className="mb-4">
                                        <p className="text-muted-foreground text-sm leading-relaxed">{meme.description}</p>
                                    </div>
                                )}
                                <div className="flex flex-wrap gap-2">
                                    {allKeywords.map((keyword, index) => (
                                        <KeywordBadge key={index} keyword={keyword} />
                                    ))}
                                </div>
                            </CardContent>
                        </Card>
                    </div>

                    {/* Related Memes */}
                    <div className="">
                        {relatedMemes.length > 0 && (
                            <Card>
                                <CardHeader>
                                    <CardTitle className="text-lg">Related Memes</CardTitle>
                                    <CardDescription>Similar meme templates you might like</CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
                                        {relatedMemes.map((related) => (
                                            <MemeCard key={related.ids} meme={related} showKeywords={false} />
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}
                    </div>

                    {/* Back to Meme Library Button */}
                    <div className="mt-8 text-center">
                        <Link href={route('memes.index')}>
                            <Button variant="outline" size="lg" className="gap-2">
                                <ArrowLeft className="h-4 w-4" />
                                Back to Meme Library
                            </Button>
                        </Link>
                    </div>
                </div>
                <Footer />
                {/* <AuthUser /> */}
            </div>
        </>
    );
}