"use client";

import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { 
  Search, 
  Filter, 
  Video, 
  Calendar, 
  Eye, 
  Edit, 
  Trash2,
  MoreHorizontal,
  Play
} from 'lucide-react';
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu';

interface HistoryItem {
  id: number;
  title: string;
  type: 'script-to-video' | 'video-to-video';
  status: 'completed' | 'processing' | 'failed';
  createdAt: string;
  duration?: string;
  thumbnail?: string;
}

export function HistoryPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
  const [filteredItems, setFilteredItems] = useState<HistoryItem[]>([]);

  // Mock data - replace with actual API call
  useEffect(() => {
    const mockData: HistoryItem[] = [
      {
        id: 1,
        title: "Sample Script Video",
        type: "script-to-video",
        status: "completed",
        createdAt: "2024-01-15",
        duration: "2:30",
        thumbnail: "/assets/empty_video.png"
      },
      {
        id: 2,
        title: "Video Enhancement Project",
        type: "video-to-video",
        status: "processing",
        createdAt: "2024-01-14",
        duration: "1:45"
      },
      {
        id: 3,
        title: "Marketing Video",
        type: "script-to-video",
        status: "completed",
        createdAt: "2024-01-13",
        duration: "3:15",
        thumbnail: "/assets/empty_video.png"
      }
    ];
    setHistoryItems(mockData);
    setFilteredItems(mockData);
  }, []);

  // Filter items based on search term
  useEffect(() => {
    const filtered = historyItems.filter(item =>
      item.title.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredItems(filtered);
  }, [searchTerm, historyItems]);

  const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case 'completed':
        return 'default';
      case 'processing':
        return 'secondary';
      case 'failed':
        return 'destructive';
      default:
        return 'default';
    }
  };

  const getTypeIcon = (type: string) => {
    return type === 'script-to-video' ? '📝' : '🎥';
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-white">Project History</h1>
          <p className="text-white/70">View and manage your video projects</p>
        </div>
        
        {/* Search and Filter */}
        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
            <Input
              placeholder="Search projects..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 bg-white/5 border-white/20 text-white placeholder:text-white/40"
            />
          </div>
          <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white/10">
            <Filter className="h-4 w-4 mr-2" />
            Filter
          </Button>
        </div>
      </div>

      {/* Project Grid */}
      {filteredItems.length === 0 ? (
        <Card className="p-12 text-center bg-white/5 border-white/10">
          <Video className="h-12 w-12 text-white/40 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-white/70 mb-2">
            {searchTerm ? 'No projects found' : 'No projects yet'}
          </h3>
          <p className="text-white/50">
            {searchTerm 
              ? 'Try adjusting your search terms' 
              : 'Create your first video project to see it here'
            }
          </p>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredItems.map((item) => (
            <Card key={item.id} className="bg-white/5 border-white/10 overflow-hidden hover:bg-white/10 transition-colors">
              {/* Thumbnail */}
              <div className="aspect-video bg-gradient-to-br from-purple-900/20 to-blue-900/20 relative">
                {item.thumbnail ? (
                  <img 
                    src={item.thumbnail} 
                    alt={item.title}
                    className="w-full h-full object-cover"
                  />
                ) : (
                  <div className="flex items-center justify-center h-full">
                    <Video className="h-12 w-12 text-white/40" />
                  </div>
                )}
                
                {/* Play overlay */}
                <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/50">
                  <Button size="sm" className="bg-white/20 hover:bg-white/30">
                    <Play className="h-4 w-4" />
                  </Button>
                </div>

                {/* Type indicator */}
                <div className="absolute top-2 left-2">
                  <span className="text-lg">{getTypeIcon(item.type)}</span>
                </div>

                {/* Duration */}
                {item.duration && (
                  <div className="absolute bottom-2 right-2 bg-black/70 px-2 py-1 rounded text-xs text-white">
                    {item.duration}
                  </div>
                )}
              </div>

              {/* Content */}
              <div className="p-4">
                <div className="flex items-start justify-between mb-2">
                  <h3 className="font-medium text-white truncate flex-1" title={item.title}>
                    {item.title}
                  </h3>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-white/60 hover:text-white">
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>
                        <Eye className="h-4 w-4 mr-2" />
                        View
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Edit className="h-4 w-4 mr-2" />
                        Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem className="text-red-500">
                        <Trash2 className="h-4 w-4 mr-2" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 text-sm text-white/60">
                    <Calendar className="h-3 w-3" />
                    {item.createdAt}
                  </div>
                  <Badge variant={getStatusBadgeVariant(item.status)}>
                    {item.status}
                  </Badge>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}