"use client"

import { useState } from "react"
import {
  DndContext,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
  closestCorners,
} from "@dnd-kit/core"
import {
  SortableContext,
  verticalListSortingStrategy,
  useSortable,
} from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import { useTaskStore, Task, Sprint } from "@/stores/useTaskStore"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Plus, Calendar, Flag, GripVertical } from "lucide-react"
import { format, isValid } from "date-fns"
import {
  inferSprintStatusForDateRange,
  parseSprintEnd,
  parseSprintStart,
  toLocalDateInputValue,
} from "@/lib/utils"

const statusColumns = ["backlog", "in-progress", "review", "done"] as const
type SprintColumnStatus = typeof statusColumns[number]

const statusLabels: Record<string, string> = {
  backlog: "To Do",
  "in-progress": "In Progress",
  review: "Review",
  done: "Done",
}

const statusColors: Record<string, string> = {
  backlog: "bg-slate-700",
  "in-progress": "bg-blue-600",
  review: "bg-yellow-600",
  done: "bg-green-600",
}

const priorityColors: Record<string, string> = {
  low: "bg-slate-600",
  medium: "bg-blue-600",
  high: "bg-orange-600",
  urgent: "bg-red-600",
}

function formatSprintDateRange(startDate?: string, endDate?: string): string {
  if (!startDate || !endDate) return "No dates"
  const start = parseSprintStart(startDate)
  const end = parseSprintEnd(endDate)
  if (!isValid(start) || !isValid(end)) return "Invalid dates"
  return `${format(start, "MMM d")} - ${format(end, "MMM d, yyyy")}`
}

