import React, { useState } from "react";
import { PlusIcon, HorizontaLDots } from "../../icons";
import RelationshipMap from "./RelationshipMap";

export interface Task {
  id: string;
  title: string;
  status: "todo" | "in_progress" | "completed";
  dueDate?: string;
  commentsCount?: number;
  attachmentsCount?: number;
  tags?: { label: string; color?: "brand" | "success" | "warning" | "orange" | "gray" }[];
  assignee?: {
    avatar?: string;
    name?: string;
  };
  description?: string;
  image?: string;
  // Relationship data
  clusterId?: number | null;
  clusterName?: string | null;
  ideaId?: number | null;
  ideaTitle?: string | null;
  keywordIds?: number[];
  keywordNames?: string[];
}

interface KanbanBoardProps {
  tasks: Task[];
  onTaskClick?: (task: Task) => void;
  onTaskMove?: (taskId: string, newStatus: "todo" | "in_progress" | "completed") => void;
  onAddTask?: () => void;
  onFilterChange?: (filter: "All" | "Todo" | "InProgress" | "Completed") => void;
}

const KanbanBoard: React.FC<KanbanBoardProps> = ({
  tasks,
  onTaskClick,
  onTaskMove,
  onAddTask,
  onFilterChange,
}) => {
  const [selectedFilter, setSelectedFilter] = useState<"All" | "Todo" | "InProgress" | "Completed">("All");
  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
  const [draggedTask, setDraggedTask] = useState<Task | null>(null);
  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);

  const filteredTasks = selectedFilter === "All" 
    ? tasks 
    : tasks.filter(task => {
        if (selectedFilter === "Todo") return task.status === "todo";
        if (selectedFilter === "InProgress") return task.status === "in_progress";
        if (selectedFilter === "Completed") return task.status === "completed";
        return true;
      });

  const todoTasks = filteredTasks.filter(t => t.status === "todo");
  const inProgressTasks = filteredTasks.filter(t => t.status === "in_progress");
  const completedTasks = filteredTasks.filter(t => t.status === "completed");

  const handleFilterChange = (filter: "All" | "Todo" | "InProgress" | "Completed") => {
    setSelectedFilter(filter);
    onFilterChange?.(filter);
  };

  const toggleDropdown = (id: string) => {
    setOpenDropdowns(prev => ({ ...prev, [id]: !prev[id] }));
  };

  const closeDropdown = (id: string) => {
    setOpenDropdowns(prev => ({ ...prev, [id]: false }));
  };

  const handleDragStart = (e: React.DragEvent, task: Task) => {
    setDraggedTask(task);
    e.dataTransfer.effectAllowed = "move";
  };

  const handleDragOver = (e: React.DragEvent, status: "todo" | "in_progress" | "completed") => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    setDragOverColumn(status);
  };

  const handleDragLeave = () => {
    setDragOverColumn(null);
  };

  const handleDrop = (e: React.DragEvent, targetStatus: "todo" | "in_progress" | "completed") => {
    e.preventDefault();
    setDragOverColumn(null);
    
    if (draggedTask && draggedTask.status !== targetStatus) {
      onTaskMove?.(draggedTask.id, targetStatus);
    }
    
    setDraggedTask(null);
  };

  return (
    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      {/* Task header Start */}
      <div className="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
        <div className="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
          <div className="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
            <button
              onClick={() => handleFilterChange("All")}
              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
                selectedFilter === "All"
                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400"
              }`}
            >
              All Tasks
              <span
                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
                  selectedFilter === "All"
                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
                    : "bg-white dark:bg-white/[0.03]"
                }`}
              >
                {tasks.length}
              </span>
            </button>

            <button
              onClick={() => handleFilterChange("Todo")}
              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
                selectedFilter === "Todo"
                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400"
              }`}
            >
              To do
              <span
                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
                  selectedFilter === "Todo"
                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
                    : "bg-white dark:bg-white/[0.03]"
                }`}
              >
                {todoTasks.length}
              </span>
            </button>

            <button
              onClick={() => handleFilterChange("InProgress")}
              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
                selectedFilter === "InProgress"
                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400"
              }`}
            >
              In Progress
              <span
                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
                  selectedFilter === "InProgress"
                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
                    : "bg-white dark:bg-white/[0.03]"
                }`}
              >
                {inProgressTasks.length}
              </span>
            </button>

            <button
              onClick={() => handleFilterChange("Completed")}
              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
                selectedFilter === "Completed"
                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400"
              }`}
            >
              Completed
              <span
                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
                  selectedFilter === "Completed"
                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
                    : "bg-white dark:bg-white/[0.03]"
                }`}
              >
                {completedTasks.length}
              </span>
            </button>
          </div>

          <div className="flex flex-wrap items-center gap-3 xl:justify-end">
            <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
              <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" clipRule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
              </svg>
              Filter & Sort
            </button>

            <button
              onClick={onAddTask}
              className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
            >
              Add New Task
              <PlusIcon className="fill-current" width={20} height={20} />
            </button>
          </div>
        </div>
      </div>
      {/* Task header End */}

      {/* Task wrapper Start */}
      <div className="mt-7 grid grid-cols-1 border-t border-gray-200 sm:mt-0 sm:grid-cols-2 xl:grid-cols-3 dark:border-gray-800">
        {/* To do list */}
        <KanbanColumn
          title="To Do"
          tasks={todoTasks}
          count={todoTasks.length}
          status="todo"
          onTaskClick={onTaskClick}
          onDropdownToggle={toggleDropdown}
          onDropdownClose={closeDropdown}
          openDropdown={openDropdowns["todo"] || false}
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          isDragOver={dragOverColumn === "todo"}
        />

        {/* Progress list */}
        <KanbanColumn
          title="In Progress"
          tasks={inProgressTasks}
          count={inProgressTasks.length}
          status="in_progress"
          onTaskClick={onTaskClick}
          onDropdownToggle={toggleDropdown}
          onDropdownClose={closeDropdown}
          openDropdown={openDropdowns["in_progress"] || false}
          borderX
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          isDragOver={dragOverColumn === "in_progress"}
        />

        {/* Completed list */}
        <KanbanColumn
          title="Completed"
          tasks={completedTasks}
          count={completedTasks.length}
          status="completed"
          onTaskClick={onTaskClick}
          onDropdownToggle={toggleDropdown}
          onDropdownClose={closeDropdown}
          openDropdown={openDropdowns["completed"] || false}
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          isDragOver={dragOverColumn === "completed"}
        />
      </div>
      {/* Task wrapper End */}
    </div>
  );
};

