"use client"

import * as React from "react"
import { Plus, Pencil, Trash2, CheckCircle2, Circle, Clock, XCircle, Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useGetTasksQuery, useDeleteTaskMutation, useUpdateTaskMutation, useGetTaskStatusesQuery } from "@/api/rtk"
import {
  TASK_MODULE_TYPE_BADGE_CLASS,
  TASK_MODULE_TYPE_LABELS,
  TASK_STATUS_FALLBACK_LABELS,
  taskStatusCatalogLabel,
  type Task,
  type TaskModuleType,
  type TaskStatus,
} from "@/api/rtk/tasks-api"
import { triggerTaskHandedToAE } from "@/store/slices/automation-slice"
import { useAppDispatch } from "@/store/hooks"
import { TaskFormModal } from "./task-form-modal"
import { format } from "date-fns"
import { toast } from "sonner"
import { cn } from "@/lib/utils"

const STATUS_VISUAL: Record<
  TaskStatus,
  { icon: React.ElementType; className: string }
> = {
  RECEIVED: { icon: Clock, className: "bg-slate-100 text-slate-700" },
  IN_PROGRESS: { icon: Clock, className: "bg-blue-100 text-blue-700" },
  TECHNICAL_REVIEW: { icon: Clock, className: "bg-orange-100 text-orange-700" },
  APPROVED: { icon: CheckCircle2, className: "bg-green-100 text-green-700" },
  HANDED_TO_AE: { icon: CheckCircle2, className: "bg-emerald-100 text-emerald-700" },
  TODO: { icon: Circle, className: "bg-slate-100 text-slate-700" },
  DONE: { icon: CheckCircle2, className: "bg-green-100 text-green-700" },
  CANCELLED: { icon: XCircle, className: "bg-red-100 text-red-700" },
}

interface Props {
  dealId: string
  /** When set (e.g. Scoping stage), assignee dropdown only lists these user IDs (deal team). */
  assignableUserIds?: string[] | null
  /**
   * Default module for **new** tasks in the form (Lead vs Deal). The list is not filtered
   * by module so every task linked to this deal/lead shows (avoids DEAL vs LEAD mismatches).
   */
  taskModuleType?: TaskModuleType
}

