"use client";

import avatarImage from "@/assets/images/avatar.jpeg";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  Briefcase,
  CalendarDays,
  Check,
  ChevronDown,
  Circle,
  MoreHorizontal,
  Plus,
  Search,
  X,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useMemo, useState } from "react";

type Props = {
  app: string;
  id: string;
};

type TaskCard = {
  id: string;
  title: string;
  progress: number;
  priority: "Highest" | "High Priority" | "Low Priority";
  priorityColor: "red" | "green" | "amber";
  followers: string[];
};

type BoardColumn = {
  id: string;
  title: string;
  headerClass: string;
  shellClass: string;
  dotClass: string;
  widthClass: string;
  tasks: TaskCard[];
};

const BOARD_COLUMNS: BoardColumn[] = [
  {
    id: "pending",
    title: "Pending",
    headerClass: "bg-[#F04438]",
    shellClass: "bg-[#FFF1F1]",
    dotClass: "text-[#F04438]",
    widthClass: "w-[250px]",
    tasks: [
      { id: "p1", title: "HR Mangement Design", progress: 40, priority: "High Priority", priorityColor: "red", followers: ["u1"] },
      { id: "p2", title: "HR Mangement Design", progress: 20, priority: "High Priority", priorityColor: "amber", followers: ["u2"] },
      { id: "p3", title: "HR Mangement Design", progress: 70, priority: "Low Priority", priorityColor: "green", followers: ["u3"] },
    ],
  },
  {
    id: "progress",
    title: "Progress",
    headerClass: "bg-[#3F51B5]",
    shellClass: "bg-[#F1F4FF]",
    dotClass: "text-[#039855]",
    widthClass: "w-[250px]",
    tasks: [
      { id: "r1", title: "HR Mangement Design", progress: 80, priority: "High Priority", priorityColor: "green", followers: ["u1"] },
    ],
  },
  {
    id: "completed",
    title: "Completed",
    headerClass: "bg-[#039855]",
    shellClass: "bg-[#EEFFF4]",
    dotClass: "text-[#F04438]",
    widthClass: "w-[250px]",
    tasks: [
      { id: "c1", title: "HR Mangement Design", progress: 100, priority: "High Priority", priorityColor: "red", followers: ["u2"] },
      { id: "c2", title: "HR Mangement Design", progress: 100, priority: "Low Priority", priorityColor: "green", followers: ["u3"] },
    ],
  },
  {
    id: "in-progress",
    title: "In Progress",
    headerClass: "bg-[#FF8A00]",
    shellClass: "bg-[#FFF8E9]",
    dotClass: "text-[#F79009]",
    widthClass: "w-[170px]",
    tasks: [
      { id: "i1", title: "HR Mangement Design", progress: 40, priority: "High Priority", priorityColor: "amber", followers: ["u1"] },
      { id: "i2", title: "HR Mangement Design", progress: 65, priority: "High Priority", priorityColor: "red", followers: ["u2"] },
      { id: "i3", title: "HR Mangement Design", progress: 35, priority: "Low Priority", priorityColor: "green", followers: ["u3"] },
    ],
  },
];

function TaskItem({ task, dotClass }: { task: TaskCard; dotClass: string }) {
  const priorityPill =
    task.priorityColor === "red"
      ? "bg-[#FFE8E7] text-[#F04438]"
      : task.priorityColor === "amber"
        ? "bg-[#FFF3DD] text-[#F79009]"
      : "bg-[#E8FFF0] text-[#039855]";

  const progressTone = task.progress >= 70 ? "text-[#10B981]" : "text-[#F04438]";

  return (
    <div className="rounded-md border border-[#EDF0F2] bg-white p-2.5">
      <div className="mb-2 flex items-start justify-between gap-2">
        <div className="flex min-w-0 items-center gap-2">
          <Circle className={`size-2.5 fill-current ${dotClass}`} />
          <p className="truncate text-[10px] font-semibold text-[#272833]">{task.title}</p>
        </div>
        <MoreHorizontal className="size-3 text-[#9AA1AB]" />
      </div>

      <div className="mb-1.5 flex items-center justify-between text-[9px] text-[#9AA1AB]">
        <span>Progress</span>
        <span className={cn("font-semibold", progressTone)}>{task.progress}%</span>
      </div>

      <div className="mb-1.5 h-1.5 w-full overflow-hidden rounded bg-[#ECEFF3]">
        <div className="h-full rounded bg-[#FF8A00]" style={{ width: `${task.progress}%` }} />
      </div>

      <div className="mb-2 flex items-center justify-between gap-2">
        <span className={`inline-flex rounded-full px-2 py-0.5 text-[9px] font-semibold ${priorityPill}`}>
          {task.priority}
        </span>
        <Image src={avatarImage} alt="" width={18} height={18} className="size-[18px] rounded-full object-cover" />
      </div>

      <p className="text-[9px] text-[#9AA1AB]">Posted at 12:45 AM</p>
    </div>
  );
}

