import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  FaFolder,
  FaPlus,
  FaSearch,
  FaFilter,
  FaDownload,
  FaEdit,
  FaEye,
  FaCalendar,
  FaUser,
  FaDollarSign,
  FaExclamationTriangle,
  FaBullseye,
  FaTh,
  FaList,
  FaFlag,
  FaTasks,
} from "react-icons/fa";
import classNames from "classnames";
import { ProjectStatusEnum, PsProject } from "../../../types/ps";
import dayjs from "dayjs";
import { mockProjects } from "../../../mocks/mockProjects";
import PhaseViewModal from "./PhaseViewModal";
import TaskViewModal from "./TaskViewModal";
import Widget from "../../../components/common/Widget";
import { PriorityEnum } from "../../../types/common";
import {
  getProjectStatusColor,
  getProjectStatusIcon,
  getProjectStatusText,
  getPriorityColor,
  getPriorityText,
  getProgressColor,
} from "../../../utils/erp";

const ProjectList: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [filterStatus, setFilterStatus] = useState("all");
  const [filterPriority, setFilterPriority] = useState("all");
  const [showFilters, setShowFilters] = useState(false);
  const [viewMode, setViewMode] = useState<"card" | "list">("list");

  // Modal states
  const [phasesModalOpen, setPhasesModalOpen] = useState(false);
  const [tasksModalOpen, setTasksModalOpen] = useState(false);
  const [selectedProject, setSelectedProject] = useState<PsProject | null>(
    null
  );

  // Modal functions
  const openPhasesModal = (project: PsProject) => {
    setSelectedProject(project);
    setPhasesModalOpen(true);
  };

  const openTasksModal = (project: PsProject) => {
    setSelectedProject(project);
    setTasksModalOpen(true);
  };

  const closeModals = () => {
    setPhasesModalOpen(false);
    setTasksModalOpen(false);
    setSelectedProject(null);
  };

  const {
    data: projects,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["projects", searchTerm, filterStatus, filterPriority],
    queryFn: async () => {
      await new Promise((resolve) => setTimeout(resolve, 500));
      return mockProjects.filter((project) => {
        const matchesSearch =
          project.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
          project.name.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesStatus =
          filterStatus === "all" || project.status === filterStatus;
        const matchesPriority =
          filterPriority === "all" || project.priority === filterPriority;
        return matchesSearch && matchesStatus && matchesPriority;
      });
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <span className="ml-3 text-gray-600">Projeler yükleniyor...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <div className="flex items-center">
          <FaExclamationTriangle className="h-5 w-5 text-red-600 mr-2" />
          <span className="text-red-800">
            Projeler yüklenirken hata oluştu.
          </span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4 pt-2">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-gray-900">Proje Listesi</h2>
          <p className="text-gray-600 mt-1">Proje listesinizi yönetin</p>
        </div>
        <div className="flex items-center space-x-2">
          {/* View Toggle */}
          <div className="flex bg-gray-100 rounded-lg">
            <button
              onClick={() => setViewMode("card")}
              className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
                viewMode === "card"
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-900"
              }`}
            >
              <FaTh className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode("list")}
              className={`px-2.5 py-1.5 rounded-md flex items-center space-x-2 transition-colors ${
                viewMode === "list"
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-900"
              }`}
            >
              <FaList className="w-4 h-4" />
            </button>
          </div>

          <button
            onClick={() => alert("Dışa aktarma özelliği yakında eklenecek")}
            className="flex items-center px-3 py-1.5 text-sm border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
          >
            <FaDownload size={16} className="mr-2" />
            Dışa Aktar
          </button>

          <Link
            to="/admin/projects/new"
            className="flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <FaPlus size={16} className="mr-2" />
            Yeni Proje
          </Link>
        </div>
      </div>

      {/* Header Actions */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div className="flex items-center space-x-4">
          <div className="relative">
            <FaSearch
              size={20}
              className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
            />
            <input
              type="text"
              placeholder="Proje kodu veya adı..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 pr-3 py-1.5 text-sm w-80 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <button
            onClick={() => setShowFilters(!showFilters)}
            className={classNames(
              "flex items-center px-3 py-1.5 text-sm border rounded-lg transition-colors",
              showFilters
                ? "border-blue-500 bg-blue-50 text-blue-700"
                : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
            )}
          >
            <FaFilter size={16} className="mr-2" />
            Filtreler
          </button>
        </div>
      </div>

      {/* Filters Panel */}
      {showFilters && (
        <div className="bg-white border border-gray-200 rounded-lg p-3">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Durum
              </label>
              <select
                value={filterStatus}
                onChange={(e) => setFilterStatus(e.target.value)}
                className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value="all">Tümü</option>
                <option value={ProjectStatusEnum.Planning}>Planlama</option>
                <option value={ProjectStatusEnum.Active}>Aktif</option>
                <option value={ProjectStatusEnum.OnHold}>Beklemede</option>
                <option value={ProjectStatusEnum.Completed}>Tamamlandı</option>
                <option value={ProjectStatusEnum.Cancelled}>
                  İptal Edildi
                </option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Öncelik
              </label>
              <select
                value={filterPriority}
                onChange={(e) => setFilterPriority(e.target.value)}
                className="w-full border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              >
                <option value="all">Tümü</option>
                <option value={PriorityEnum.Low}>Düşük</option>
                <option value={PriorityEnum.Normal}>Normal</option>
                <option value={PriorityEnum.High}>Yüksek</option>
                <option value={PriorityEnum.Urgent}>Acil</option>
              </select>
            </div>

            <div className="flex items-end">
              <button
                onClick={() => {
                  setFilterStatus("all");
                  setFilterPriority("all");
                  setSearchTerm("");
                }}
                className="w-full px-3 py-1.5 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Filtreleri Temizle
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Widget
          title="Toplam Proje"
          value={projects?.length || 0}
          color="blue"
          icon="FaFolder"
        />

        <Widget
          title="Aktif Proje"
          value={
            projects?.filter((p) => p.status === ProjectStatusEnum.Active)
              .length || 0
          }
          color="green"
          icon="FaArrowUp"
        />

        <Widget
          title="Toplam Bütçe"
          value={`₺${
            projects?.reduce((acc, p) => acc + p.budget, 0).toLocaleString() ||
            0
          }`}
          color="purple"
          icon="FaDollarSign"
        />

        <Widget
          title="Ortalama İlerleme"
          value={
            projects?.length
              ? `${Math.round(
                  projects.reduce((acc, p) => acc + p.progress, 0) /
                    projects.length
                )}%`
              : "0%"
          }
          color="yellow"
          icon="FaBullseye"
        />
      </div>

      {/* Projects Display */}
      {viewMode === "list" ? (
        /* List View */
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          <div className="px-3 py-2 border-b border-gray-200">
            <h2 className="text-xl font-bold text-gray-900">Proje Listesi</h2>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Proje Bilgileri
                  </th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Proje Yöneticisi
                  </th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Durum / Öncelik
                  </th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Tarihler
                  </th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Bütçe / Maliyet
                  </th>
                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    İlerleme
                  </th>
                  <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                    İşlemler
                  </th>
                </tr>
              </thead>

              <tbody className="bg-white divide-y divide-gray-200">
                {projects?.map((project) => (
                  <tr
                    key={project.id}
                    className="hover:bg-gray-50 transition-colors text-sm"
                  >
                    <td className="px-3 py-2">
                      <div className="flex items-center">
                        <div className="flex-shrink-0 h-10 w-10">
                          <div className="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center">
                            <FaFolder className="h-5 w-5 text-blue-600" />
                          </div>
                        </div>
                        <div className="ml-4">
                          <div className="text-sm font-medium text-gray-900">
                            {project.code}
                          </div>
                          <div className="text-sm text-gray-500 max-w-xs truncate">
                            {project.name}
                          </div>
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2">
                      <div className="flex items-center text-sm">
                        <FaUser size={16} className="text-gray-400 mr-2" />
                        <div>
                          <div className="font-medium text-gray-900">
                            {project.projectManager?.fullName}
                          </div>
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2">
                      <div className="space-y-2">
                        <span
                          className={classNames(
                            "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
                            getProjectStatusColor(project.status)
                          )}
                        >
                          {getProjectStatusIcon(project.status)}
                          <span className="ml-1">
                            {getProjectStatusText(project.status)}
                          </span>
                        </span>
                        <div
                          className={classNames(
                            "text-sm font-medium",
                            getPriorityColor(project.priority)
                          )}
                        >
                          {getPriorityText(project.priority)}
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2">
                      <div className="space-y-1">
                        <div className="flex items-center text-sm text-gray-900">
                          <FaCalendar size={14} className="mr-1" />
                          {dayjs(project.startDate).format("DD.MM.YYYY")}
                        </div>
                        <div className="text-sm text-gray-500">
                          Bitiş: {dayjs(project.endDate).format("DD.MM.YYYY")}
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2">
                      <div className="space-y-1">
                        <div className="text-sm font-medium text-gray-900">
                          ₺{project.budget.toLocaleString()}
                        </div>
                        <div className="text-sm text-gray-500">
                          Harcanan: ₺{project.actualCost.toLocaleString()}
                        </div>
                        <div className="text-xs text-blue-600">
                          %
                          {Math.round(
                            (project.actualCost / project.budget) * 100
                          )}{" "}
                          kullanıldı
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2">
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm font-medium text-gray-900">
                            %{project.progress}
                          </span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className={classNames(
                              "h-2 rounded-full",
                              getProgressColor(project.progress)
                            )}
                            style={{ width: `${project.progress}%` }}
                          />
                        </div>
                      </div>
                    </td>

                    <td className="px-3 py-2 text-right">
                      <div className="flex items-center justify-end space-x-1">
                        <Link
                          to={`/admin/projects/${project.id}`}
                          className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                          title="Detayları Görüntüle"
                        >
                          <FaEye size={16} />
                        </Link>

                        <Link
                          to={`/admin/projects/edit/${project.id}`}
                          className="p-1.5 text-gray-600 hover:text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors"
                          title="Düzenle"
                        >
                          <FaEdit size={16} />
                        </Link>

                        <button
                          onClick={() => openPhasesModal(project)}
                          className="p-1.5 text-gray-600 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
                          title="Fazları Görüntüle"
                        >
                          <FaFlag size={16} />
                        </button>

                        <button
                          onClick={() => openTasksModal(project)}
                          className="p-1.5 text-gray-600 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
                          title="Görevleri Görüntüle"
                        >
                          <FaTasks size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        /* Card View */
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {projects?.map((project) => (
            <div
              key={project.id}
              className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow"
            >
              <div className="flex items-start justify-between mb-3">
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-2">
                    <FaFolder className="w-5 h-5 text-blue-600" />
                    <h3 className="text-base font-semibold text-gray-900">
                      {project.code}
                    </h3>
                  </div>
                  <p className="text-sm text-gray-600 mb-2">{project.name}</p>
                  <div className="flex items-center space-x-2 mb-3">
                    <span
                      className={classNames(
                        "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
                        getProjectStatusColor(project.status)
                      )}
                    >
                      {getProjectStatusIcon(project.status)}
                      <span className="ml-1">
                        {getProjectStatusText(project.status)}
                      </span>
                    </span>
                    <span
                      className={classNames(
                        "px-2 py-0.5 rounded-full text-xs font-medium",
                        getPriorityColor(project.priority)
                      )}
                    >
                      {getPriorityText(project.priority)}
                    </span>
                  </div>
                </div>
                <div className="flex space-x-1">
                  <Link
                    to={`/admin/projects/${project.id}`}
                    className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
                  >
                    <FaEye className="w-4 h-4" />
                  </Link>
                  <Link
                    to={`/admin/projects/edit/${project.id}`}
                    className="p-1.5 text-gray-400 hover:text-yellow-600 hover:bg-yellow-50 rounded-md transition-colors"
                  >
                    <FaEdit className="w-4 h-4" />
                  </Link>
                  <button
                    onClick={() => openPhasesModal(project)}
                    className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
                    title="Fazları Görüntüle"
                  >
                    <FaFlag className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => openTasksModal(project)}
                    className="p-1.5 text-gray-400 hover:text-purple-600 hover:bg-purple-50 rounded-md transition-colors"
                    title="Görevleri Görüntüle"
                  >
                    <FaTasks className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Project Manager */}
              <div className="bg-gray-50 rounded-lg p-2 mb-3">
                <div className="flex items-center space-x-2 mb-1">
                  <FaUser className="w-4 h-4 text-gray-600" />
                  <span className="font-medium text-gray-900">
                    Proje Yöneticisi
                  </span>
                </div>
                <p className="text-sm text-gray-700">
                  {project.projectManager?.fullName}
                </p>
              </div>

              {/* Progress */}
              <div className="mb-3">
                <div className="flex items-center justify-between text-sm mb-2">
                  <span className="text-gray-500 flex items-center">
                    <FaBullseye className="w-4 h-4 mr-1" />
                    İlerleme
                  </span>
                  <span className="font-medium">{project.progress}%</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div
                    className={classNames(
                      "h-2 rounded-full",
                      getProgressColor(project.progress)
                    )}
                    style={{ width: `${project.progress}%` }}
                  />
                </div>
              </div>

              {/* Dates and Budget */}
              <div className="grid grid-cols-2 gap-3 mb-3">
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 flex items-center">
                      <FaCalendar className="w-4 h-4 mr-1" />
                      Başlangıç
                    </span>
                    <span className="font-medium">
                      {dayjs(project.startDate).format("DD.MM.YYYY")}
                    </span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Bitiş</span>
                    <span className="font-medium">
                      {dayjs(project.endDate).format("DD.MM.YYYY")}
                    </span>
                  </div>
                </div>

                <div className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 flex items-center">
                      <FaDollarSign className="w-4 h-4 mr-1" />
                      Bütçe
                    </span>
                    <span className="font-medium">
                      ₺{project.budget.toLocaleString()}
                    </span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Harcanan</span>
                    <span className="font-medium">
                      ₺{project.actualCost.toLocaleString()}
                    </span>
                  </div>
                </div>
              </div>

              {/* Budget Usage */}
              <div className="bg-blue-50 rounded-lg p-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-blue-700 font-medium">
                    Bütçe Kullanımı
                  </span>
                  <span className="text-blue-600 font-bold">
                    %{Math.round((project.actualCost / project.budget) * 100)}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Empty State */}
      {(!projects || projects.length === 0) && (
        <div className="text-center py-10">
          <FaFolder className="mx-auto h-12 w-12 text-gray-400" />
          <h3 className="mt-2 text-sm font-medium text-gray-900">
            Proje bulunamadı
          </h3>
          <p className="mt-1 text-sm text-gray-500">
            Yeni proje oluşturarak başlayın.
          </p>
          <div className="mt-6">
            <Link
              to="/admin/projects/new"
              className="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <FaPlus size={16} className="mr-2" />
              Yeni Proje Oluştur
            </Link>
          </div>
        </div>
      )}

      {/* Modals */}
      {selectedProject && (
        <>
          <PhaseViewModal
            project={selectedProject}
            isOpen={phasesModalOpen}
            onClose={closeModals}
          />
          <TaskViewModal
            project={selectedProject}
            isOpen={tasksModalOpen}
            onClose={closeModals}
          />
        </>
      )}
    </div>
  );
};

export default ProjectList;