import React from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  Loader2, 
  CheckCircle2, 
  AlertCircle, 
  X, 
  ChevronDown, 
  ChevronUp, 
  Trash2,
  Clock,
  Activity
} from 'lucide-react';
import { ForensicTask } from '../hooks/useTaskQueue';
import { Button } from './ui/button';
import { Progress } from './ui/progress';
import { Badge } from './ui/badge';
import { ScrollArea } from './ui/scroll-area';
import { cn } from '@/lib/utils';

interface TaskQueueManagerProps {
  tasks: ForensicTask[];
  onRemove: (id: string) => void;
  onClearCompleted: () => void;
  isOpen: boolean;
  onToggle: () => void;
}

export const TaskQueueManager: React.FC<TaskQueueManagerProps> = ({
  tasks,
  onRemove,
  onClearCompleted,
  isOpen,
  onToggle
}) => {
  const activeTasks = tasks.filter(t => t.status === 'processing' || t.status === 'pending');
  const completedTasks = tasks.filter(t => t.status === 'completed' || t.status === 'failed');

  return (
    <div className={cn(
      "fixed bottom-4 right-4 w-80 bg-zinc-900 border border-zinc-800 rounded-lg shadow-2xl overflow-hidden transition-all duration-300 z-[9999]",
      isOpen ? "h-[400px]" : "h-12"
    )}>
      {/* Header */}
      <div 
        className="h-12 px-4 flex items-center justify-between cursor-pointer hover:bg-zinc-800 transition-colors"
        onClick={onToggle}
      >
        <div className="flex items-center gap-2">
          <Activity className={cn("w-4 h-4", activeTasks.length > 0 ? "text-primary animate-pulse" : "text-zinc-500")} />
          <span className="text-xs font-bold uppercase tracking-wider">Task Queue</span>
          {activeTasks.length > 0 && (
            <Badge variant="default" className="h-4 px-1.5 text-[10px]">
              {activeTasks.length}
            </Badge>
          )}
        </div>
        <div className="flex items-center gap-2">
          {isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
        </div>
      </div>

      {isOpen && (
        <div className="flex flex-col h-[calc(400px-48px)]">
          <div className="px-4 py-2 border-b border-zinc-800 flex justify-between items-center bg-zinc-950/50">
            <span className="text-[10px] text-zinc-500 uppercase tracking-widest">
              {tasks.length} Total Tasks
            </span>
            {completedTasks.length > 0 && (
              <Button 
                variant="ghost" 
                size="sm" 
                className="h-6 text-[10px] gap-1 hover:text-destructive"
                onClick={(e) => {
                  e.stopPropagation();
                  onClearCompleted();
                }}
              >
                <Trash2 className="w-3 h-3" />
                Clear
              </Button>
            )}
          </div>

          <ScrollArea className="flex-1">
            <div className="p-4 space-y-4">
              <AnimatePresence initial={false}>
                {tasks.length === 0 ? (
                  <div className="h-32 flex flex-col items-center justify-center text-zinc-600">
                    <Clock className="w-8 h-8 mb-2 opacity-20" />
                    <p className="text-xs italic">No active tasks</p>
                  </div>
                ) : (
                  tasks.map((task) => (
                    <motion.div
                      key={task.id}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -20 }}
                      className="space-y-2 group"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium truncate text-zinc-300">
                            {task.fileName}
                          </p>
                          <div className="flex items-center gap-2 mt-1">
                            {task.status === 'processing' && (
                              <Loader2 className="w-3 h-3 animate-spin text-primary" />
                            )}
                            {task.status === 'completed' && (
                              <CheckCircle2 className="w-3 h-3 text-green-500" />
                            )}
                            {task.status === 'failed' && (
                              <AlertCircle className="w-3 h-3 text-destructive" />
                            )}
                            <span className={cn(
                              "text-[10px] uppercase font-bold",
                              task.status === 'processing' ? "text-primary" :
                              task.status === 'completed' ? "text-green-500" :
                              task.status === 'failed' ? "text-destructive" :
                              "text-zinc-500"
                            )}>
                              {task.status}
                            </span>
                          </div>
                        </div>
                        <Button 
                          variant="ghost" 
                          size="icon" 
                          className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                          onClick={() => onRemove(task.id)}
                        >
                          <X className="w-3 h-3" />
                        </Button>
                      </div>

                      {task.status === 'processing' && (
                        <Progress value={task.progress} className="h-1" />
                      )}
                      
                      {task.error && (
                        <p className="text-[9px] text-destructive leading-tight italic">
                          {task.error}
                        </p>
                      )}
                    </motion.div>
                  ))
                )}
              </AnimatePresence>
            </div>
          </ScrollArea>
        </div>
      )}
    </div>
  );
};