function BoardColumnView({
  col,
  onAddTask,
}: {
  col: BoardColumn;
  onAddTask: (columnId: string) => void;
}) {
  return (
    <div className={`${col.widthClass} shrink-0 rounded-md p-2 ${col.shellClass}`}>
      <div className={`mb-2 flex items-center justify-between rounded px-3 py-2 text-white ${col.headerClass}`}>
        <h3 className="text-[12px] font-semibold">{col.title}</h3>
        <MoreHorizontal className="size-3" />
      </div>

      <div className="taskboard-column-scroll max-h-[470px] space-y-2 overflow-y-auto pr-1">
        {col.tasks.map((task) => (
          <TaskItem key={task.id} task={task} dotClass={col.dotClass} />
        ))}
      </div>

      <button
        type="button"
        className="mt-2 inline-flex w-full items-center justify-center gap-1 rounded py-1 text-[12px] font-semibold text-[#272833]"
        onClick={() => onAddTask(col.id)}
      >
        <Plus className="size-3" /> Add New Task
      </button>
    </div>
  );
}

export default function ProjectTaskBoardPage({ app, id }: Props) {
  const [columns, setColumns] = useState<BoardColumn[]>(BOARD_COLUMNS);
  const [openBoardModal, setOpenBoardModal] = useState(false);
  const [openTaskModal, setOpenTaskModal] = useState(false);
  const [activeColumnId, setActiveColumnId] = useState<string>(BOARD_COLUMNS[0]?.id ?? "pending");
  const [showFollowersList, setShowFollowersList] = useState(false);

  const [boardName, setBoardName] = useState("Review");
  const [boardColor, setBoardColor] = useState("#836AF9");

  const [taskName, setTaskName] = useState("Review");
  const [taskPriority, setTaskPriority] = useState<"Highest" | "High Priority" | "Low Priority">("Highest");
  const [taskDate, setTaskDate] = useState("Mar 12, 2024");
  const [selectedFollowers, setSelectedFollowers] = useState<string[]>(["u1", "u2", "u3"]);

  const followerOptions = useMemo(
    () => [
      { id: "u1", name: "Alfonso Corder", role: "Senior Web Designer" },
      { id: "u2", name: "Carla Libin", role: "Team Developer" },
      { id: "u3", name: "Omar Septimus", role: "Designer" },
      { id: "u4", name: "Mickael Sol", role: "IT Support" },
      { id: "u5", name: "Janet Adebayo", role: "Team Leader" },
    ],
    [],
  );

  const toggleFollower = (id: string) =>
    setSelectedFollowers((prev) => (prev.includes(id) ? prev.filter((f) => f !== id) : [...prev, id]));

  const addBoard = () => {
    if (!boardName.trim()) return;
    const nextId = `custom-${Date.now()}`;
    setColumns((prev) => [
      ...prev,
      {
        id: nextId,
        title: boardName.trim(),
        headerClass: "",
        shellClass: "bg-[#F7F8FB]",
        dotClass: "text-[#F79009]",
        widthClass: "w-[220px]",
        tasks: [],
      },
    ]);
    setOpenBoardModal(false);
  };

  const openAddTask = (columnId: string) => {
    setActiveColumnId(columnId);
    setShowFollowersList(false);
    setOpenTaskModal(true);
  };

  const addTask = () => {
    if (!taskName.trim()) return;
    const priorityColor = taskPriority === "Low Priority" ? "green" : taskPriority === "Highest" ? "red" : "amber";
    setColumns((prev) =>
      prev.map((col) =>
        col.id === activeColumnId
          ? {
              ...col,
              tasks: [
                ...col.tasks,
                {
                  id: `${col.id}-${Date.now()}`,
                  title: taskName.trim(),
                  progress: 0,
                  priority: taskPriority,
                  priorityColor,
                  followers: selectedFollowers,
                },
              ],
            }
          : col,
      ),
    );
    setOpenTaskModal(false);
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-2">
          <Link href={`/${app}/projects/${id}`} className="rounded bg-white p-2 text-[#383E49]">
            <span aria-hidden>←</span>
          </Link>
          <h1 className="text-xl font-semibold text-[#272833]">Task Board</h1>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <div className="relative min-w-[210px] flex-1 sm:w-[220px] sm:flex-none">
            <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-[#9AA1AB]" />
            <Input
              placeholder="Search for ticket"
              className="h-8 border border-[#E5E7EB] bg-white pl-8 text-[11px] focus-visible:ring-0"
            />
          </div>
          <Button
            className="h-8 rounded bg-[#074473] px-4 text-[10px] font-semibold hover:bg-[#074473]/90"
            onClick={() => setOpenBoardModal(true)}
          >
            Create Task
          </Button>
        </div>
      </div>

      <Card className="border-[#EBEEF2]">
        <CardContent className="p-3 sm:p-4">
          <div className="taskboard-scroll overflow-x-auto pb-2 [-webkit-overflow-scrolling:touch]">
            <div className="flex min-w-[960px] gap-3">
              {columns.map((col) => (
                <BoardColumnView key={col.id} col={col} onAddTask={openAddTask} />
              ))}
            </div>
          </div>
          <div className="mt-2 h-2 w-28 rounded-full bg-[#1F2937]" />
        </CardContent>
      </Card>

      {openBoardModal ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 backdrop-blur-[2px] p-4">
          <div className="w-full max-w-[360px] rounded-xl bg-white p-4 shadow-2xl">
            <div className="mb-3 flex items-center justify-between">
              <span className="inline-flex size-8 items-center justify-center rounded-md border border-[#E5EAF0] text-[#074473]">
                <Briefcase className="size-4" />
              </span>
              <button
                type="button"
                className="inline-flex size-7 items-center justify-center rounded-md bg-[#EEF5FB] text-[#6B7280]"
                onClick={() => setOpenBoardModal(false)}
              >
                <X className="size-4" />
              </button>
            </div>
            <h3 className="mb-3 text-[22px] font-semibold text-[#272833]">Add Task Board</h3>

            <p className="mb-1 text-[12px] text-[#545D69]">Task Board Name</p>
            <Input
              value={boardName}
              onChange={(e) => setBoardName(e.target.value)}
              className="mb-3 h-10 rounded-md border border-[#EEF1F4] bg-[#F8F9FC] text-[13px]"
            />

            <p className="mb-2 text-[12px] text-[#545D69]">Task Board Color</p>
            <div className="mb-4 grid grid-cols-6 gap-2">
              {["#F04438", "#3F51B5", "#039855", "#F97316", "#0EA5E9", "#836AF9"].map((c) => (
                <button
                  key={c}
                  type="button"
                  onClick={() => setBoardColor(c)}
                  className="relative h-9 rounded-md"
                  style={{ backgroundColor: c }}
                >
                  {boardColor === c ? <Check className="absolute inset-0 m-auto size-4 text-white" /> : null}
                </button>
              ))}
            </div>

            <div className="flex items-center justify-center gap-3">
              <Button
                className="h-8 min-w-[100px] rounded bg-[#F79009] text-[11px] font-semibold hover:bg-[#F79009]/90"
                onClick={() => setOpenBoardModal(false)}
              >
                Cancel
              </Button>
              <Button
                className="h-8 min-w-[100px] rounded bg-[#074473] text-[11px] font-semibold hover:bg-[#074473]/90"
                onClick={addBoard}
              >
                Add
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {openTaskModal ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 backdrop-blur-[2px] p-4">
          <div className="w-full max-w-[420px] rounded-xl bg-white p-4 shadow-2xl">
            <div className="mb-3 flex items-center justify-between">
              <span className="inline-flex size-8 items-center justify-center rounded-md border border-[#E5EAF0] text-[#074473]">
                <Briefcase className="size-4" />
              </span>
              <button
                type="button"
                className="inline-flex size-7 items-center justify-center rounded-md bg-[#EEF5FB] text-[#6B7280]"
                onClick={() => setOpenTaskModal(false)}
              >
                <X className="size-4" />
              </button>
            </div>
            <h3 className="mb-3 text-[22px] font-semibold text-[#272833]">Add New</h3>

            <p className="mb-1 text-[12px] text-[#545D69]">Task New</p>
            <Input
              value={taskName}
              onChange={(e) => setTaskName(e.target.value)}
              className="mb-3 h-10 rounded-md border border-[#EEF1F4] bg-[#F8F9FC] text-[13px]"
            />

            <p className="mb-1 text-[12px] text-[#545D69]">Task Priority</p>
            <button
              type="button"
              className="mb-3 flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[13px] text-[#272833]"
              onClick={() =>
                setTaskPriority((prev) =>
                  prev === "Highest" ? "High Priority" : prev === "High Priority" ? "Low Priority" : "Highest",
                )
              }
            >
              <span>{taskPriority}</span>
              <ChevronDown className="size-4 text-[#111827]" />
            </button>

            <p className="mb-1 text-[12px] text-[#545D69]">Due Date</p>
            <button
              type="button"
              className="mb-3 flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[13px] text-[#272833]"
              onClick={() => setTaskDate(taskDate === "Mar 12, 2024" ? "Mar 18, 2024" : "Mar 12, 2024")}
            >
              <span>{taskDate}</span>
              <CalendarDays className="size-4 text-[#6B7280]" />
            </button>

            <p className="mb-1 text-[12px] text-[#545D69]">Task Folwers</p>
            <button
              type="button"
              className="mb-3 flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[13px] text-[#272833]"
              onClick={() => setShowFollowersList((v) => !v)}
            >
              <span>Select</span>
              <ChevronDown className="size-4 text-[#111827]" />
            </button>

            {showFollowersList ? (
              <div className="mb-3 max-h-[170px] space-y-1 overflow-y-auto rounded-md border border-[#EEF1F4] p-2">
                {followerOptions.map((f) => (
                  <div key={f.id} className="flex items-center gap-2 rounded px-1 py-1">
                    <Image src={avatarImage} alt={f.name} width={34} height={34} className="size-[34px] rounded-full" />
                    <div className="min-w-0 grow">
                      <p className="truncate text-[12px] font-medium text-[#272833]">{f.name}</p>
                      <p className="truncate text-[10px] text-[#8B8D97]">{f.role}</p>
                    </div>
                    <button
                      type="button"
                      className="text-[11px] font-semibold text-[#074473]"
                      onClick={() => toggleFollower(f.id)}
                    >
                      {selectedFollowers.includes(f.id) ? "Added" : "Add Item"}
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="mb-3 flex items-center gap-1.5">
                {selectedFollowers.slice(0, 4).map((fId, i) => (
                  <Image key={fId} src={avatarImage} alt="" width={34} height={34} className={`size-[34px] rounded-full border-2 border-white ${i > 0 ? "-ml-2" : ""}`} />
                ))}
                {selectedFollowers.length > 4 ? (
                  <span className="-ml-2 inline-flex size-[34px] items-center justify-center rounded-full border-2 border-white bg-[#074473] text-[11px] font-semibold text-white">
                    +{selectedFollowers.length - 4}
                  </span>
                ) : null}
              </div>
            )}

            <div className="flex items-center justify-center gap-3">
              <Button
                className="h-8 min-w-[100px] rounded bg-[#F79009] text-[11px] font-semibold hover:bg-[#F79009]/90"
                onClick={() => setOpenTaskModal(false)}
              >
                Cancel
              </Button>
              <Button
                className="h-8 min-w-[100px] rounded bg-[#074473] text-[11px] font-semibold hover:bg-[#074473]/90"
                onClick={addTask}
              >
                Add
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}