// Sortable Task Card Component
function SortableTaskCard({
  task,
  onClick,
}: {
  task: Task
  onClick: () => void
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: task.id })

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  }

  return (
    <Card
      ref={setNodeRef}
      style={style}
      className="bg-slate-800 border-slate-700 cursor-pointer hover:border-slate-600 transition-colors group"
      onClick={onClick}
    >
      <CardContent className="p-3">
        <div className="flex items-start gap-2">
          <div
            {...attributes}
            {...listeners}
            className="mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
          >
            <GripVertical className="w-4 h-4 text-slate-500" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between gap-2">
              <h4 className="text-sm font-medium text-slate-200 line-clamp-2">
                {task.title}
              </h4>
            </div>
            <div className="flex items-center gap-2 mt-2">
              <Badge
                className={`${priorityColors[task.priority]} text-white text-xs`}
              >
                {task.priority}
              </Badge>
              <Badge variant="outline" className="text-xs border-slate-600 text-slate-400">
                {task.type}
              </Badge>
              {task.comments && task.comments.length > 0 && (
                <span className="text-xs text-slate-500">
                  💬 {task.comments.length}
                </span>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

// Drag Overlay Task Card (shown while dragging)
function DragOverlayTaskCard({ task }: { task: Task }) {
  return (
    <Card className="bg-slate-800 border-slate-600 shadow-xl rotate-2">
      <CardContent className="p-3">
        <div className="flex items-start gap-2">
          <GripVertical className="w-4 h-4 text-slate-500 mt-0.5" />
          <div className="flex-1 min-w-0">
            <h4 className="text-sm font-medium text-slate-200 line-clamp-2">
              {task.title}
            </h4>
            <div className="flex items-center gap-2 mt-2">
              <Badge
                className={`${priorityColors[task.priority]} text-white text-xs`}
              >
                {task.priority}
              </Badge>
              <Badge variant="outline" className="text-xs border-slate-600 text-slate-400">
                {task.type}
              </Badge>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export function SprintBoard() {
  const {
    tasks,
    sprints,
    selectedSprintId,
    selectSprint,
    updateTask,
    selectTask,
    addSprint,
  } = useTaskStore()

  const [isCreatingSprint, setIsCreatingSprint] = useState(false)
  const [newSprint, setNewSprint] = useState({
    name: "",
    goal: "",
    startDate: "",
    endDate: "",
  })
  const [activeId, setActiveId] = useState<string | null>(null)

  // Sensors for drag detection
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    })
  )

  const projectSprints = sprints

  // Get current sprint
  const currentSprint = sprints.find((s) => s.id === selectedSprintId)

  // Get tasks for current sprint, sorted by updatedAt descending (latest first)
  const sprintTasks = tasks
    .filter((t) => t.sprintId === selectedSprintId)
    .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())

  // Group tasks by status
  const tasksByStatus = statusColumns.reduce((acc, status) => {
    acc[status] = sprintTasks.filter((t) => t.status === status)
    return acc
  }, {} as Record<string, Task[]>)

  // Get active task for drag overlay
  const activeTask = activeId ? tasks.find((t) => t.id === activeId) : null

  const handleCreateSprint = () => {
    if (!newSprint.name) return

    const startDate = newSprint.startDate || toLocalDateInputValue()
    const endDate = newSprint.endDate || toLocalDateInputValue()
    const sprint: Omit<Sprint, "id" | "createdAt"> = {
      name: newSprint.name,
      goal: newSprint.goal,
      startDate,
      endDate,
      status: inferSprintStatusForDateRange(startDate, endDate),
    }

    addSprint(sprint)
    setIsCreatingSprint(false)
    setNewSprint({ name: "", goal: "", startDate: "", endDate: "" })
  }

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string)
  }

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event
    setActiveId(null)

    if (!over) return

    const taskId = active.id as string
    const overId = over.id as string

    // Check if dropped over a column
    if (statusColumns.includes(overId as SprintColumnStatus)) {
      updateTask(taskId, { status: overId as Task["status"] })
      return
    }

    // Check if dropped over another task
    const overTask = tasks.find((t) => t.id === overId)
    if (overTask && overTask.status !== tasks.find((t) => t.id === taskId)?.status) {
      updateTask(taskId, { status: overTask.status })
    }
  }

  if (projectSprints.length === 0 && !isCreatingSprint) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-zinc-400">
        <Flag className="w-12 h-12 mb-4 text-zinc-600" />
        <h3 className="text-lg font-medium text-zinc-300 mb-2">No Sprints Yet</h3>
        <p className="text-sm mb-4">Create your first sprint to start organizing work</p>
        <Button onClick={() => setIsCreatingSprint(true)}>
          <Plus className="w-4 h-4 mr-2" />
          Create Sprint
        </Button>
      </div>
    )
  }

  if (isCreatingSprint) {
    return (
      <div className="max-w-md mx-auto py-8">
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-6 space-y-4">
            <h3 className="text-lg font-medium text-slate-200">Create New Sprint</h3>
            <div>
              <label className="text-sm text-slate-400">Sprint Name</label>
              <input
                type="text"
                value={newSprint.name}
                onChange={(e) => setNewSprint({ ...newSprint, name: e.target.value })}
                placeholder="e.g., Sprint 1 - Foundation"
                className="w-full mt-1 bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
              />
            </div>
            <div>
              <label className="text-sm text-slate-400">Sprint Goal</label>
              <textarea
                value={newSprint.goal}
                onChange={(e) => setNewSprint({ ...newSprint, goal: e.target.value })}
                placeholder="What do you want to achieve?"
                rows={2}
                className="w-full mt-1 bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm text-slate-400">Start Date</label>
                <input
                  type="date"
                  value={newSprint.startDate}
                  onChange={(e) => setNewSprint({ ...newSprint, startDate: e.target.value })}
                  className="w-full mt-1 bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
                />
              </div>
              <div>
                <label className="text-sm text-slate-400">End Date</label>
                <input
                  type="date"
                  value={newSprint.endDate}
                  onChange={(e) => setNewSprint({ ...newSprint, endDate: e.target.value })}
                  className="w-full mt-1 bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
                />
              </div>
            </div>
            <div className="flex gap-2 pt-2">
              <Button onClick={handleCreateSprint} className="flex-1">
                Create Sprint
              </Button>
              <Button variant="outline" onClick={() => setIsCreatingSprint(false)}>
                Cancel
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <div className="space-y-4">
        {/* Sprint Header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <select
              value={selectedSprintId || ""}
              onChange={(e) => selectSprint(e.target.value || null)}
              className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100"
            >
              <option value="">Select a sprint...</option>
              {projectSprints.map((sprint) => (
                <option key={sprint.id} value={sprint.id}>
                  {sprint.name}
                </option>
              ))}
            </select>
            <Button
              size="sm"
              variant="outline"
              onClick={() => setIsCreatingSprint(true)}
            >
              <Plus className="w-4 h-4 mr-1" />
              New Sprint
            </Button>
          </div>

          {currentSprint && (
            <div className="flex items-center gap-4 text-sm text-slate-400">
              <div className="flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                <span>{formatSprintDateRange(currentSprint.startDate, currentSprint.endDate)}</span>
              </div>
              <Badge
                variant={
                  currentSprint.status === "active"
                    ? "default"
                    : currentSprint.status === "completed"
                    ? "secondary"
                    : "outline"
                }
              >
                {currentSprint.status}
              </Badge>
            </div>
          )}
        </div>

        {/* Sprint Goal */}
        {currentSprint?.goal && (
          <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm text-slate-300">
            <span className="font-medium text-slate-200">Goal:</span> {currentSprint.goal}
          </div>
        )}

        {/* Sprint Board */}
        {selectedSprintId ? (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            {statusColumns.map((status) => (
              <div
                key={status}
                id={status}
                className="flex flex-col bg-slate-900/50 rounded-lg p-3"
                data-status={status}
              >
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <div className={`w-2 h-2 rounded-full ${statusColors[status]}`} />
                    <h3 className="font-medium text-slate-300">{statusLabels[status]}</h3>
                  </div>
                  <Badge variant="secondary" className="text-xs">
                    {tasksByStatus[status]?.length || 0}
                  </Badge>
                </div>
                <SortableContext
                  items={tasksByStatus[status]?.map((t) => t.id) || []}
                  strategy={verticalListSortingStrategy}
                >
                  <div className="space-y-2 min-h-[100px]">
                    {tasksByStatus[status]?.map((task) => (
                      <SortableTaskCard
                        key={task.id}
                        task={task}
                        onClick={() => selectTask(task.id)}
                      />
                    ))}
                  </div>
                </SortableContext>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-12 text-slate-500">
            <p>Select a sprint to view the sprint board</p>
          </div>
        )}
      </div>

      <DragOverlay>
        {activeTask ? <DragOverlayTaskCard task={activeTask} /> : null}
      </DragOverlay>
    </DndContext>
  )
}