"use client";

import { trpc } from "@/app/_trpc/client";
import ModifyTaskSidebar from "@/components/tasks/ModifyTask";
import WorkingTaskTimer from "@/components/tasks/WorkingTaskTimer";
import { Badge } from "@/components/ui/badge";
import { cn, getPriorityColor } from "@/lib/utils";
import {
  SquareUserRound,
} from "lucide-react";
import { useMemo, useState } from "react";
import useKanvanTask from "../hooks/useKanvanTask";
import {
  EmplyPlaceHolder,
  EmptyIcon,
  EmptyTitle,
} from "@/components/EmplyPlaceHolder";
import { SelectedTask } from "@/types";
import { Task } from "@/server/task/domain/models";

const getStatusColorBg = (status: string) => {
  switch (status) {
    case "no iniciada":
      return "bg-yellow-500";
    case "en proceso":
      return "bg-blue-500";
    case "completada":
      return "bg-green-300";
    case "revisada":
      return "bg-green-700";
    case "cancelada":
      return "bg-red-600";
    case "reabierta":
      return "bg-blue-800";
    case "no completada":
      return "bg-purple-500";
    default:
      return "bg-yellow-700";
  }
};

const TaskListCanvas = ({
  searchParams,
}: {
  searchParams: Record<string, any>;
}) => {
  const [selectedTask, setselectedTask] = useState<Task | null>(null);
  const [tasks] = trpc.tasks.getProjectTasks.useSuspenseQuery(searchParams, {
    refetchOnMount: false,
  });

  const { kanvanTasks } = useKanvanTask(tasks);

  // // Si no hay tareas, pero no hubo errores
  if (!kanvanTasks?.length) {
    return (
      <div className="min-h-[55vh] grid place-content-center">
        <EmplyPlaceHolder>
          <EmptyIcon iconName="notFoundCat"  className="text-primary/80" />
          <EmptyTitle className="mt-1" >No tienes tareas asignadas!</EmptyTitle>
        </EmplyPlaceHolder>
      </div>
    ); 
  }

 
  return (
    <div>
      <div className=" flex pb-5 gap-1  overflow-x-scroll min-h-[70vh]">
        {kanvanTasks?.map(
          ({ status, items }: { status: string; items: any }) => {
            return (
              <div
                key={status}
                className=" min-h-[200px] min-w-[290px] h-fit rounded-sm  px-2 "
              >
                <div className="flex items-center gap-2  text-black  border-b-2 border-dashed border-gray-500  py-1 font-semibold">
                  <h3 className=" font-light capitalize text-base ">
                    {status}
                  </h3>
                  <div
                    className={cn(
                      "w-4 h-2 bg-red-500  rounded-2xl",
                      getStatusColorBg(status)
                    )}
                  ></div>
                </div>
                <div className=" bg-transparent space-y-4">
                  {items?.map((task: any) => {
                    return (
                      <article
                        key={task.id}
                        className={cn(
                          "relative flex gap-1  space-y-1 bg-white/50 rounded-sm py-1",
                        )}
                      >
                        <div className={cn("w-1.5  border",getStatusColorBg(status))}/>
                       <div className="flex-1">
                       <Badge
                          className={cn(
                            "absolute top-1 text-white rounded-2xl text-xs capitalize right-1",
                            getPriorityColor(task.priority)
                          )}
                        >
                          {task.priority}
                        </Badge>

                        <div className=" flex items-center gap-1">
                          <p className="text-xs text-gray-500">
                            {task?.projectName}
                          </p>
                        </div>

                        <div className="flex items-center gap-1 ">
                          <p className="text-sm font-bold space-x-2 capitalize">
                            <span>{task?.floorName}</span>
                            <span>{task?.areaName}</span>
                          </p>
                        </div>

                        <div className="flex justify-between gap-4">
                          <div className="flex gap-5">
                            <div className="flex items-center gap-1">
                              <SquareUserRound
                                size={20}
                                className="text-gray-600"
                              />
                              <p className="text-sm ">
                                {task?.user?.firstName}
                              </p>
                            </div>
                            <div className="flex items-center gap-1">
                              <p className="text-sm text-gray-600">
                                {
                                  <WorkingTaskTimer
                                    status={task?.status}
                                    startedTime={task?.startedTime}
                                    endedTime={task?.endedTime}
                                  />
                                }
                              </p>
                            </div>
                          </div>
                          <div>
                            <button onClick={() => setselectedTask(task)}>
                              <ModifyTaskSidebar
                                selectedTask={selectedTask!}
                                isEmployeeEdit={false}
                              />
                            </button>
                          </div>
                        </div>
                       </div>
                      </article>
                    );
                  })}
                </div>
              </div>
            );
          }
        )}
      </div>
    </div>
  );
};

export default TaskListCanvas;