"use client";

import React, { useEffect, useState } from 'react';
import { useStore } from '@/lib/store';
import { Copy, Sparkles, RefreshCw, Loader2, Image as ImageIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Prompt, PromptCache } from '@/lib/types';
import { motion, AnimatePresence } from 'framer-motion';

export function PromptLibrary({ onSelect }: { onSelect?: (prompt: string) => void }) {
    const { setPrompt, settings } = useStore();
    const [prompts, setPrompts] = useState<Prompt[]>([]);
    const [loading, setLoading] = useState(true);
    const [generating, setGenerating] = useState(false);
    const [selectedCategory, setSelectedCategory] = useState<string>('All');
    const [selectedSource, setSelectedSource] = useState<string>('All');
    const [searchTerm, setSearchTerm] = useState('');
    const [sortMode, setSortMode] = useState<'all' | 'latest' | 'history' | 'foryou'>('all');

    const fetchPrompts = async () => {
        setLoading(true);
        try {
            const res = await fetch('/api/prompts');
            if (res.ok) {
                const data: PromptCache = await res.json();
                setPrompts(data.prompts);
            }
        } catch (error) {
            console.error("Failed to fetch prompts", error);
        } finally {
            setLoading(false);
        }
    };

    const syncPrompts = async () => {
        setLoading(true);
        try {
            const syncRes = await fetch('/api/prompts/sync', { method: 'POST' });
            if (!syncRes.ok) throw new Error('Sync failed');
            await fetchPrompts();
        } catch (error) {
            console.error("Failed to sync prompts", error);
        } finally {
            setLoading(false);
        }
    };

    const generateMissingPreviews = async () => {
        if (!settings.whiskCookies) {
            alert("Please set Whisk Cookies in Settings first!");
            return;
        }

        setGenerating(true);
        try {
            // Find prompts without images
            const missing = prompts.filter(p => !p.images || p.images.length === 0);
            console.log(`Found ${missing.length} prompts without images.`);

            for (const prompt of missing) {
                try {
                    console.log(`Requesting preview for: ${prompt.title}`);

                    const res = await fetch('/api/prompts/generate', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            id: prompt.id,
                            prompt: prompt.prompt,
                            cookies: settings.whiskCookies
                        })
                    });

                    if (res.ok) {
                        const { url } = await res.json();
                        setPrompts(prev => prev.map(p =>
                            p.id === prompt.id ? { ...p, images: [url, ...(p.images || [])] } : p
                        ));
                    } else {
                        const err = await res.json();
                        if (res.status === 422) {
                            console.warn(`Skipped unsafe prompt "${prompt.title}": ${err.error}`);
                        } else {
                            console.error('API Error:', err);
                        }
                    }

                    // Delay is still good to prevent flooding backend/google
                    await new Promise(r => setTimeout(r, 2000));

                } catch (error) {
                    console.error(`Failed to generate for ${prompt.id}:`, error);
                }
            }
        } catch (e) {
            console.error("Generation process failed:", e);
        } finally {
            setGenerating(false);
        }
    };

    useEffect(() => {
        fetchPrompts();
    }, []);

    const handleSelect = async (p: Prompt) => {
        setPrompt(p.prompt);
        if (onSelect) onSelect(p.prompt);

        // Track usage
        try {
            await fetch('/api/prompts/use', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: p.id })
            });
            // Optimistic update
            setPrompts(prev => prev.map(item =>
                item.id === p.id
                    ? { ...item, useCount: (item.useCount || 0) + 1, lastUsedAt: Date.now() }
                    : item
            ));
        } catch (e) {
            console.error("Failed to track usage", e);
        }
    };

    // Derived State
    const filteredPrompts = prompts.filter(p => {
        const matchesSearch = p.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
            p.prompt.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesCategory = selectedCategory === 'All' || p.category === selectedCategory;
        const matchesSource = selectedSource === 'All' || p.source === selectedSource;
        return matchesSearch && matchesCategory && matchesSource;
    }).sort((a, b) => {
        if (sortMode === 'latest') {
            return (b.createdAt || 0) - (a.createdAt || 0);
        }
        if (sortMode === 'history') {
            return (b.lastUsedAt || 0) - (a.lastUsedAt || 0);
        }
        return 0; // Default order (or ID)
    });

    const displayPrompts = () => {
        if (sortMode === 'history') {
            return filteredPrompts.filter(p => (p.useCount || 0) > 0);
        }
        if (sortMode === 'foryou') {
            // Calculate top categories
            const categoryCounts: Record<string, number> = {};
            prompts.filter(p => (p.useCount || 0) > 0).forEach(p => {
                categoryCounts[p.category] = (categoryCounts[p.category] || 0) + 1;
            });
            const topCategories = Object.entries(categoryCounts)
                .sort(([, a], [, b]) => b - a)
                .slice(0, 3)
                .map(([cat]) => cat);

            if (topCategories.length === 0) return filteredPrompts; // No history yet

            return filteredPrompts.filter(p => topCategories.includes(p.category));
        }
        return filteredPrompts;
    };

    // Pagination State
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(24);

    // Reset pagination when filters change
    useEffect(() => {
        setCurrentPage(1);
    }, [searchTerm, selectedCategory, selectedSource, sortMode]);

    const finalPrompts = displayPrompts();

    // Pagination Logic
    const totalPages = Math.ceil(finalPrompts.length / itemsPerPage);
    const paginatedPrompts = finalPrompts.slice(
        (currentPage - 1) * itemsPerPage,
        currentPage * itemsPerPage
    );

    const uniqueCategories = ['All', ...Array.from(new Set(prompts.map(p => p.category)))].filter(Boolean);
    const uniqueSources = ['All', ...Array.from(new Set(prompts.map(p => p.source)))].filter(Boolean);

    return (
        <div className="max-w-6xl mx-auto p-4 md:p-8 space-y-8 pb-32">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                    <div className="p-3 bg-primary/10 rounded-xl text-primary">
                        <Sparkles className="h-6 w-6" />
                    </div>
                    <div>
                        <h2 className="text-2xl font-bold">Prompt Library</h2>
                        <p className="text-muted-foreground">Curated inspiration from the community.</p>
                    </div>
                </div>
                <div className="flex items-center gap-2">
                    <button
                        onClick={generateMissingPreviews}
                        disabled={generating}
                        className={cn(
                            "p-2 hover:bg-secondary rounded-full transition-colors",
                            generating && "animate-pulse text-yellow-500"
                        )}
                        title="Auto-Generate Missing Previews"
                    >
                        <ImageIcon className="h-5 w-5" />
                    </button>

                    <button
                        onClick={syncPrompts}
                        disabled={loading}
                        className="p-2 hover:bg-secondary rounded-full transition-colors"
                        title="Sync from GitHub"
                    >
                        <RefreshCw className={cn("h-5 w-5", loading && "animate-spin")} />
                    </button>
                    <input
                        type="text"
                        placeholder="Search prompts..."
                        className="px-4 py-2 rounded-lg bg-card border focus:border-primary focus:outline-none w-full md:w-64"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </div>
            </div>

            {generating && (
                <div className="bg-primary/10 border border-primary/20 text-primary p-4 rounded-xl flex items-center gap-3 animate-in fade-in slide-in-from-top-2">
                    <Loader2 className="h-5 w-5 animate-spin" />
                    <span className="font-medium">Generating preview images for library prompts... This may take a while.</span>
                </div>
            )}

            {/* Smart Tabs */}
            <div className="flex items-center gap-1 bg-secondary/30 p-1 rounded-xl w-fit">
                {(['all', 'latest', 'history', 'foryou'] as const).map(mode => (
                    <button
                        key={mode}
                        onClick={() => setSortMode(mode)}
                        className={cn(
                            "px-4 py-2 rounded-lg text-sm font-medium transition-all capitalize",
                            sortMode === mode
                                ? "bg-background text-foreground shadow-sm"
                                : "text-muted-foreground hover:text-foreground hover:bg-background/50"
                        )}
                    >
                        {mode === 'foryou' ? 'For You' : mode}
                    </button>
                ))}
            </div>

            {/* Sub-Categories */}
            {sortMode === 'all' && (
                <div className="flex flex-wrap gap-2 py-4 overflow-x-auto scrollbar-hide">
                    {(() => {
                        const priority = ['NAM', 'NỮ', 'SINH NHẬT', 'HALLOWEEN', 'NOEL', 'NEW YEAR', 'TRẺ EM', 'COUPLE', 'CHA - MẸ', 'MẸ BẦU', 'ĐẶC BIỆT'];

                        // Sort uniqueCategories (which only contains categories that exist in data)
                        const sortedCategories = uniqueCategories.sort((a, b) => {
                            if (a === 'All') return -1;
                            if (b === 'All') return 1;

                            const idxA = priority.indexOf(a);
                            const idxB = priority.indexOf(b);

                            if (idxA !== -1 && idxB !== -1) return idxA - idxB;
                            if (idxA !== -1) return -1;
                            if (idxB !== -1) return 1;

                            return a.localeCompare(b);
                        });

                        return sortedCategories.map(cat => (
                            <button
                                key={cat}
                                onClick={() => setSelectedCategory(cat)}
                                className={cn(
                                    "px-4 py-2 text-sm font-bold uppercase tracking-wider transition-all duration-200 rounded-md whitespace-nowrap",
                                    selectedCategory === cat
                                        ? "bg-[#8B1E1E] text-white border border-white/80 shadow-[0_0_12px_rgba(139,30,30,0.6)]" // Active: Deep Red + Glow
                                        : "text-gray-400 hover:text-yellow-400 border border-transparent hover:bg-white/5"     // Inactive: Yellow Hover
                                )}
                            >
                                {cat}
                            </button>
                        ));
                    })()}
                </div>
            )}

            {/* Source Filter */}
            <div className="flex flex-wrap gap-2 items-center">
                <span className="text-sm font-medium text-muted-foreground mr-2">Sources:</span>
                {uniqueSources.map(source => (
                    <button
                        key={source}
                        onClick={() => setSelectedSource(source)}
                        className={cn(
                            "px-3 py-1 rounded-full text-xs font-medium transition-colors border",
                            selectedSource === source
                                ? "bg-primary text-primary-foreground border-primary"
                                : "bg-card hover:bg-secondary text-muted-foreground border-secondary"
                        )}
                    >
                        {source}
                    </button>
                ))}
            </div>

            {/* Top Pagination Controls */}
            {!loading && totalPages > 1 && (
                <div className="flex items-center justify-end gap-2 py-2">
                    <span className="text-sm font-medium text-muted-foreground mr-2">
                        Page {currentPage} of {totalPages}
                    </span>
                    <button
                        onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                        disabled={currentPage === 1}
                        className="px-3 py-1 rounded-lg bg-secondary text-sm font-medium disabled:opacity-50 hover:bg-secondary/80 transition-colors"
                    >
                        Prev
                    </button>
                    <button
                        onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                        disabled={currentPage === totalPages}
                        className="px-3 py-1 rounded-lg bg-secondary text-sm font-medium disabled:opacity-50 hover:bg-secondary/80 transition-colors"
                    >
                        Next
                    </button>
                </div>
            )}

            {loading && !prompts.length ? (
                <div className="flex justify-center py-20">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                </div>
            ) : (
                <>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <AnimatePresence mode="popLayout">
                            {paginatedPrompts.map((p) => (
                                <motion.div
                                    key={p.id}
                                    layout
                                    initial={{ opacity: 0, scale: 0.9 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    exit={{ opacity: 0, scale: 0.9 }}
                                    className="group relative flex flex-col bg-card border rounded-xl overflow-hidden hover:border-primary/50 transition-all hover:shadow-lg"
                                >
                                    {p.images && p.images.length > 0 ? (
                                        <div className="aspect-video relative overflow-hidden bg-secondary/50">
                                            <img
                                                src={p.images[0]}
                                                alt={p.title}
                                                className="object-cover w-full h-full transition-transform group-hover:scale-105"
                                                loading="lazy"
                                            />
                                        </div>
                                    ) : (
                                        <div className="aspect-video bg-gradient-to-br from-secondary to-background p-4 flex items-center justify-center text-muted-foreground/20">
                                            <Sparkles className="h-12 w-12" />
                                        </div>
                                    )}

                                    <div className="p-4 flex flex-col flex-1 gap-3">
                                        <div className="flex justify-between items-start gap-2">
                                            <h3 className="font-semibold line-clamp-1" title={p.title}>{p.title}</h3>
                                            <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-muted-foreground whitespace-nowrap">
                                                {p.source}
                                            </span>
                                        </div>

                                        <p className="text-sm text-muted-foreground line-clamp-3 flex-1 font-mono bg-secondary/30 p-2 rounded">
                                            {p.prompt}
                                        </p>

                                        <div className="flex items-center justify-between pt-2 border-t mt-auto">
                                            <button
                                                onClick={() => handleSelect(p)}
                                                className="text-xs font-medium text-primary hover:underline flex items-center gap-1"
                                            >
                                                Use Prompt
                                            </button>
                                            <button
                                                onClick={() => navigator.clipboard.writeText(p.prompt)}
                                                className="p-1.5 text-muted-foreground hover:text-primary transition-colors"
                                                title="Copy to clipboard"
                                            >
                                                <Copy className="h-4 w-4" />
                                            </button>
                                        </div>
                                    </div>
                                </motion.div>
                            ))}
                        </AnimatePresence>
                    </div>

                    {/* Pagination Controls */}
                    {totalPages > 1 && (
                        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 py-8 border-t mt-8">
                            <div className="flex items-center gap-2">
                                <span className="text-sm text-muted-foreground">Show:</span>
                                {[24, 48, 96].map(size => (
                                    <button
                                        key={size}
                                        onClick={() => { setItemsPerPage(size); setCurrentPage(1); }}
                                        className={cn(
                                            "px-2 py-1 rounded text-xs font-medium transition-colors",
                                            itemsPerPage === size
                                                ? "bg-primary text-primary-foreground"
                                                : "bg-secondary text-muted-foreground hover:bg-secondary/80"
                                        )}
                                    >
                                        {size}
                                    </button>
                                ))}
                            </div>

                            <div className="flex items-center gap-2">
                                <button
                                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                    disabled={currentPage === 1}
                                    className="px-4 py-2 rounded-lg bg-secondary text-sm font-medium disabled:opacity-50 hover:bg-secondary/80 transition-colors"
                                >
                                    Previous
                                </button>
                                <span className="text-sm font-medium text-muted-foreground">
                                    Page {currentPage} of {totalPages}
                                </span>
                                <button
                                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                                    disabled={currentPage === totalPages}
                                    className="px-4 py-2 rounded-lg bg-secondary text-sm font-medium disabled:opacity-50 hover:bg-secondary/80 transition-colors"
                                >
                                    Next
                                </button>
                            </div>
                        </div>
                    )}
                </>
            )}

            {!loading && finalPrompts.length === 0 && (
                <div className="text-center py-20 text-muted-foreground">
                    {sortMode === 'history' ? "No prompts used yet." : "No prompts found."}
                </div>
            )}
        </div>
    );
}