"use client";

import React, { useEffect, useState } from "react";
import { useBlackboardStore, BlackboardTask } from "@/hooks/useBlackboardStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Plus, User, Trash2, ChevronRight, Loader2, Calendar, Pencil, GripVertical } from "lucide-react";
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogTrigger,
  DialogFooter
} from "@/components/ui/dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

// DND Kit Imports
import {
  DndContext,
  DragOverlay,
  closestCorners,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragStartEvent,
  DragOverEvent,
  DragEndEvent,
  useDroppable,
  defaultDropAnimationSideEffects,
  DropAnimation
} from "@dnd-kit/core";
import {
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

// --- Components ---

function DroppableColumn({ 
  status, 
  title, 
  tasks, 
  onEdit, 
  onDelete 
}: { 
  status: BlackboardTask['status']; 
  title: string; 
  tasks: BlackboardTask[];
  onEdit: (task: BlackboardTask) => void;
  onDelete: (id: string) => void;
}) {
  const { setNodeRef } = useDroppable({ id: status });

  return (
    <div className="flex flex-col gap-4 bg-muted/10 rounded-lg border border-border/50 p-4 h-full overflow-hidden">
      <div className="flex items-center justify-between px-2">
        <h2 className="font-black uppercase text-xs tracking-widest flex items-center gap-2 text-foreground">
          <span className={cn("w-2 h-2 rounded-full", 
            status === 'todo' ? 'bg-slate-400' : status === 'in_progress' ? 'bg-amber-500' : 'bg-emerald-500'
          )}></span>
          {title}
          <Badge variant="secondary" className="ml-2 font-mono text-[10px] h-5 px-1.5 border-border/50">{tasks.length}</Badge>
        </h2>
      </div>

    <div 
      ref={setNodeRef}
      data-testid={`column-${status}`}
      className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent min-h-[150px]"
    >
        <SortableContext 
          id={status}
          items={tasks.map(t => t.id)} 
          strategy={verticalListSortingStrategy}
        >
          {tasks.map(task => (
            <SortableTaskCard 
              key={task.id} 
              task={task} 
              onEdit={onEdit} 
              onDelete={onDelete} 
            />
          ))}
        </SortableContext>
        
        {tasks.length === 0 && (
          <div className="h-24 flex flex-col items-center justify-center border-2 border-dashed border-border/20 rounded-lg text-muted-foreground/20">
            <div className="text-[10px] font-black uppercase tracking-widest">Leer</div>
          </div>
        )}
      </div>
    </div>
  );
}

export function SortableTaskCard({ 
  task, 
  onEdit, 
  onDelete,
  isOverlay = false 
}: { 
  task: BlackboardTask; 
  onEdit: (task: BlackboardTask) => void; 
  onDelete: (id: string) => void;
  isOverlay?: boolean;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: task.id, data: { type: 'Task', task } });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
  };

  const getPriorityColor = (p: string) => {
    switch (p) {
      case 'urgent': return 'bg-red-500 text-white';
      case 'high': return 'bg-orange-500 text-white';
      case 'low': return 'bg-blue-500 text-white';
      default: return 'bg-emerald-500 text-white';
    }
  };

  if (isDragging && !isOverlay) {
    return (
      <div 
        ref={setNodeRef} 
        style={style} 
        data-testid="task-ghost"
        className="h-[160px] rounded-lg border-2 border-dashed border-primary/10 bg-primary/5 opacity-30 shadow-inner" 
      />
    );
  }

  return (
    <Card 
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className={cn(
        "group hover:border-primary/50 transition-all hover:shadow-md cursor-grab active:cursor-grabbing border-border/40 bg-card/50 backdrop-blur-sm rounded-lg",
        isOverlay && "shadow-[0_25px_60px_-15px_rgba(0,0,0,0.3)] ring-2 ring-primary border-primary rotate-2 scale-110 z-[100] transition-transform duration-200 ease-out"
      )}
    >
      <CardHeader className="p-4 pb-2 space-y-3">
        <div className="flex items-start justify-between gap-2">
          <div className="flex items-center gap-2 flex-1">
            <div className="p-1 text-muted-foreground/40 group-hover:text-foreground transition-colors">
              <GripVertical className="h-3.5 w-3.5" />
            </div>
            <CardTitle className="text-[13px] font-bold leading-tight group-hover:text-primary transition-colors text-foreground">{task.title}</CardTitle>
          </div>
          <Badge className={cn("text-[8px] uppercase h-4 px-1.5 shrink-0 font-black tracking-tighter border-none", getPriorityColor(task.priority))}>
            {task.priority}
          </Badge>
        </div>
        {task.content && <p className="text-[11px] text-muted-foreground line-clamp-3 leading-normal font-medium ml-6">{task.content}</p>}
      </CardHeader>
      <CardContent className="p-4 pt-2 flex flex-col gap-2">
        <div className="flex items-center gap-2 ml-6">
          <div className="flex items-center gap-1.5 text-[9px] font-black uppercase tracking-tight text-muted-foreground bg-muted/50 px-2 py-1 rounded-lg border border-border/30">
            <User className="h-3 w-3" />
            {task.assigned_to_name || 'Frei'}
          </div>
          <div className="flex items-center gap-1.5 text-[9px] font-black uppercase tracking-tight text-muted-foreground/60 px-2 py-1">
            <Calendar className="h-3 w-3" />
            {new Date(task.created_at).toLocaleDateString()}
          </div>
        </div>
      </CardContent>
      <CardFooter className="p-2 pt-0 flex items-center justify-between border-t border-border/10 mt-1 bg-muted/5 rounded-b-lg">
        <div className="flex items-center ml-6">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                aria-label="Löschen"
                className="h-7 w-7 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 focus-visible:opacity-100 transition-all hover:bg-destructive/10"
                onClick={(e) => {
                  e.stopPropagation();
                  onDelete(task.id);
                }}
              >
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top">Löschen</TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                aria-label="Bearbeiten"
                className="h-7 w-7 text-muted-foreground hover:text-primary opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 focus-visible:opacity-100 transition-all hover:bg-primary/10"
                onClick={(e) => {
                  e.stopPropagation();
                  onEdit(task);
                }}
              >
                <Pencil className="h-3 w-3" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top">Bearbeiten</TooltipContent>
          </Tooltip>
        </div>
      </CardFooter>
    </Card>
  );
}

