import React from "react";
import {
  FaTimes,
  FaFlag,
  FaCalendar,
  FaDollarSign,
  FaChartLine,
} from "react-icons/fa";
import { mockProjectPhases } from "../../../mocks/mockProjectPhases";
import { PsProject } from "../../../types/ps";
import dayjs from "dayjs";
import { getPhaseStatusColor, getPhaseStatusText } from "../../../utils/erp";

interface PhaseViewModalProps {
  project: PsProject;
  isOpen: boolean;
  onClose: () => void;
}

const PhaseViewModal: React.FC<PhaseViewModalProps> = ({
  project,
  isOpen,
  onClose,
}) => {
  if (!isOpen) return null;

  const projectPhases = mockProjectPhases.filter(
    (phase) => phase.projectId === project.id
  );

  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
      <div className="relative top-10 mx-auto p-2 border w-11/12 max-w-3xl shadow-lg rounded-md bg-white">
        <div className="flex items-center justify-between p-2.5 border-b border-gray-200">
          <div className="flex items-center">
            <FaFlag className="h-5 w-5 text-blue-600 mr-2" />
            <div>
              <h3 className="text-base font-semibold text-gray-900">
                Proje Aşamaları
              </h3>
              <p className="text-sm text-gray-600">
                {project.name} - {project.code}
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 focus:outline-none"
          >
            <FaTimes className="h-5 w-5" />
          </button>
        </div>

        <div className="p-2.5">
          {projectPhases.length > 0 ? (
            <div className="space-y-2.5">
              {projectPhases.map((phase) => (
                <div
                  key={phase.id}
                  className="bg-white border border-gray-200 rounded-lg p-2.5 hover:shadow-md transition-shadow"
                >
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex-1">
                      <div className="flex items-center flex-wrap gap-2 mb-2">
                        <h4 className="text-base font-medium text-gray-900">
                          {phase.name}
                        </h4>
                        <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                          {phase.code}
                        </span>
                        <span
                          className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getPhaseStatusColor(
                            phase.status
                          )}`}
                        >
                          {getPhaseStatusText(phase.status)}
                        </span>
                      </div>
                      {phase.description && (
                        <p className="text-sm text-gray-600 mb-2">
                          {phase.description}
                        </p>
                      )}
                    </div>
                  </div>

                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2.5 mb-2.5">
                    <div className="flex items-center space-x-2">
                      <FaCalendar className="h-3.5 w-3.5 text-gray-400" />
                      <div>
                        <p className="text-xs font-medium text-gray-700">
                          Başlangıç
                        </p>
                        <p className="text-xs text-gray-600">
                          {dayjs(phase.startDate).format("DD.MM.YYYY")}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <FaCalendar className="h-3.5 w-3.5 text-gray-400" />
                      <div>
                        <p className="text-xs font-medium text-gray-700">
                          Bitiş
                        </p>
                        <p className="text-xs text-gray-600">
                          {dayjs(phase.endDate).format("DD.MM.YYYY")}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <FaDollarSign className="h-3.5 w-3.5 text-gray-400" />
                      <div>
                        <p className="text-xs font-medium text-gray-700">
                          Bütçe
                        </p>
                        <p className="text-xs text-gray-600">
                          ₺{phase.budget.toLocaleString()}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-2">
                      <FaChartLine className="h-3.5 w-3.5 text-gray-400" />
                      <div>
                        <p className="text-xs font-medium text-gray-700">
                          İlerleme
                        </p>
                        <p className="text-xs text-gray-600">
                          %{phase.progress}
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="space-y-1.5">
                    <div className="flex justify-between text-xs">
                      <span>İlerleme</span>
                      <span>%{phase.progress}</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2">
                      <div
                        className={`h-2 rounded-full transition-all duration-300 ${
                          phase.progress >= 100
                            ? "bg-green-500"
                            : phase.progress >= 70
                            ? "bg-blue-500"
                            : phase.progress >= 50
                            ? "bg-yellow-500"
                            : "bg-red-500"
                        }`}
                        style={{ width: `${phase.progress}%` }}
                      />
                    </div>
                  </div>

                  {phase.milestones > 0 && (
                    <div className="mt-2 pt-2 border-t border-gray-200">
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-600">
                          Kilometre Taşları:
                        </span>
                        <span className="font-medium">
                          {phase.completedMilestones}/{phase.milestones}
                        </span>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-10">
              <FaFlag className="mx-auto h-8 w-8 text-gray-400" />
              <h3 className="mt-2 text-sm font-medium text-gray-900">
                Faz bulunamadı
              </h3>
              <p className="mt-1 text-sm text-gray-500">
                Bu proje için henüz faz tanımlanmamış.
              </p>
            </div>
          )}
        </div>

        <div className="px-2.5 py-2 bg-gray-50 border-t border-gray-200 rounded-b-md">
          <div className="flex justify-end">
            <button
              onClick={onClose}
              className="px-3 py-1 bg-gray-600 text-white text-sm font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
            >
              Kapat
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PhaseViewModal;