// components/PDFModal.jsx
import React, { useState, useEffect } from 'react';
import { X, Copy, ExternalLink, Save, Trash2, FileText, Check, Tag, Folder, Plus } from 'lucide-react';
import { formatFileSize } from '../utils/format';
import { fetchCategories, fetchTags, uploadThumbnail } from '../api/pdfs';
import { generatePDFThumbnail } from '../utils/thumbnail';

const PDFModal = ({ pdf, isOpen, onClose, onUpdate, onDelete }) => {
    const [title, setTitle] = useState(pdf?.title || '');
    const [selectedCategories, setSelectedCategories] = useState(pdf?.categories?.map(c => c.id) || []);
    const [selectedTags, setSelectedTags] = useState(pdf?.tags?.map(t => t.name).join(', ') || '');
    const [availableCategories, setAvailableCategories] = useState([]);
    const [isSaving, setIsSaving] = useState(false);
    const [isGeneratingCover, setIsGeneratingCover] = useState(false);
    const [copied, setCopied] = useState(false);
    // Local thumbnail state so the preview updates immediately after generation
    const [localThumbnail, setLocalThumbnail] = useState(pdf?.thumbnail || null);

    useEffect(() => {
        if (pdf) {
            setTitle(pdf.title || '');
            setSelectedCategories(pdf.categories?.map(c => c.id) || []);
            setSelectedTags(pdf.tags?.map(t => t.name).join(', ') || '');
            setLocalThumbnail(pdf.thumbnail || null);
        }
    }, [pdf]);

    useEffect(() => {
        const loadTaxonomies = async () => {
            try {
                const catRes = await fetchCategories();
                if (catRes.success) {
                    setAvailableCategories(catRes.data.categories || []);
                }
            } catch (err) {
                console.error("Error loading taxonomies:", err);
            }
        };

        if (isOpen) {
            loadTaxonomies();
        }
    }, [isOpen]);

    useEffect(() => {
        const handleEscape = (e) => {
            if (e.key === 'Escape') onClose();
        };

        if (isOpen) {
            document.body.style.overflow = 'hidden';
            window.addEventListener('keydown', handleEscape);
        }

        return () => {
            document.body.style.overflow = 'unset';
            window.removeEventListener('keydown', handleEscape);
        };
    }, [isOpen, onClose]);

    const handleSave = async () => {
        setIsSaving(true);
        const tagsArray = selectedTags.split(',').map(tag => tag.trim()).filter(tag => tag !== '');
        await onUpdate({
            ...pdf,
            title,
            categories: selectedCategories,
            tags: tagsArray
        });
        setIsSaving(false);
        onClose();
    };

    const handleCopyShortcode = () => {
        navigator.clipboard.writeText(`[pdf-rack id="${pdf.id}"]`);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
    };

    const handleGenerateCover = async () => {
        try {
            setIsGeneratingCover(true);
            const blob = await generatePDFThumbnail(pdf.url);
            const response = await uploadThumbnail(pdf.id, blob);

            if (response.success && response.data.pdf) {
                const updatedPdf = response.data.pdf;
                onUpdate(updatedPdf, true); // Sync global pdfs state
                setLocalThumbnail(updatedPdf.thumbnail); // Update modal preview immediately
            }
        } catch (err) {
            console.error("Failed to generate cover:", err);
            alert("Failed to generate cover image.");
        } finally {
            setIsGeneratingCover(false);
        }
    };

    if (!isOpen || !pdf) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity"
                onClick={onClose}
            ></div>

            {/* Modal Panel */}
            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col md:flex-row relative z-10 animate-in fade-in zoom-in-95 duration-200">

                {/* Close Button */}
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 z-20 p-2 bg-white/80 hover:bg-white text-slate-500 hover:text-slate-800 rounded-full shadow-sm backdrop-blur-md transition-colors"
                >
                    <X className="size-5" />
                </button>

                {/* Left Side: Preview */}
                <div className="w-full md:w-5/12 bg-slate-100 flex items-center justify-center p-8 border-b md:border-b-0 md:border-r border-slate-200 relative group">
                    {/* Decorative pattern */}
                    <div className="absolute inset-0 opacity-[0.05] bg-[radial-gradient(#4f46e5_1px,transparent_1px)] [background-size:24px_24px]"></div>

                    <div className="relative z-10 p-4 bg-white rounded-xl shadow-lg border border-slate-200/60 text-center w-full max-w-xs aspect-[3/4] flex flex-col items-center justify-center transform transition-transform duration-500 overflow-hidden">
                        {localThumbnail ? (
                            <img
                                src={localThumbnail}
                                alt={pdf.title}
                                className="w-full h-full object-cover rounded-lg"
                            />
                        ) : (
                            <>
                                <div className="bg-indigo-50 p-6 rounded-full mb-6">
                                    <FileText className="size-16 text-indigo-600" strokeWidth={1.5} />
                                </div>
                                <h3 className="text-lg font-semibold text-slate-800 line-clamp-2 px-2">
                                    {pdf.title || pdf.name}
                                </h3>
                                <p className="text-sm text-slate-500 mt-2">
                                    {formatFileSize(pdf.filesize)}
                                </p>
                                <button
                                    onClick={handleGenerateCover}
                                    disabled={isGeneratingCover}
                                    className="mt-6 flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-md disabled:opacity-50"
                                >
                                    {isGeneratingCover ? (
                                        <div className="size-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                    ) : <Plus className="size-4" />}
                                    Generate Cover
                                </button>
                            </>
                        )}
                    </div>

                    <div className="absolute bottom-6 left-6 right-6 flex justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <a
                            href={pdf.url}
                            target="_blank"
                            rel="noreferrer"
                            className="flex items-center gap-2 px-4 py-2 bg-white/90 backdrop-blur text-slate-700 rounded-full shadow-sm hover:bg-white hover:text-indigo-600 font-medium text-sm transition-colors border border-slate-200/50"
                        >
                            <ExternalLink className="size-4" />
                            Open in New Tab
                        </a>
                    </div>
                </div>

                {/* Right Side: Details & Edit */}
                <div className="w-full md:w-7/12 flex flex-col h-full bg-white">
                    <div className="p-8 flex-1 overflow-y-auto">
                        <div className="mb-8">
                            <h2 className="text-2xl font-bold text-slate-900 mb-1">Document Details</h2>
                            <p className="text-slate-500">View and edit information for this PDF.</p>
                        </div>

                        <div className="space-y-6">
                            {/* Title Input */}
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">Display Name</label>
                                <input
                                    type="text"
                                    value={title}
                                    onChange={(e) => setTitle(e.target.value)}
                                    placeholder="Enter document title..."
                                    className="block w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium"
                                />
                            </div>

                            {/* Category & Tags Row */}
                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                <div>
                                    <label className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-2">
                                        <Folder className="size-4 text-slate-400" />
                                        Category
                                    </label>
                                    <select
                                        value={selectedCategories[0] || ''}
                                        onChange={(e) => setSelectedCategories(e.target.value ? [parseInt(e.target.value)] : [])}
                                        className="block w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium appearance-none"
                                    >
                                        <option value="">Uncategorized</option>
                                        {availableCategories.map(cat => (
                                            <option key={cat.id} value={cat.id}>{cat.name}</option>
                                        ))}
                                    </select>
                                </div>
                                <div>
                                    <label className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-2">
                                        <Tag className="size-4 text-slate-400" />
                                        Tags
                                    </label>
                                    <input
                                        type="text"
                                        value={selectedTags}
                                        onChange={(e) => setSelectedTags(e.target.value)}
                                        placeholder="Comma separated tags..."
                                        className="block w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium"
                                    />
                                </div>
                            </div>

                            {/* Info Grid */}
                            <div className="grid grid-cols-2 gap-4">
                                <div className="p-4 rounded-lg bg-slate-50 border border-slate-100">
                                    <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">
                                        Uploaded On
                                    </span>
                                    <span className="text-sm font-medium text-slate-700">
                                        {new Date(pdf.uploaded).toLocaleDateString(undefined, {
                                            year: 'numeric',
                                            month: 'long',
                                            day: 'numeric'
                                        })}
                                    </span>
                                </div>
                                <div className="p-4 rounded-lg bg-slate-50 border border-slate-100">
                                    <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider block mb-1">
                                        File Name
                                    </span>
                                    <span className="text-sm font-medium text-slate-700 truncate block" title={pdf.name}>
                                        {pdf.name}
                                    </span>
                                </div>
                            </div>

                            {/* Shortcode */}
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">Embed Shortcode</label>
                                <div className="flex gap-2">
                                    <code className="flex-1 px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-600 font-mono">
                                        [pdf-rack id="{pdf.id}"]
                                    </code>
                                    <button
                                        onClick={handleCopyShortcode}
                                        className={`flex items-center gap-2 px-4 py-2.5 rounded-lg border font-medium transition-all ${copied
                                            ? 'bg-green-50 text-green-700 border-green-200'
                                            : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50'
                                            }`}
                                    >
                                        {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
                                        {copied ? 'Copied' : 'Copy'}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Footer Actions */}
                    <div className="p-6 border-t border-slate-200 bg-slate-50 flex items-center justify-between gap-4">
                        <button
                            onClick={() => onDelete(pdf.id)}
                            className="flex items-center gap-2 px-4 py-2.5 text-red-600 hover:bg-red-50 hover:text-red-700 rounded-lg font-medium transition-colors text-sm"
                        >
                            <Trash2 className="size-4" />
                            Delete
                        </button>
                        <div className="flex items-center gap-3">
                            <button
                                onClick={onClose}
                                className="px-5 py-2.5 text-slate-600 hover:bg-white hover:text-slate-900 border border-transparent hover:border-slate-200 hover:shadow-sm rounded-lg font-medium transition-all text-sm"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleSave}
                                disabled={isSaving}
                                className="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white hover:bg-indigo-700 rounded-lg font-medium shadow-sm hover:shadow transition-all text-sm disabled:opacity-70 disabled:cursor-not-allowed"
                            >
                                {isSaving ? (
                                    <>
                                        <div className="size-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                                        Saving...
                                    </>
                                ) : (
                                    <>
                                        <Save className="size-4" />
                                        Save Changes
                                    </>
                                )}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PDFModal;