interface KanbanColumnProps {
  title: string;
  tasks: Task[];
  count: number;
  status: "todo" | "in_progress" | "completed";
  onTaskClick?: (task: Task) => void;
  onDropdownToggle: (id: string) => void;
  onDropdownClose: (id: string) => void;
  openDropdown: boolean;
  borderX?: boolean;
  onDragStart: (e: React.DragEvent, task: Task) => void;
  onDragOver: (e: React.DragEvent, status: "todo" | "in_progress" | "completed") => void;
  onDragLeave: () => void;
  onDrop: (e: React.DragEvent, status: "todo" | "in_progress" | "completed") => void;
  isDragOver?: boolean;
}

const KanbanColumn: React.FC<KanbanColumnProps> = ({
  title,
  tasks,
  count,
  status,
  onTaskClick,
  onDropdownToggle,
  onDropdownClose,
  openDropdown,
  borderX = false,
  onDragStart,
  onDragOver,
  onDragLeave,
  onDrop,
  isDragOver = false,
}) => {
  const getCountBadgeClass = () => {
    if (status === "in_progress") {
      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
    }
    if (status === "completed") {
      return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
    }
    return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
  };

  return (
    <div
      className={`swim-lane flex flex-col gap-5 p-4 xl:p-6 ${borderX ? "border-x border-gray-200 dark:border-gray-800" : ""} ${
        isDragOver ? "bg-brand-50/50 dark:bg-brand-500/10 border-brand-300 dark:border-brand-500/30" : ""
      } transition-colors`}
      onDragOver={(e) => onDragOver(e, status)}
      onDragLeave={onDragLeave}
      onDrop={(e) => onDrop(e, status)}
    >
      <div className="mb-1 flex items-center justify-between">
        <h3 className="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
          {title}
          <span className={`text-theme-xs inline-flex rounded-full px-2 py-0.5 font-medium ${getCountBadgeClass()}`}>
            {count}
          </span>
        </h3>

        <div className="relative">
          <button
            onClick={() => onDropdownToggle(status)}
            className="text-gray-700 dark:text-gray-400"
          >
            <HorizontaLDots className="fill-current" width={24} height={24} />
          </button>
          {openDropdown && (
            <>
              <div
                className="fixed inset-0 z-30"
                onClick={() => onDropdownClose(status)}
              />
              <div className="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                  Edit
                </button>
                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                  Delete
                </button>
                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
                  Clear All
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      {tasks.map((task) => (
        <TaskCard
          key={task.id}
          task={task}
          onClick={() => onTaskClick?.(task)}
          onDragStart={(e) => onDragStart(e, task)}
        />
      ))}
    </div>
  );
};

interface TaskCardProps {
  task: Task;
  onClick?: () => void;
  onDragStart?: (e: React.DragEvent) => void;
}

const TaskCard: React.FC<TaskCardProps> = ({ task, onClick, onDragStart }) => {
  const getTagClass = (color?: string) => {
    switch (color) {
      case "brand":
        return "bg-brand-50 text-brand-500 dark:bg-brand-500/15 dark:text-brand-400";
      case "success":
        return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
      case "warning":
        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
      case "orange":
        return "bg-orange-400/10 text-orange-400";
      default:
        return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
    }
  };

  return (
    <div
      draggable
      onDragStart={onDragStart}
      onClick={onClick}
      className="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5 cursor-move hover:shadow-md transition-all hover:scale-[1.02] active:scale-[0.98]"
    >
      <div className="flex items-start justify-between gap-6">
        <div className="flex-1">
          {task.image && (
            <div className="my-4">
              <img
                src={task.image}
                alt="task"
                className="overflow-hidden rounded-xl border-[0.5px] border-gray-200 dark:border-gray-800 w-full"
              />
            </div>
          )}
          <h4 className={`text-base text-gray-800 dark:text-white/90 ${task.image ? "mb-2" : "mb-5"}`}>
            {task.title}
          </h4>
          {task.description && (
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{task.description}</p>
          )}

          <div className="flex items-center gap-3">
            {task.dueDate && (
              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
                <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fillRule="evenodd" clipRule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
                </svg>
                {task.dueDate}
              </span>
            )}

            {task.commentsCount !== undefined && (
              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
                <svg className="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" strokeWidth="1.5" strokeLinejoin="round"></path>
                </svg>
                {task.commentsCount}
              </span>
            )}

            {task.attachmentsCount !== undefined && (
              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
                <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fillRule="evenodd" clipRule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
                </svg>
                {task.attachmentsCount}
              </span>
            )}
          </div>

          {task.tags && task.tags.length > 0 && (
            <div className="mt-3 flex flex-wrap gap-2">
              {task.tags.map((tag, index) => (
                <span
                  key={index}
                  className={`text-theme-xs inline-flex rounded-full px-2 py-0.5 font-medium ${getTagClass(tag.color)}`}
                >
                  {tag.label}
                </span>
              ))}
            </div>
          )}

          {/* Relationship Mapping */}
          {(task.clusterId || task.ideaId || (task.keywordNames && task.keywordNames.length > 0)) && (
            <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-800">
              <RelationshipMap
                task={{
                  taskId: Number(task.id),
                  taskTitle: task.title,
                  clusterId: task.clusterId,
                  clusterName: task.clusterName,
                  ideaId: task.ideaId,
                  ideaTitle: task.ideaTitle,
                  keywordIds: task.keywordIds,
                  keywordNames: task.keywordNames,
                }}
              />
            </div>
          )}
        </div>

        {task.assignee?.avatar && (
          <div className="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
            <img src={task.assignee.avatar} alt={task.assignee.name || "user"} />
          </div>
        )}
      </div>
    </div>
  );
};

export default KanbanBoard;

