import React, { useState, useEffect } from "react";
import {
  MagnifyingGlassIcon,
  FolderIcon,
  Squares2X2Icon,
  Bars3Icon,
} from "@heroicons/react/24/solid";
import ConfirmDialog from "./Shared/ConfirmDialog";
import ProjectModal from "./Project/ProjectModal";
import { useStore } from "../store/useStore";
import { fetchGroupedProjects, createProject, updateProject, deleteProject } from "../utils/projectsService";
import { fetchAreas } from "../utils/areasService";
import { useTranslation } from "react-i18next";

import { Project } from "../entities/Project";
import { useModalEvents } from "../hooks/useModalEvents";
import { PriorityType } from "../entities/Task";
import { useSearchParams } from "react-router-dom";
import ProjectItem from "./Project/ProjectItem";


const getPriorityStyles = (priority: PriorityType) => {
  switch (priority) {
    case "low":
      return { color: "bg-green-500" };
    case "medium":
      return { color: "bg-yellow-500" };
    case "high":
      return { color: "bg-red-500" };
    default:
      return { color: "bg-gray-500" };
  }
};

const Projects: React.FC = () => {
  const { t } = useTranslation();
  const { areas, setAreas, setLoading: setAreasLoading, setError: setAreasError } = useStore((state) => state.areasStore);
  const { setLoading: setProjectsLoading, setError: setProjectsError } = useStore((state) => state.projectsStore);
  const { isLoading, isError } = useStore((state) => state.projectsStore);

  const [groupedProjects, setGroupedProjects] = useState<Record<string, Project[]>>({});
  const [isProjectModalOpen, setIsProjectModalOpen] = useState<boolean>(false);
  const [projectToEdit, setProjectToEdit] = useState<Project | null>(null);
  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState<boolean>(false);
  const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
  const [searchQuery, setSearchQuery] = useState<string>("");
  const [viewMode, setViewMode] = useState<"cards" | "list">("cards");

  const [searchParams, setSearchParams] = useSearchParams();
  const activeFilter = searchParams.get("active") || "all";
  
  // Dispatch global modal events
  useModalEvents(isProjectModalOpen);
  const areaFilter = searchParams.get("area_id") || "";

useEffect(() => {
  const loadAreas = async () => {
    try {
      const areasData = await fetchAreas();
      setAreas(areasData);
    } catch (error) {
      console.error("Failed to fetch areas:", error);
      setAreasError(true);
    }
  };

  loadAreas();
}, []); 

useEffect(() => {
  const loadProjects = async () => {
    try {
      const groupedProjectsData = await fetchGroupedProjects(activeFilter, areaFilter);
      setGroupedProjects(groupedProjectsData);
    } catch (error) {
      console.error("Failed to fetch projects:", error);
      setProjectsError(true);
    }
  };

  loadProjects();
}, [activeFilter, areaFilter]); 

  const handleSaveProject = async (project: Project) => {
    setProjectsLoading(true);
    try {
      if (project.id) {
        await updateProject(project.id, project);
      } else {
        await createProject(project);
      }
      const groupedProjectsData = await fetchGroupedProjects(activeFilter, areaFilter);
      setGroupedProjects(groupedProjectsData);
    } catch (error) {
      console.error("Error saving project:", error);
      setProjectsError(true);
    } finally {
      setProjectsLoading(false);
      setIsProjectModalOpen(false);
    }
  };


  const handleEditProject = (project: Project) => {
    setProjectToEdit(project);
    setIsProjectModalOpen(true);
  };

  const handleDeleteProject = async () => {
    if (!projectToDelete) return;
    
    try {
      if (projectToDelete.id !== undefined) {
        setProjectsLoading(true);
        await deleteProject(projectToDelete.id);
        const groupedProjectsData = await fetchGroupedProjects(activeFilter, areaFilter);
        setGroupedProjects(groupedProjectsData);
      } else {
        console.error("Cannot delete project: ID is undefined.");
      }
    } catch (error) {
      console.error("Error deleting project:", error);
      setProjectsError(true);
    } finally {
      setProjectsLoading(false);
      setIsConfirmDialogOpen(false);
      setProjectToDelete(null);
    }
  };

  const getCompletionPercentage = (project: Project) => {
    // Now the completion percentage comes directly from the backend
    return (project as any).completion_percentage || 0;
  };

  const handleActiveFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newActiveFilter = e.target.value;
    const params = new URLSearchParams(searchParams);

    if (newActiveFilter === "all") {
      params.delete("active");
    } else {
      params.set("active", newActiveFilter);
    }
    setSearchParams(params);
  };

  const handleAreaFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newAreaFilter = e.target.value;
    const params = new URLSearchParams(searchParams);

    if (newAreaFilter === "") {
      params.delete("area_id");
    } else {
      params.set("area_id", newAreaFilter);
    }

    setSearchParams(params);
  };

  // Apply search filter to the grouped projects from backend
  const searchFilteredGroupedProjects = Object.keys(groupedProjects).reduce<Record<string, Project[]>>(
    (acc, areaName) => {
      const projectsInArea = groupedProjects[areaName];
      
      // Defensive check: ensure projectsInArea is an array
      if (!Array.isArray(projectsInArea)) {
        console.warn(`Projects for area "${areaName}" is not an array:`, projectsInArea);
        return acc;
      }
      
      const filteredProjects = projectsInArea.filter((project) =>
        project.name.toLowerCase().includes(searchQuery.toLowerCase())
      );
      if (filteredProjects.length > 0) {
        acc[areaName] = filteredProjects;
      }
      return acc;
    },
    {}
  );

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
        <div className="text-xl font-semibold text-gray-700 dark:text-gray-200">
          {t('projects.loading')}
        </div>
      </div>
    );
  }

  if (isError) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
        <div className="text-red-500 text-lg">{t('projects.error')}</div>
      </div>
    );
  }

  return (
    <div className="flex justify-center px-4 lg:px-2">
      <div className="w-full max-w-6xl">
        <div className="flex items-center mb-8">
          <FolderIcon className="h-6 w-6 text-gray-500 mr-2" />
          <h2 className="text-2xl font-light text-gray-900 dark:text-gray-100">
            {t('projects.title')}
          </h2>
        </div>

        {/* View Mode and Filters */}
        <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 space-y-4 md:space-y-0">
          <div className="flex items-center space-x-2">
            <button
              onClick={() => setViewMode("cards")}
              className={`p-2 rounded-md focus:outline-none ${
                viewMode === "cards"
                  ? "bg-blue-500 text-white"
                  : "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
              }`}
              aria-label={t("projects.cardViewAriaLabel")}
            >
              <Squares2X2Icon className="h-5 w-5" />
            </button>

            <button
              onClick={() => setViewMode("list")}
              className={`p-2 rounded-md focus:outline-none ${
                viewMode === "list"
                  ? "bg-blue-500 text-white"
                  : "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300"
              }`}
              aria-label={t("projects.listViewAriaLabel")}
            >
              <Bars3Icon className="h-5 w-5" />
            </button>
          </div>

          <div className="flex flex-col md:flex-row md:items-center md:space-x-4">
            <div className="w-full md:w-auto">
              <label
                htmlFor="activeFilter"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
              >
                {t('common.status')}
              </label>
              <select
                id="activeFilter"
                value={activeFilter}
                onChange={handleActiveFilterChange}
                className="block w-full p-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="true">{t('projects.filters.active')}</option>
                <option value="false">{t('projects.filters.inactive')}</option>
                <option value="all">{t('projects.filters.all')}</option>
              </select>
            </div>

            <div className="w-full md:w-auto">
              <label
                htmlFor="areaFilter"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
              >
                {t('common.area')}
              </label>
              <select
                id="areaFilter"
                value={areaFilter}
                onChange={handleAreaFilterChange}
                className="block w-full p-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">{t('projects.filters.allAreas')}</option>
                {areas.map((area) => (
                  <option key={area.id} value={area.id?.toString()}>
                    {area.name}
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* Search Bar */}
        <div className="mb-4">
          <div className="flex items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm p-2">
            <MagnifyingGlassIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" />
            <input
              type="text"
              placeholder={t('projects.searchPlaceholder')}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-transparent border-none focus:ring-0 focus:outline-none dark:text-white"
            />
          </div>
        </div>

        {/* Projects Grid/List */}
        <div
          className={`${
            viewMode === "cards"
              ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
              : "flex flex-col space-y-1"
          }`}
        >
          {Object.keys(searchFilteredGroupedProjects).length === 0 ? (
            <div className="text-gray-700 dark:text-gray-300">
              {t('projects.noProjectsFound')}
            </div>
          ) : (
            Object.keys(searchFilteredGroupedProjects).map((areaName) => (
              <React.Fragment key={areaName}>
                <h3 className={`${
                  viewMode === "cards" 
                    ? "col-span-full text-md uppercase font-light text-gray-800 dark:text-gray-200 mb-2 mt-6"
                    : "text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 mt-6 border-b border-gray-300 dark:border-gray-600 pb-2"
                }`}>
                  {areaName}
                </h3>
                {searchFilteredGroupedProjects[areaName].map((project) => {
                  const { color } = getPriorityStyles(project.priority || "low");
                  return (
                    <ProjectItem
                      key={project.id}
                      project={project}
                      viewMode={viewMode}
                      color={color}
                      getCompletionPercentage={() => getCompletionPercentage(project)}
                      activeDropdown={activeDropdown}
                      setActiveDropdown={setActiveDropdown}
                      handleEditProject={handleEditProject}
                      setProjectToDelete={setProjectToDelete}
                      setIsConfirmDialogOpen={setIsConfirmDialogOpen}
                    />
                  );
                })}
              </React.Fragment>
            ))
          )}
        </div>
      </div>

      {isProjectModalOpen && (
        <ProjectModal
          isOpen={isProjectModalOpen}
          onClose={() => {
            setIsProjectModalOpen(false);
            setProjectToEdit(null);
          }}
          onSave={handleSaveProject}
          project={projectToEdit || undefined}
          areas={areas}
        />
      )}

      {isConfirmDialogOpen && (
        <ConfirmDialog
          title={t('modals.deleteProject.title')}
          message={t('modals.deleteProject.message', { projectName: projectToDelete?.name })}
          onConfirm={handleDeleteProject}
          onCancel={() => setIsConfirmDialogOpen(false)}
        />
      )}
    </div>
  );
};

export default Projects;