"use client";

import { useState, useEffect, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { Folder, File, Image, Film, Play } from "lucide-react";
import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import InlineVideoPlayer from "@/components/inline-video-player";
import { createPortal } from "react-dom";

interface FileSystemItem {
  name: string;
  path: string;
  isDirectory: boolean;
  size: number;
  thumbnail?: string;
  type?: string;
  id?: number;
}

const FolderViewerPage = () => {
  const searchParams = useSearchParams();
  const path = searchParams.get("path");
  const [items, setItems] = useState<FileSystemItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedVideo, setSelectedVideo] = useState<FileSystemItem | null>(null);
  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
  const [isVideoLoading, setIsVideoLoading] = useState(false);

  useEffect(() => {
    if (path) {
      fetchItems(path);
    }
  }, [path]);

  const fetchItems = async (currentPath: string) => {
    setLoading(true);
    try {
      const res = await fetch(`/api/files?path=${currentPath}`);
      const data = await res.json();
      setItems(data);
    } catch (error) {
      console.error('Error fetching items:', error);
    } finally {
      setLoading(false);
    }
  };

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  const getFileIcon = (item: FileSystemItem) => {
    if (item.isDirectory) return <Folder className="text-blue-500" size={48} />;
    if (item.type === 'photo') return <Image className="text-green-500" size={48} />;
    if (item.type === 'video') return <Film className="text-red-500" size={48} />;
    return <File className="text-gray-500" size={48} />;
  };

  const isMediaFile = (item: FileSystemItem) => {
    return item.type === 'video' || item.type === 'photo';
  };

  const handleVideoClick = (item: FileSystemItem) => {
    if (item.type === 'video' && item.id) {
      setIsVideoLoading(true);
      setSelectedVideo(item);
      setIsPlayerOpen(true);
      // Reset loading state after a short delay to allow player to initialize
      setTimeout(() => setIsVideoLoading(false), 500);
    }
  };

  const handleClosePlayer = () => {
    setIsPlayerOpen(false);
    setSelectedVideo(null);
  };

  if (!path) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <p className="text-gray-500 text-lg mb-4">Select a library from the sidebar</p>
          <p className="text-gray-400">Choose a media library above to browse its contents</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-zinc-950">
      {loading && (
        <div className="fixed inset-0 bg-black/5 backdrop-blur-sm z-50 flex items-center justify-center">
          <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-xl">
            <div className="flex items-center space-x-3">
              <div className="animate-spin rounded-full h-5 w-5 border-2 border-slate-900 dark:border-white border-t-transparent"></div>
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">Loading directory...</span>
            </div>
          </div>
        </div>
      )}
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {!path ? (
          <div className="flex flex-col items-center justify-center min-h-[60vh]">
            <div className="text-center max-w-md">
              <div className="w-20 h-20 bg-zinc-900 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
                <Folder className="h-10 w-10 text-blue-500" />
              </div>
              <h2 className="text-2xl font-bold text-white mb-2">Select a Library</h2>
              <p className="text-zinc-400">
                Choose a media library from the sidebar to browse your files
              </p>
            </div>
          </div>
        ) : (
          <>
            <div className="mb-8">
              <nav className="flex items-center space-x-2 text-sm font-medium text-zinc-400 mb-4">
                <Link href="/folder-viewer" className="hover:text-white transition-colors">
                  Libraries
                </Link>
                <span>/</span>
                <span className="text-white font-semibold">{path.split('/').pop()}</span>
              </nav>
              <h1 className="text-3xl font-bold text-white tracking-tight">
                {path.split('/').pop()}
              </h1>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
              {items.map((item) => (
                <div key={item.name} 
                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden ${item.type === 'video' ? 'cursor-pointer' : ''}`}>
                  <Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'} 
                        className="block"
                        onClick={(e) => {
                          if (item.type === 'video' && item.id) {
                            e.preventDefault();
                            handleVideoClick(item);
                          }
                        }}>
                    <div className="aspect-square relative overflow-hidden">
                      {item.isDirectory ? (
                        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center">
                          <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
                               style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
                            <Folder className="h-8 w-8 text-white" />
                          </div>
                        </div>
                      ) : isMediaFile(item) ? (
                        <div className="relative w-full h-full">
                          <img
                            src={item.thumbnail || '/placeholder.svg'}
                            alt={item.name}
                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                          <div className="absolute bottom-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            {item.type === 'video' ? (
                              <div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
                                <Film className="h-4 w-4 text-slate-800" />
                              </div>
                            ) : (
                              <div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
                                <Image className="h-4 w-4 text-slate-800" />
                              </div>
                            )}
                          </div>
                          {item.type === 'video' && (
                            <>
                              {/* Always visible small play icon */}
                              <div className="absolute top-2 right-2 bg-black/70 backdrop-blur-sm rounded-full p-1.5">
                                <Play className="h-3 w-3 text-white" />
                              </div>
                              {/* Large play button on hover */}
                              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div className="bg-white/90 backdrop-blur-sm rounded-full p-3 shadow-lg">
                                  <Play className="h-6 w-6 text-slate-800" />
                                </div>
                              </div>
                              {/* Loading overlay when video is being opened */}
                              {isVideoLoading && selectedVideo?.id === item.id && (
                                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
                                  <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
                                </div>
                              )}
                            </>
                          )}
                        </div>
                      ) : (
                        <div className="absolute inset-0 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center"
                             style={{ background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)' }}>
                          <div className="w-16 h-16 bg-gradient-to-br from-slate-400 to-slate-600 rounded-2xl flex items-center justify-center shadow-lg"
                               style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
                            {getFileIcon(item)}
                          </div>
                        </div>
                      )}
                    </div>
                    <div className="p-3">
                      <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate mb-1">{item.name}</p>
                      <p className="text-xs text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</p>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
            
            {items.length === 0 && !loading && (
              <div className="text-center py-20">
                <div className="max-w-sm mx-auto">
                  <div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <Folder className="h-8 w-8 text-slate-400" />
                  </div>
                  <h3 className="text-lg font-semibold text-slate-700 dark:text-slate-300 mb-2">Empty Directory</h3>
                  <p className="text-sm text-slate-500 dark:text-slate-400">No files or folders found in this location.</p>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* Inline Video Player - Rendered as Portal */}
      {selectedVideo && isPlayerOpen && typeof window !== 'undefined' && createPortal(
        <InlineVideoPlayer
          video={{
            id: selectedVideo.id!,
            title: selectedVideo.name,
            path: selectedVideo.path,
            size: selectedVideo.size,
            thumbnail: selectedVideo.thumbnail || '',
          }}
          isOpen={isPlayerOpen}
          onClose={handleClosePlayer}
        />,
        document.body
      )}
    </div>
  );
};

const FolderViewerPageWrapper = () => (
    <Suspense fallback={<div>Loading...</div>}>
        <FolderViewerPage />
    </Suspense>
)

export default FolderViewerPageWrapper;