"use client"

import { useEffect, useMemo, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { ArrowLeft, Calendar, CheckCircle2 } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { parseSprintEnd, parseSprintStart } from "@/lib/utils"
import { useTaskStore, type SprintStatus, type Task, type TaskStatus } from "@/stores/useTaskStore"

const SPRINT_STATUS_LABELS: Record<SprintStatus, string> = {
  planning: "Planning",
  active: "Active",
  completed: "Completed",
}

const SPRINT_STATUS_BADGE_CLASSES: Record<SprintStatus, string> = {
  planning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
  active: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
  completed: "bg-slate-500/10 text-slate-300 border-slate-500/30",
}

const TASK_STATUS_LABELS: Record<TaskStatus, string> = {
  open: "Open",
  todo: "To Do",
  blocked: "Blocked",
  "in-progress": "In Progress",
  review: "Review",
  validate: "Validate",
  archived: "Archived",
  canceled: "Canceled",
  done: "Done",
}

function formatDateRange(startDate: string, endDate: string): string {
  const start = parseSprintStart(startDate)
  const end = parseSprintEnd(endDate)
  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return "Invalid date range"
  }
  return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`
}

function toTimestamp(value: string): number {
  const timestamp = new Date(value).getTime()
  return Number.isNaN(timestamp) ? 0 : timestamp
}

function TaskSection({
  title,
  emptyState,
  tasks,
  onTaskClick,
}: {
  title: string
  emptyState: string
  tasks: Task[]
  onTaskClick: (taskId: string) => void
}) {
  return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between gap-2">
          <h3 className="font-semibold text-white">{title}</h3>
          <Badge variant="secondary" className="bg-slate-800 text-slate-300">
            {tasks.length}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        {tasks.length === 0 ? (
          <p className="text-sm text-slate-500">{emptyState}</p>
        ) : (
          <div className="space-y-2">
            {tasks.map((task) => (
              <button
                key={task.id}
                type="button"
                className="w-full rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-left hover:border-slate-700 transition-colors"
                onClick={() => onTaskClick(task.id)}
              >
                <div className="flex flex-wrap items-center justify-between gap-2">
                  <p className="text-sm font-medium text-slate-100">{task.title}</p>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline" className="border-slate-700 text-slate-300 text-xs">
                      {TASK_STATUS_LABELS[task.status]}
                    </Badge>
                    <Badge variant="secondary" className="bg-slate-800 text-slate-300 text-xs capitalize">
                      {task.priority}
                    </Badge>
                  </div>
                </div>
              </button>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}

export default function SprintDetailPage() {
  const params = useParams<{ id: string }>()
  const router = useRouter()
  const routeSprintId = Array.isArray(params.id) ? params.id[0] : params.id
  const sprintId = decodeURIComponent(routeSprintId || "")

  const { sprints, tasks, syncFromServer, selectSprint, syncError } = useTaskStore()
  const [authReady, setAuthReady] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    let isMounted = true
    const loadSession = async () => {
      try {
        const res = await fetch("/api/auth/session", { cache: "no-store" })
        if (!res.ok) {
          if (isMounted) router.replace("/login")
          return
        }
        if (isMounted) setAuthReady(true)
      } catch {
        if (isMounted) router.replace("/login")
      }
    }

    void loadSession()
    return () => {
      isMounted = false
    }
  }, [router])

  useEffect(() => {
    if (!authReady) return

    let active = true
    const loadData = async () => {
      setIsLoading(true)
      await syncFromServer({ scope: "all" })
      if (active) setIsLoading(false)
    }

    void loadData()
    return () => {
      active = false
    }
  }, [authReady, syncFromServer])

  const sprint = useMemo(
    () => sprints.find((candidate) => candidate.id === sprintId) || null,
    [sprints, sprintId]
  )

  const sprintTasks = useMemo(
    () =>
      tasks
        .filter((task) => task.sprintId === sprintId)
        .sort((a, b) => toTimestamp(b.updatedAt) - toTimestamp(a.updatedAt)),
    [tasks, sprintId]
  )

  const completedTasks = useMemo(
    () => sprintTasks.filter((task) => task.status === "done" || task.status === "archived"),
    [sprintTasks]
  )
  const canceledTasks = useMemo(
    () => sprintTasks.filter((task) => task.status === "canceled"),
    [sprintTasks]
  )
  const activeTasks = useMemo(
    () =>
      sprintTasks.filter(
        (task) => task.status !== "done" && task.status !== "archived" && task.status !== "canceled"
      ),
    [sprintTasks]
  )

  const completionPercent =
    sprintTasks.length > 0 ? Math.round((completedTasks.length / sprintTasks.length) * 100) : 0

  const openOnBoard = () => {
    if (!sprint) return
    selectSprint(sprint.id)
    router.push("/")
  }

  const openTask = (taskId: string) => {
    router.push(`/tasks/${encodeURIComponent(taskId)}`)
  }

  if (!authReady) {
    return (
      <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center">
        <p className="text-sm text-slate-400">Checking session...</p>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <header className="border-b border-slate-800 bg-slate-900/50 backdrop-blur">
        <div className="max-w-[1800px] mx-auto px-4 py-4">
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              <Button
                variant="outline"
                className="border-slate-700 text-slate-200 hover:bg-slate-800"
                onClick={() => router.push("/sprints")}
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Back to Sprints
              </Button>
              <div>
                <h1 className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                  Sprint Details
                </h1>
                <p className="text-xs md:text-sm text-slate-400 mt-1">
                  Sprint deep link: {sprintId || "Unknown sprint"}
                </p>
              </div>
            </div>
            <Button onClick={openOnBoard} disabled={!sprint}>
              <CheckCircle2 className="w-4 h-4 mr-2" />
              Open on Board
            </Button>
          </div>
        </div>
      </header>

      <div className="max-w-[1800px] mx-auto px-4 py-6 space-y-4">
        {syncError && (
          <div className="rounded-lg border border-red-500/30 bg-red-500/10 text-red-200 text-sm px-3 py-2">
            Sync error: {syncError}
          </div>
        )}

        {isLoading ? (
          <div className="flex items-center justify-center py-12 text-slate-400">
            <span>Loading sprint...</span>
          </div>
        ) : !sprint ? (
          <Card className="bg-slate-900 border-slate-800">
            <CardContent className="p-6 space-y-3">
              <h2 className="text-lg font-semibold text-white">Sprint not found</h2>
              <p className="text-sm text-slate-400">
                No sprint was found for ID: <span className="font-mono">{sprintId || "unknown"}</span>
              </p>
              <Button variant="outline" className="border-slate-700 text-slate-200 hover:bg-slate-800" onClick={() => router.push("/sprints")}>
                Back to Sprints
              </Button>
            </CardContent>
          </Card>
        ) : (
          <>
            <Card className="bg-slate-900 border-slate-800">
              <CardHeader className="pb-3">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <h2 className="text-xl font-semibold text-white">{sprint.name}</h2>
                    {sprint.goal && <p className="text-sm text-slate-300 mt-1">{sprint.goal}</p>}
                  </div>
                  <Badge variant="outline" className={SPRINT_STATUS_BADGE_CLASSES[sprint.status]}>
                    {SPRINT_STATUS_LABELS[sprint.status]}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-2 text-sm text-slate-400">
                  <Calendar className="w-4 h-4" />
                  <span>{formatDateRange(sprint.startDate, sprint.endDate)}</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                  <div className="rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3">
                    <p className="text-xs text-slate-400">Total Tasks</p>
                    <p className="text-2xl font-semibold text-white mt-1">{sprintTasks.length}</p>
                  </div>
                  <div className="rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3">
                    <p className="text-xs text-slate-400">Completed</p>
                    <p className="text-2xl font-semibold text-emerald-300 mt-1">{completedTasks.length}</p>
                  </div>
                  <div className="rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3">
                    <p className="text-xs text-slate-400">Completion</p>
                    <p className="text-2xl font-semibold text-blue-300 mt-1">{completionPercent}%</p>
                  </div>
                </div>

                <div className="space-y-1">
                  <div className="flex items-center justify-between text-xs text-slate-400">
                    <span>Progress</span>
                    <span>{completedTasks.length}/{sprintTasks.length}</span>
                  </div>
                  <div className="h-2 rounded-full bg-slate-800 overflow-hidden">
                    <div
                      className="h-full bg-blue-500 transition-all"
                      style={{ width: `${completionPercent}%` }}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
              <TaskSection
                title="Active Tasks"
                emptyState="No active tasks in this sprint."
                tasks={activeTasks}
                onTaskClick={openTask}
              />
              <TaskSection
                title="Completed Tasks"
                emptyState="No completed tasks in this sprint."
                tasks={completedTasks}
                onTaskClick={openTask}
              />
              <TaskSection
                title="Canceled Tasks"
                emptyState="No canceled tasks in this sprint."
                tasks={canceledTasks}
                onTaskClick={openTask}
              />
            </div>
          </>
        )}
      </div>
    </div>
  )
}