// --- Main Page ---

export default function BlackboardPage() {
  const { tasks, isLoading, fetchTasks, createTask, updateTask, deleteTask } = useBlackboardStore();
  const { presenceData, fetchPresenceData } = usePresenceStore();
  
  const [localTasks, setLocalTasks] = useState<BlackboardTask[]>([]);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingTask, setEditingTask] = useState<BlackboardTask | null>(null);
  const [activeTask, setActiveTask] = useState<BlackboardTask | null>(null);

  // Synchronize local tasks when store tasks change
  useEffect(() => {
    setLocalTasks(tasks);
  }, [tasks]);
  
  const [taskForm, setTaskForm] = useState<Partial<BlackboardTask>>({
    title: "",
    content: "",
    priority: "normal",
    assigned_to: null
  });

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 5, 
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  useEffect(() => {
    fetchTasks();
    fetchPresenceData();
  }, [fetchTasks, fetchPresenceData]);

  const handleSave = async () => {
    if (!taskForm.title) return;
    if (editingTask) {
      await updateTask(editingTask.id, taskForm);
    } else {
      await createTask(taskForm);
    }
    closeDialog();
  };

  const openEdit = (task: BlackboardTask) => {
    setEditingTask(task);
    setTaskForm({
      title: task.title,
      content: task.content,
      priority: task.priority,
      assigned_to: task.assigned_to
    });
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    setEditingTask(null);
    setTaskForm({ title: "", content: "", priority: "normal", assigned_to: null });
    setIsDialogOpen(false);
  };

  const columns: { title: string; status: BlackboardTask['status'] }[] = [
    { title: "To Do", status: "todo" },
    { title: "In Arbeit", status: "in_progress" },
    { title: "Erledigt", status: "done" }
  ];

  const dropAnimation: DropAnimation = {
    sideEffects: defaultDropAnimationSideEffects({
      styles: {
        active: {
          opacity: '0.4',
        },
      },
    }),
    duration: 350,
    easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
  };

  const onDragStart = (event: DragStartEvent) => {
    if (event.active.data.current?.type === 'Task') {
      setActiveTask(event.active.data.current.task);
    }
  };

  const onDragOver = (event: DragOverEvent) => {
    const { active, over } = event;
    if (!over) return;

    const activeId = active.id.toString();
    const overId = over.id.toString();

    const activeTaskIdx = localTasks.findIndex(t => t.id === activeId);
    if (activeTaskIdx === -1) return;

    let overStatus: BlackboardTask['status'] | null = null;
    if (['todo', 'in_progress', 'done'].includes(overId)) {
      overStatus = overId as BlackboardTask['status'];
    } else {
      const overTask = localTasks.find(t => t.id === overId);
      if (overTask) overStatus = overTask.status;
    }

    if (overStatus && localTasks[activeTaskIdx].status !== overStatus) {
      const updatedTasks = [...localTasks];
      updatedTasks[activeTaskIdx] = { ...updatedTasks[activeTaskIdx], status: overStatus };
      setLocalTasks(updatedTasks);
    }
  };

  const onDragEnd = (event: DragEndEvent) => {
    setActiveTask(null);
    const { active, over } = event;
    if (!over) return;

    const activeTaskId = active.id.toString();
    const currentTask = localTasks.find(t => t.id === activeTaskId);
    const originalTask = tasks.find(t => t.id === activeTaskId);

    if (currentTask && originalTask && currentTask.status !== originalTask.status) {
      updateTask(activeTaskId, { status: currentTask.status });
    }
  };

  return (
    <TooltipProvider>
      <div className="space-y-6 h-full flex flex-col">
        <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Team Blackboard</h1>
          <p className="text-muted-foreground text-sm flex items-center gap-2 text-foreground">
            Zuweisungen und Aufgaben für das Team. 
            {isLoading && <Loader2 className="h-3 w-3 animate-spin" />}
          </p>
        </div>
        
        <Dialog open={isDialogOpen} onOpenChange={(v) => !v && closeDialog()}>
          <DialogTrigger asChild>
            <Button onClick={() => setIsDialogOpen(true)} className="gap-2 font-bold uppercase text-xs tracking-widest px-6 h-10 shadow-lg shadow-primary/20 transition-all hover:scale-105 active:scale-95">
              <Plus className="h-4 w-4" /> Neue Aufgabe
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px] border-border bg-card">
            <DialogHeader>
              <DialogTitle className="text-lg font-black uppercase tracking-tight">
                {editingTask ? 'Aufgabe bearbeiten' : 'Aufgabe erstellen'}
              </DialogTitle>
            </DialogHeader>
            <div className="grid gap-6 py-4">
              <div className="space-y-2">
                <label className="text-[10px] font-black uppercase text-muted-foreground tracking-widest">Titel</label>
                <Input 
                  value={taskForm.title} 
                  onChange={e => setTaskForm({...taskForm, title: e.target.value})}
                  placeholder="Was ist zu tun?"
                  className="bg-muted/20 border-border/50 text-foreground"
                />
              </div>
              <div className="space-y-2">
                <label className="text-[10px] font-black uppercase text-muted-foreground tracking-widest">Details</label>
                <Textarea 
                  value={taskForm.content} 
                  onChange={e => setTaskForm({...taskForm, content: e.target.value})}
                  placeholder="Weitere Infos..."
                  className="bg-muted/20 border-border/50 min-h-[100px] text-foreground"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-[10px] font-black uppercase text-muted-foreground tracking-widest">Priorität</label>
                  <Select 
                    value={taskForm.priority} 
                    onValueChange={(v: any) => setTaskForm({...taskForm, priority: v})}
                  >
                    <SelectTrigger className="bg-muted/20 border-border/50 h-10 text-foreground">
                      <SelectValue placeholder="Wählen" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="low">Niedrig</SelectItem>
                      <SelectItem value="normal">Normal</SelectItem>
                      <SelectItem value="high">Hoch</SelectItem>
                      <SelectItem value="urgent">Dringend</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <label className="text-[10px] font-black uppercase text-muted-foreground tracking-widest">Zuweisung</label>
                  <Select 
                    value={taskForm.assigned_to?.toString() || "none"} 
                    onValueChange={(v) => setTaskForm({...taskForm, assigned_to: v === "none" ? null : parseInt(v)})}
                  >
                    <SelectTrigger className="bg-muted/20 border-border/50 h-10 text-foreground">
                      <SelectValue placeholder="Wählen" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">Niemand</SelectItem>
                      {presenceData?.users?.map(u => (
                        <SelectItem key={u.id} value={u.id.toString()}>{u.name}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
            <DialogFooter className="gap-2">
              <Button variant="ghost" onClick={closeDialog} className="uppercase text-[10px] font-black tracking-widest text-foreground">Abbrechen</Button>
              <Button onClick={handleSave} className="px-8 uppercase text-[10px] font-black tracking-widest">{editingTask ? 'Speichern' : 'Erstellen'}</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <DndContext
        sensors={sensors}
        collisionDetection={closestCorners}
        onDragStart={onDragStart}
        onDragOver={onDragOver}
        onDragEnd={onDragEnd}
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 flex-1 min-h-0 overflow-hidden">
          {columns.map(col => (
            <DroppableColumn
              key={col.status}
              status={col.status}
              title={col.title}
              tasks={localTasks.filter(t => t.status === col.status)}
              onEdit={openEdit}
              onDelete={deleteTask}
            />
          ))}
        </div>

        <DragOverlay dropAnimation={dropAnimation}>
          {activeTask ? (
            <SortableTaskCard 
              task={activeTask} 
              onEdit={() => {}} 
              onDelete={() => {}} 
              isOverlay 
            />
          ) : null}
        </DragOverlay>
      </DndContext>
    </div>
    </TooltipProvider>
  );
}