export function DealTasksWidget({ dealId, assignableUserIds, taskModuleType }: Props) {
  const dispatch = useAppDispatch()
  const [modalOpen, setModalOpen] = React.useState(false)
  const [editingTask, setEditingTask] = React.useState<Task | null>(null)

  const { data, isLoading } = useGetTasksQuery({
    dealId,
    limit: 100,
  })
  const { data: taskStatuses = [] } = useGetTaskStatusesQuery()
  const tasks = data?.data ?? []

  const statusLabel = React.useCallback(
    (code: TaskStatus) =>
      taskStatusCatalogLabel(code, taskStatuses, TASK_STATUS_FALLBACK_LABELS),
    [taskStatuses],
  )
  const [deleteTask] = useDeleteTaskMutation()
  const [updateTask] = useUpdateTaskMutation()
  const taskListRef = React.useRef<HTMLDivElement>(null)
  const [taskListOverflows, setTaskListOverflows] = React.useState(false)

  React.useEffect(() => {
    const el = taskListRef.current
    if (!el || tasks.length === 0) {
      setTaskListOverflows(false)
      return
    }

    const checkOverflow = () => {
      setTaskListOverflows(el.scrollHeight > el.clientHeight + 1)
    }

    checkOverflow()
    const observer = new ResizeObserver(checkOverflow)
    observer.observe(el)
    return () => observer.disconnect()
  }, [tasks.length, isLoading])

  const handleDelete = async (id: string) => {
    if (!confirm("Delete this task?")) return
    try {
      await deleteTask(id).unwrap()
      toast.success("Task deleted")
    } catch {
      toast.error("Failed to delete task")
    }
  }

  const toggleDone = async (task: Task) => {
    let nextStatus: TaskStatus = "DONE"

    if (task.status === "DONE" || task.status === "HANDED_TO_AE") {
      nextStatus = "TODO"
    } else if (taskModuleType === "DEAL") {
      // If deal module, cycle TODO -> HANDED_TO_AE
      nextStatus = "HANDED_TO_AE"
    }

    console.log(`[Widget] Toggling task ${task.id} status. Current: ${task.status}, Next: ${nextStatus}`);

    try {
      await updateTask({ id: task.id, body: { status: nextStatus } }).unwrap()
      if (nextStatus === "HANDED_TO_AE" && dealId) {
        console.log("[Widget] Triggering HANDED_TO_AE automation via Redux...");
        dispatch(triggerTaskHandedToAE(dealId))
      }
    } catch (e) {
      console.error("[Widget] Failed to update task status:", e);
      toast.error("Failed to update task")
    }
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <span className="text-sm font-semibold">Tasks</span>
        <Button
          size="sm"
          variant="outline"
          className="h-7 gap-1 text-xs"
          onClick={() => { setEditingTask(null); setModalOpen(true) }}
        >
          <Plus className="size-3" />
          Add Task
        </Button>
      </div>

      {isLoading ? (
        <p className="text-xs text-muted-foreground">Loading...</p>
      ) : tasks.length === 0 ? (
        <p className="text-xs text-muted-foreground">No tasks yet.</p>
      ) : (
        <div
          ref={taskListRef}
          className={cn(
            "flex max-h-[min(320px,50vh)] flex-col gap-2",
            taskListOverflows && "overflow-y-auto overscroll-y-contain custom-scrollbar",
          )}
        >
          {tasks.map((task) => {
            const vis = STATUS_VISUAL[task.status]
            const StatusIcon = vis.icon
            const label = statusLabel(task.status)
            return (
              <div
                key={task.id}
                className="flex items-start gap-2 rounded-lg border bg-white p-3"
              >
                <button
                  onClick={() => toggleDone(task)}
                  className="mt-0.5 shrink-0 text-muted-foreground hover:text-green-600 transition-colors"
                >
                  <StatusIcon className="size-4" />
                </button>
                <div className="flex-1 min-w-0">
                  <p className={cn("text-sm font-medium", task.status === "DONE" && "line-through text-muted-foreground")}>
                    {task.title}
                  </p>
                  <div className="flex items-center gap-2 mt-1 flex-wrap">
                    {task.assignedTo && (
                      <span className="text-xs text-muted-foreground">{task.assignedTo.name}</span>
                    )}
                    {task.dueDate && (
                      <span className="text-xs text-muted-foreground flex items-center gap-1">
                        Due {format(new Date(task.dueDate), "MMM d")}
                      </span>
                    )}
                    {task.reminderAt && (
                      <span className="text-xs text-indigo-600 font-medium flex items-center gap-1">
                        <Bell className="size-3" />
                        {format(new Date(task.reminderAt), "MMM d, h:mm a")}
                      </span>
                    )}
                    <Badge variant="secondary" className={cn("text-[10px] h-4 px-1.5", vis.className)}>
                      {label}
                    </Badge>
                    {task.moduleType && (
                      <Badge
                        variant="outline"
                        className={cn(
                          "text-[10px] h-4 px-1.5 border font-semibold",
                          TASK_MODULE_TYPE_BADGE_CLASS[task.moduleType],
                        )}
                      >
                        {TASK_MODULE_TYPE_LABELS[task.moduleType]}
                      </Badge>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-0.5 shrink-0">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="size-6"
                    onClick={() => { setEditingTask(task); setModalOpen(true) }}
                  >
                    <Pencil className="size-3" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="size-6 text-red-400 hover:text-red-600 hover:bg-red-50"
                    onClick={() => handleDelete(task.id)}
                  >
                    <Trash2 className="size-3" />
                  </Button>
                </div>
              </div>
            )
          })}
        </div>
      )}

      <TaskFormModal
        open={modalOpen}
        onClose={() => { setModalOpen(false); setEditingTask(null) }}
        task={editingTask}
        dealId={dealId}
        assignableUserIds={assignableUserIds ?? undefined}
        defaultModuleType={taskModuleType ?? "DEAL"}
      />
    </div>
  )
}