'use client';

import { useState, useEffect, useCallback, useRef } from 'react';
import { FixedSizeGrid } from 'react-window';
import { Card, CardContent } from '@/components/ui/card';
import { StarRating } from '@/components/star-rating';
import { Film, Image as ImageIcon, HardDrive, Search, Folder, Play, ChevronLeft, Home, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

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

interface BreadcrumbItem {
  name: string;
  path: string;
}

interface VirtualizedFolderGridProps {
  currentPath: string;
  onVideoClick: (item: FileSystemItem) => void;
  onPhotoClick: (item: FileSystemItem, index: number) => void;
  onTextClick: (item: FileSystemItem) => void;
  onBackClick: () => void;
  onBreadcrumbClick: (path: string) => void;
  breadcrumbs: BreadcrumbItem[];
  libraries: {id: number, path: string}[];
  onItemsLoaded?: (items: FileSystemItem[]) => void;
}

const ITEM_HEIGHT = 280; // Increased for folder cards

export default function VirtualizedFolderGrid({ 
  currentPath,
  onVideoClick,
  onPhotoClick,
  onTextClick,
  onBackClick,
  onBreadcrumbClick,
  breadcrumbs,
  libraries,
  onItemsLoaded
}: VirtualizedFolderGridProps) {
  const [items, setItems] = useState<FileSystemItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>('');
  const [containerWidth, setContainerWidth] = useState(0);
  const router = useRouter();
  
  const containerRef = useRef<HTMLDivElement>(null);

  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 formatFilePath = (path: string) => {
    if (!path) return '';
    
    const lastSlashIndex = path.lastIndexOf('/');
    const lastBackslashIndex = path.lastIndexOf('\\');
    const lastSeparatorIndex = Math.max(lastSlashIndex, lastBackslashIndex);
    
    if (lastSeparatorIndex === -1) {
      return path;
    }
    
    const directory = path.substring(0, lastSeparatorIndex);
    const filename = path.substring(lastSeparatorIndex + 1);
    
    if (directory.length <= 40) {
      return `${directory}/${filename}`;
    }
    
    const maxDirLength = 35;
    const startLength = Math.floor(maxDirLength / 2);
    const endLength = maxDirLength - startLength - 3;
    
    const truncatedDir = directory.length > maxDirLength 
      ? `${directory.substring(0, startLength)}...${directory.substring(directory.length - endLength)}`
      : directory;
    
    return `${truncatedDir}/${filename}`;
  };

  const formatTitle = (title: string) => {
    if (!title) return '';
    
    if (title.length <= 40) {
      return title;
    }
    
    return title.length > 60 ? title.substring(0, 60) + '...' : title;
  };

  const getLibraryRoot = (currentPath: string): string | null => {
    if (!currentPath || libraries.length === 0) return null;
    
    for (const library of libraries) {
      if (currentPath.startsWith(library.path)) {
        return library.path;
      }
    }
    return null;
  };

  const getParentPath = (currentPath: string): string => {
    if (!currentPath) return '';
    
    const libraryRoot = getLibraryRoot(currentPath);
    if (!libraryRoot) return '';
    
    if (currentPath === libraryRoot) return '';
    
    const pathParts = currentPath.split('/');
    const libraryParts = libraryRoot.split('/').filter(part => part.length > 0);
    
    const filteredPathParts = pathParts.filter(part => part.length > 0);
    
    if (filteredPathParts.length <= libraryParts.length) return '';
    
    const parentParts = filteredPathParts.slice(0, -1);
    return '/' + parentParts.join('/');
  };

  const fetchItems = useCallback(async (path: string) => {
    setLoading(true);
    setError('');
    try {
      const res = await fetch(`/api/files?path=${encodeURIComponent(path)}`);
      const data = await res.json();
      
      if (!Array.isArray(data)) {
        console.error('Invalid response format:', data);
        setItems([]);
        setError('Invalid response from server');
      } else {
        setItems(data);
      }
    } catch (error) {
      console.error('Error fetching items:', error);
      setItems([]);
      setError('Failed to load directory contents');
    } finally {
      setLoading(false);
    }
  }, []);

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

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

  // Calculate responsive column count and width
  const getColumnCount = useCallback(() => {
    if (containerWidth === 0) return 6;
    if (containerWidth < 640) return 2;
    if (containerWidth < 768) return 3;
    if (containerWidth < 1024) return 4;
    if (containerWidth < 1280) return 5;
    if (containerWidth < 1536) return 6;
    return 7;
  }, [containerWidth]);

  const getColumnWidth = useCallback(() => {
    const cols = getColumnCount();
    const availableWidth = containerWidth - 32;
    const gapWidth = (cols - 1) * 16;
    return Math.floor((availableWidth - gapWidth) / cols);
  }, [containerWidth, getColumnCount]);

  // Update container width on resize
  useEffect(() => {
    const updateWidth = () => {
      if (containerRef.current) {
        setContainerWidth(containerRef.current.offsetWidth);
      }
    };

    updateWidth();
    window.addEventListener('resize', updateWidth);
    return () => window.removeEventListener('resize', updateWidth);
  }, []);

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

  useEffect(() => {
    if (onItemsLoaded) {
      onItemsLoaded(items);
    }
  }, [items, onItemsLoaded]);

  const Cell = ({ columnIndex, rowIndex, style }: any) => {
    const columnCount = getColumnCount();
    const index = rowIndex * columnCount + columnIndex;
    const item = items[index];

    if (!item) return null;

    return (
      <div style={style} className="p-2">
        <div 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 min-h-[240px] ${(item.type === 'video' || item.type === 'photo' || item.type === 'text') ? 'cursor-pointer' : ''}`}>
          <Link href={item.isDirectory ? `/folder-viewer?path=${encodeURIComponent(item.path)}` : '#'} 
                className="block h-full flex flex-col"
                onClick={(e) => {
                  if (item.type === 'video' && item.id) {
                    e.preventDefault();
                    onVideoClick(item);
                  } else if (item.type === 'photo' && item.id) {
                    e.preventDefault();
                    const photoIndex = items.filter(i => i.type === 'photo' && i.id).findIndex(i => i.id === item.id);
                    onPhotoClick(item, photoIndex);
                  } else if (item.type === 'text' && item.id) {
                    e.preventDefault();
                    onTextClick(item);
                  }
                }}>
            <div className="aspect-[4/3] 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 overflow-hidden aspect-[4/3] bg-black rounded-t-xl">
                  {item.type === 'text' ? (
                    // For text files, show a text icon instead of thumbnail
                    <div className="absolute inset-0 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 flex items-center justify-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
                           style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
                        <FileText className="h-8 w-8 text-white" />
                      </div>
                    </div>
                  ) : (
                    // For photos and videos, show thumbnail
                    <img
                      src={item.thumbnail || (item.type === 'video' ? '/placeholder-video.svg' : '/placeholder-photo.svg')}
                      alt={item.name}
                      className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
                    />
                  )}
                  {item.type === 'video' && (
                    <div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
                      <Play className="h-3 w-3" />
                    </div>
                  )}
                  {item.type === 'photo' && (
                    <div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
                      <ImageIcon className="h-3 w-3" />
                    </div>
                  )}
                  {item.type === 'text' && (
                    <div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
                      <FileText className="h-3 w-3" />
                    </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-2.5 flex flex-col flex-1 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
              <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2 leading-tight mb-1 min-h-[2rem]" title={item.name}>{formatTitle(item.name)}</p>
              
              <div className="flex items-center justify-between text-xs mb-1">
                <span className="text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</span>
                {isMediaFile(item) && (item.avg_rating || 0) > 0 && (
                  <StarRating 
                    rating={item.avg_rating || 0}
                    count={item.star_count || 0}
                    size="xs"
                    showCount={false}
                  />
                )}
              </div>
              
              <p 
                className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 leading-tight cursor-help flex-1"
                title={item.path}
              >
                {formatFilePath(item.path)}
              </p>
            </div>
          </Link>
        </div>
      </div>
    );
  };

  const columnCount = getColumnCount();
  const columnWidth = getColumnWidth();
  const rowCount = Math.ceil(items.length / columnCount);

  // Calculate available height for the grid
  const getAvailableHeight = useCallback(() => {
    if (typeof window === 'undefined') return 600;
    
    // Calculate the actual header height and other UI elements
    const headerHeight = 200; // Title, breadcrumbs, back button
    const bottomPadding = 20;
    const availableHeight = window.innerHeight - headerHeight - bottomPadding;
    
    return Math.max(Math.min(availableHeight, window.innerHeight - 100), 400);
  }, []);

  if (!currentPath) {
    return (
      <div className="h-screen flex flex-col overflow-hidden">
        <div className="flex-1 flex items-center justify-center">
          <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>
    );
  }

  if (loading && items.length === 0) {
    return (
      <div className="h-screen flex flex-col overflow-hidden">
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="w-16 h-16 bg-gradient-to-br from-primary to-primary/80 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-pulse shadow-lg">
              <Folder className="h-8 w-8 text-primary-foreground" />
            </div>
            <p className="text-muted-foreground font-medium">Loading directory...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen flex flex-col overflow-hidden">
      <div ref={containerRef} className="flex-1 flex flex-col max-w-7xl mx-auto w-full overflow-hidden">
        {/* Header */}
        <div className="flex-shrink-0 p-6 pb-4">
          {/* Back Button */}
          <div className="flex items-center gap-4 mb-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={onBackClick}
              className="text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors"
              disabled={!getParentPath(currentPath)}
              title={getParentPath(currentPath) ? 'Go to parent directory' : 'Already at library root'}
            >
              <ChevronLeft className="h-4 w-4 mr-2" />
              Back
            </Button>
          </div>

          {/* Breadcrumb Navigation */}
          <nav className="flex items-center flex-wrap gap-2 text-sm font-medium text-zinc-400 mb-4">
            {breadcrumbs.map((breadcrumb, index) => (
              <div key={breadcrumb.path} className="flex items-center gap-2">
                {index > 0 && <span className="text-zinc-600">/</span>}
                <button
                  onClick={() => onBreadcrumbClick(breadcrumb.path)}
                  className={`hover:text-white transition-colors ${
                    index === breadcrumbs.length - 1 
                      ? 'text-white font-semibold cursor-default' 
                      : 'hover:underline cursor-pointer'
                  }`}
                  disabled={index === breadcrumbs.length - 1}
                  title={breadcrumb.path}
                >
                  {index === 0 ? (
                    <div className="flex items-center gap-1">
                      <Home className="h-3 w-3" />
                      <span>{breadcrumb.name}</span>
                    </div>
                  ) : (
                    breadcrumb.name
                  )}
                </button>
              </div>
            ))}
          </nav>

          {/* Current Directory Title */}
          <h1 className="text-3xl font-bold text-white tracking-tight">
            {currentPath ? currentPath.split('/').pop() : 'Libraries'}
          </h1>
        </div>

        {/* Folder Grid Container */}
        <div className="flex-1 relative overflow-hidden">
          {error ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center max-w-sm">
                <div className="w-16 h-16 bg-red-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                  <Folder className="h-8 w-8 text-red-500" />
                </div>
                <h3 className="text-lg font-semibold text-red-400 mb-2">Error Loading Directory</h3>
                <p className="text-sm text-red-500 mb-4">{error}</p>
                <Button
                  onClick={() => currentPath && fetchItems(currentPath)}
                  variant="outline"
                  size="sm"
                  className="border-red-500 text-red-500 hover:bg-red-500/10"
                >
                  Try Again
                </Button>
              </div>
            </div>
          ) : items.length > 0 && containerWidth > 0 ? (
            <div className="h-full relative overflow-hidden">
              <FixedSizeGrid
                columnCount={columnCount}
                columnWidth={columnWidth}
                height={getAvailableHeight()}
                rowCount={rowCount}
                rowHeight={ITEM_HEIGHT}
                width={containerWidth}
                itemData={items}
                className="custom-scrollbar"
              >
                {Cell}
              </FixedSizeGrid>
              
              {/* Fancy scroll indicator */}
              <div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-2 h-32 bg-gradient-to-b from-primary/20 via-primary/40 to-primary/20 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                <div className="w-full h-full bg-gradient-to-b from-primary/60 via-primary to-primary/60 rounded-full scroll-indicator"></div>
              </div>
            </div>
          ) : items.length === 0 ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center max-w-sm">
                <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 className="flex items-center justify-center h-full">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}