import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
import { Grid3X3, Loader2, Search } from 'lucide-react';
import { useEffect, useState } from 'react';
import { MediaItem } from '../types';
import { MediaDetails } from './MediaDetails';
import { MediaGrid } from './MediaGrid';
import { UploadZone } from './UploadZone';

interface MediaManagerProps {
    items: MediaItem[];
    onSearch?: (query: string) => void;
    onUpload: (files: File[]) => void;
    onDelete: (id: number) => void;
    onUpdate: (item: MediaItem) => void;
    enableMultiSelect?: boolean;
    onSelectionChange?: (items: MediaItem[]) => void;
    isLoading?: boolean;
}

type TabType = 'upload' | 'library';

export function MediaManager({
    items,
    onSearch,
    onUpload,
    onDelete,
    onUpdate,
    enableMultiSelect = false,
    onSelectionChange,
    isLoading = false,
}: MediaManagerProps) {
    const [activeTab, setActiveTab] = useState<TabType>('library');
    const [selectedItems, setSelectedItems] = useState<MediaItem[]>([]);
    const [searchQuery, setSearchQuery] = useState('');
    const [activeItem, setActiveItem] = useState<MediaItem | null>(null);

    // Sync external deletion
    useEffect(() => {
        if (activeItem && !items.find((i) => i.id === activeItem.id)) {
            setActiveItem(null);
            setSelectedItems((prev) => prev.filter((i) => i.id !== activeItem.id));
        }
    }, [items, activeItem]);

    const handleSelect = (item: MediaItem) => {
        if (enableMultiSelect) {
            const alreadySelected = selectedItems.find((i) => i.id === item.id);
            let newSelection;
            if (alreadySelected) {
                newSelection = selectedItems.filter((i) => i.id !== item.id);
            } else {
                newSelection = [...selectedItems, item];
            }
            setSelectedItems(newSelection);
            onSelectionChange?.(newSelection);

            // Show details for the clicked item
            setActiveItem(item);
        } else {
            setSelectedItems([item]);
            setActiveItem(item);
            onSelectionChange?.([item]);
        }
    };

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        onSearch?.(searchQuery);
    };

    const handleUpload = (files: File[]) => {
        onUpload(files);
        // Switch to library tab after upload
        setActiveTab('library');
    };

    return (
        <div className="flex h-full w-full flex-col overflow-hidden ">
            {/* WordPress-style Tabs */}
            <div className="flex border-b border-input">
                <button
                    onClick={() => setActiveTab('upload')}
                    className={cn(
                        'border-b-2 px-5 py-3 text-sm font-medium transition-colors',
                        activeTab === 'upload'
                            ? 'border-[#2271b1] text-[#2271b1] dark:border-blue-500 dark:text-blue-400'
                            : 'border-transparent text-[#50575e] hover:text-[#2271b1] dark:text-zinc-400 dark:hover:text-blue-400',
                    )}
                >
                    Upload Files
                </button>
                <button
                    onClick={() => setActiveTab('library')}
                    className={cn(
                        'border-b-2 px-5 py-3 text-sm font-medium transition-colors',
                        activeTab === 'library'
                            ? 'border-[#2271b1] text-[#2271b1] dark:border-blue-500 dark:text-blue-400'
                            : 'border-transparent text-[#50575e] hover:text-[#2271b1] dark:text-zinc-400 dark:hover:text-blue-400',
                    )}
                >
                    Media Library
                </button>

                {/* Loading indicator */}
                {isLoading && (
                    <div className="ml-auto flex items-center px-4">
                        <Loader2 className="h-4 w-4 animate-spin text-[#2271b1]" />
                    </div>
                )}
            </div>

            {/* Content Area */}
            <div className="sm:flex sm:flex-1 overflow-y-auto">
                {activeTab === 'upload' ? (
                    /* Upload Tab */
                    <div className="m-4 flex flex-1 items-center justify-center p-8">
                        <UploadZone onUpload={handleUpload} className="w-full max-w-xl" />
                    </div>
                ) : (
                    /* Media Library Tab */
                    <>
                        {/* Main Content */}
                        <div className="flex flex-1 flex-col overflow-hidden">


                            {/* Media Grid */}
                            <ScrollArea className="flex-1">
                                <div className="p-3">
                                    {items.length === 0 ? (
                                        <div className="flex flex-col items-center justify-center py-16 text-center">
                                            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[#dcdcde] dark:bg-zinc-700">
                                                <Grid3X3 className="h-8 w-8 text-[#50575e] dark:text-zinc-500" />
                                            </div>
                                            <p className="text-sm text-[#50575e] dark:text-zinc-400">No media files found.</p>
                                            <button
                                                onClick={() => setActiveTab('upload')}
                                                className="mt-2 text-sm text-[#2271b1] hover:underline dark:text-blue-400"
                                            >
                                                Upload files
                                            </button>
                                        </div>
                                    ) : (
                                        <MediaGrid items={items} selectedItems={selectedItems} onSelect={handleSelect} activeItem={activeItem} />
                                    )}
                                </div>
                            </ScrollArea>
                        </div>

                        {/* Right Sidebar - Attachment Details */}
                        {activeItem && (
                            <div className="w-full sm:w-80 flex-shrink-0 border-l border-[#c3c4c7] bg-white dark:border-zinc-700 dark:bg-zinc-800">
                                <MediaDetails
                                    item={activeItem}
                                    onClose={() => setActiveItem(null)}
                                    onDelete={(id) => {
                                        onDelete(id);
                                    }}
                                    onUpdate={onUpdate}
                                />
                            </div>
                        )}
                    </>
                )}
            </div>
        </div>
    );
}