import { useState, useEffect, useRef } from 'react';
import { Search, X, Check, Image as ImageIcon, Loader2, Upload, Eye, FileText, FileArchive, File as FileIcon } from 'lucide-react';
import { router } from '@inertiajs/react';
import axios from 'axios';
import { toast } from 'sonner';

interface MediaItem {
    id: number;
    file_name: string;
    url: string;
    mime_type: string;
    file_size: number;
}

interface Props {
    open: boolean;
    onClose: () => void;
    onSelect: (media: MediaItem) => void;
    title?: string;
    type?: 'all' | 'image';
}

const FileTypeIcon = ({ mime, className }: { mime: string, className?: string }) => {
    if (mime.startsWith('image/')) return <ImageIcon className={className} />;
    if (mime.includes('pdf')) return <FileText className={className} />;
    if (mime.includes('zip') || mime.includes('compressed')) return <FileArchive className={className} />;
    return <FileIcon className={className} />;
};

export default function MediaPicker({ open, onClose, onSelect, title = "Select Media", type = 'all' }: Props) {
    const [media, setMedia] = useState<MediaItem[]>([]);
    const [loading, setLoading] = useState(false);
    const [search, setSearch] = useState('');
    const [selectedId, setSelectedId] = useState<number | null>(null);
    const [activeTab, setActiveTab] = useState<'library' | 'upload'>('library');
    const [uploading, setUploading] = useState(false);
    const [uploadProgress, setUploadProgress] = useState(0);
    const [previewItem, setPreviewItem] = useState<MediaItem | null>(null);
    const fileInputRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (open && activeTab === 'library') {
            fetchMedia();
        }
    }, [open, activeTab]);

    const fetchMedia = async () => {
        setLoading(true);
        try {
            const response = await axios.get(`/admin/api/media-picker?t=${Date.now()}`);
            setMedia(response.data.data);
        } catch (error) {
            console.error('Failed to fetch media', error);
        } finally {
            setLoading(false);
        }
    };

    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const files = Array.from(e.target.files || []);
        if (files.length === 0) return;

        setUploading(true);
        setUploadProgress(0);

        const formData = new FormData();
        files.forEach(file => formData.append('files[]', file));

        try {
            const response = await axios.post(route('admin.media.store'), formData, {
                headers: { 
                    'Content-Type': 'multipart/form-data',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                onUploadProgress: (progressEvent) => {
                    const progress = Math.round((progressEvent.loaded * 100) / (progressEvent.total || 1));
                    setUploadProgress(progress);
                }
            });

            if (response.data.success && response.data.media) {
                setMedia(prev => [...response.data.media, ...prev]);
                toast.success('Upload complete');
                setActiveTab('library');
            } else {
                fetchMedia();
                setActiveTab('library');
            }
        } catch (error) {
            toast.error('Upload failed');
        } finally {
            setUploading(false);
        }
    };

    if (!open) return null;

    const filteredMedia = media.filter(item => {
        const matchesSearch = item.file_name.toLowerCase().includes(search.toLowerCase());
        const matchesType = type === 'all' || (type === 'image' && item.mime_type.startsWith('image/'));
        return matchesSearch && matchesType;
    });

    const handleConfirm = () => {
        const item = media.find(m => m.id === selectedId);
        if (item) {
            onSelect(item);
            onClose();
        }
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
            <div className="absolute inset-0 bg-ink/40 backdrop-blur-sm" onClick={onClose} />
            
            <div className="relative w-full max-w-4xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
                {/* Header */}
                <div className="px-5 py-3.5 border-b border-[#E8E6DF] flex items-center justify-between">
                    <h3 className="font-display text-lg font-normal text-ink">{title}</h3>
                    <button onClick={onClose} className="p-1.5 text-[#8C92AC] hover:text-ink transition-colors">
                        <X className="h-5 w-5" />
                    </button>
                </div>

                {/* Tabs */}
                <div className="px-5 border-b border-[#E8E6DF] flex items-center gap-6">
                    <button 
                        onClick={() => setActiveTab('upload')}
                        className={`py-2.5 text-[12px] font-semibold border-b-2 transition-all ${
                            activeTab === 'upload' ? 'border-accent text-ink' : 'border-transparent text-[#8C92AC] hover:text-ink'
                        }`}
                    >
                        Upload Files
                    </button>
                    <button 
                        onClick={() => setActiveTab('library')}
                        className={`py-2.5 text-[12px] font-semibold border-b-2 transition-all ${
                            activeTab === 'library' ? 'border-accent text-ink' : 'border-transparent text-[#8C92AC] hover:text-ink'
                        }`}
                    >
                        Library
                    </button>
                </div>

                {activeTab === 'library' ? (
                    <div className="flex-1 flex flex-col overflow-hidden">
                        {/* Toolbar */}
                        <div className="p-3 border-b border-[#E8E6DF] bg-[#FAFAF8] flex items-center gap-4">
                            <div className="relative flex-1">
                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[#C0BDBA]" />
                                <input 
                                    type="text" 
                                    placeholder="Search library..."
                                    value={search}
                                    onChange={e => setSearch(e.target.value)}
                                    className="w-full pl-9 pr-4 py-1.5 bg-white border border-[#E8E6DF] rounded-xl text-[12px] outline-none focus:border-accent"
                                />
                            </div>
                        </div>

                        {/* Grid */}
                        <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
                            {loading ? (
                                <div className="h-full flex items-center justify-center">
                                    <Loader2 className="h-8 w-8 text-accent animate-spin" />
                                </div>
                            ) : filteredMedia.length === 0 ? (
                                <div className="h-full flex flex-col items-center justify-center text-center">
                                    <FileIcon className="h-12 w-12 text-[#C0BDBA] mb-4" />
                                    <p className="text-[#8C92AC]">No items found.</p>
                                </div>
                            ) : (
                                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 gap-3">
                                    {filteredMedia.map((item) => (
                                        <div 
                                            key={item.id}
                                            onClick={() => setSelectedId(item.id)}
                                            className={`relative aspect-square rounded-xl border-2 transition-all cursor-pointer overflow-hidden group ${
                                                selectedId === item.id 
                                                    ? 'border-accent ring-2 ring-accent ring-offset-2' 
                                                    : 'border-[#E8E6DF] hover:border-accent/50'
                                            }`}
                                        >
                                            {item.mime_type.startsWith('image/') ? (
                                                <img src={item.url} alt={item.file_name} className="w-full h-full object-cover" />
                                            ) : (
                                                <div className="w-full h-full bg-[#F5F3EF] flex flex-col items-center justify-center p-2 gap-2 text-center">
                                                    <FileTypeIcon mime={item.mime_type} className="h-6 w-6 text-[#8C92AC]" />
                                                    <span className="text-[9px] font-bold text-[#8C92AC] truncate w-full">{item.file_name}</span>
                                                </div>
                                            )}
                                            
                                            <div className="absolute inset-0 bg-ink/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                                                <button 
                                                    onClick={(e) => { e.stopPropagation(); setPreviewItem(item); }}
                                                    className="p-1.5 bg-white text-ink rounded-lg shadow-lg hover:scale-110 transition-transform"
                                                >
                                                    <Eye className="h-4 w-4" />
                                                </button>
                                            </div>

                                            {selectedId === item.id && (
                                                <div className="absolute inset-0 bg-accent/10 flex items-center justify-center">
                                                    <div className="bg-accent text-white rounded-full p-1 shadow-lg">
                                                        <Check className="h-4 w-4" />
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                ) : (
                    <div className="flex-1 flex flex-col items-center justify-center p-6 overflow-y-auto">
                        <div 
                            className="w-full max-w-lg min-h-[300px] border-2 border-dashed border-[#E8E6DF] rounded-3xl flex flex-col items-center justify-center p-10 bg-[#FAFAF8] hover:bg-white hover:border-accent transition-all group"
                            onDragOver={(e) => e.preventDefault()}
                            onDrop={(e) => {
                                e.preventDefault();
                                const files = e.dataTransfer.files;
                                if (files.length > 0) {
                                    const event = { target: { files } } as any;
                                    handleFileUpload(event);
                                }
                            }}
                        >
                            <div className="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                                <Upload className="h-7 w-7 text-accent" />
                            </div>
                            <h4 className="text-[16px] font-semibold text-ink mb-1.5">Drop files to upload</h4>
                            <p className="text-[13px] text-[#8C92AC] mb-8">PDF, ZIP, Images, etc.</p>
                            
                            <input 
                                type="file" 
                                multiple 
                                className="hidden" 
                                ref={fileInputRef} 
                                onChange={handleFileUpload}
                            />
                            <button 
                                onClick={() => fileInputRef.current?.click()}
                                disabled={uploading}
                                className="px-10 py-3 bg-ink text-white rounded-2xl text-[13px] font-semibold hover:bg-accent transition-all disabled:opacity-50 shadow-lg shadow-ink/10"
                            >
                                {uploading ? `Uploading ${uploadProgress}%` : 'Select Files'}
                            </button>
                        </div>
                    </div>
                )}

                {/* Footer */}
                <div className="px-5 py-3.5 border-t border-[#E8E6DF] flex items-center justify-between bg-[#FAFAF8]">
                    <p className="text-[12px] text-[#8C92AC]">
                        {selectedId ? "1 item selected" : "Select an item to continue"}
                    </p>
                    <div className="flex items-center gap-3">
                        <button 
                            onClick={onClose}
                            className="px-5 py-2 text-[13px] font-semibold text-[#8C92AC] hover:text-ink transition-colors"
                        >
                            Cancel
                        </button>
                        <button 
                            onClick={handleConfirm}
                            disabled={!selectedId}
                            className="px-8 py-2.5 bg-ink text-white rounded-xl text-[13px] font-semibold hover:bg-accent transition-all disabled:opacity-50 shadow-lg shadow-ink/10"
                        >
                            Confirm Selection
                        </button>
                    </div>
                </div>
            </div>

            {/* Sub-Modal: Item Preview */}
            {previewItem && (
                <div className="fixed inset-0 z-[120] flex items-center justify-center p-4 sm:p-10">
                    <div className="absolute inset-0 bg-ink/60 backdrop-blur-md" onClick={() => setPreviewItem(null)} />
                    
                    <div className="relative w-full max-w-4xl bg-white rounded-[2rem] shadow-2xl overflow-hidden flex flex-col lg:flex-row max-h-[85vh] animate-in zoom-in-95 duration-200">
                        <button 
                            onClick={() => setPreviewItem(null)}
                            className="absolute top-5 right-5 z-20 p-2 text-ink hover:scale-110 transition-transform"
                        >
                            <X className="h-6 w-6" />
                        </button>

                        <div className="flex-1 bg-ink/5 flex items-center justify-center overflow-hidden p-6 lg:p-8">
                            {previewItem.mime_type.startsWith('image/') ? (
                                <img src={previewItem.url} alt={previewItem.file_name} className="max-w-full max-h-full object-contain rounded-xl shadow-xl" />
                            ) : (
                                <div className="flex flex-col items-center gap-4">
                                    <FileTypeIcon mime={previewItem.mime_type} className="h-24 w-24 text-[#8C92AC]" />
                                    <p className="text-sm font-semibold text-ink">{previewItem.file_name}</p>
                                </div>
                            )}
                        </div>

                        <div className="w-full lg:w-80 bg-white border-l border-[#E8E6DF] p-6 space-y-6">
                            <h4 className="font-display text-xl text-ink">File Details</h4>
                            <div className="space-y-4">
                                <div>
                                    <label className="text-[10px] font-bold text-[#C0BDBA] uppercase tracking-widest block mb-1">Name</label>
                                    <p className="text-[13px] text-ink font-medium break-all">{previewItem.file_name}</p>
                                </div>
                                <div>
                                    <label className="text-[10px] font-bold text-[#C0BDBA] uppercase tracking-widest block mb-1">Type</label>
                                    <p className="text-[13px] text-ink font-medium uppercase">{previewItem.mime_type.split('/')[1]}</p>
                                </div>
                                <div>
                                    <label className="text-[10px] font-bold text-[#C0BDBA] uppercase tracking-widest block mb-1">Size</label>
                                    <p className="text-[13px] text-ink font-medium">{Math.round(previewItem.file_size / 1024)} KB</p>
                                </div>
                            </div>
                            <button 
                                onClick={() => { setSelectedId(previewItem.id); setPreviewItem(null); }}
                                className="w-full py-3 bg-ink text-white rounded-2xl text-[13px] font-semibold hover:bg-accent transition-all shadow-lg"
                            >
                                Select this file
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}