import React, { useState, useEffect } from "react";
import {
  FaTimes,
  FaSave,
  FaExclamationTriangle,
  FaCheckCircle,
  FaTimesCircle,
} from "react-icons/fa";
import { Team } from "../../../types/common";

interface TeamStatusChangeModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (teamIds: string[], newStatus: boolean, reason?: string) => void;
  selectedTeams: Team[];
}

const TeamStatusChangeModal: React.FC<TeamStatusChangeModalProps> = ({
  isOpen,
  onClose,
  onSave,
  selectedTeams,
}) => {
  const [newStatus, setNewStatus] = useState<boolean>(true);
  const [reason, setReason] = useState("");
  const [errors, setErrors] = useState<Record<string, string>>({});

  const activeTeams = selectedTeams.filter((team) => team.isActive);
  const inactiveTeams = selectedTeams.filter((team) => !team.isActive);

  useEffect(() => {
    if (isOpen) {
      // Reset form when modal opens
      setNewStatus(true);
      setReason("");
      setErrors({});
    }
  }, [isOpen]);

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!newStatus && !reason.trim()) {
      newErrors.reason = "Ekipleri pasif yaparken sebep belirtmeniz gerekli";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSave = () => {
    if (validateForm()) {
      const teamIds = selectedTeams.map((team) => team.id);
      onSave(teamIds, newStatus, reason.trim() || undefined);
      onClose();
    }
  };

  const getImpactAnalysis = () => {
    const teamsToActivate = newStatus ? inactiveTeams : [];
    const teamsToDeactivate = newStatus ? [] : activeTeams;

    return {
      teamsToActivate,
      teamsToDeactivate,
      totalMembers: selectedTeams.reduce(
        (total, team) => total + team.members.filter((m) => m.isActive).length,
        0
      ),
      activeMembers: activeTeams.reduce(
        (total, team) => total + team.members.filter((m) => m.isActive).length,
        0
      ),
    };
  };

  const impact = getImpactAnalysis();

  return (
    isOpen && (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div className="bg-white rounded-lg w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
          {/* Header */}
          <div className="flex items-center justify-between p-4 border-b border-gray-200">
            <div>
              <h2 className="text-2xl font-bold text-gray-900">
                Ekip Durumu Değiştir
              </h2>
              <p className="text-gray-600">
                {selectedTeams.length} ekibin durumunu değiştirin
              </p>
            </div>
            <button
              onClick={onClose}
              className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
            >
              <FaTimes className="w-4 h-4" />
            </button>
          </div>

          {/* Content */}
          <div className="p-3 space-y-3">
            {/* Status Selection */}
            <div>
              <h3 className="text-sm font-medium text-gray-900 mb-2">
                Yeni Durum
              </h3>
              <div className="space-y-3">
                <label className="flex items-center p-2 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                  <input
                    type="radio"
                    checked={newStatus === true}
                    onChange={() => setNewStatus(true)}
                    className="text-green-600 focus:ring-green-500"
                  />
                  <FaCheckCircle className="w-5 h-5 text-green-600 ml-3 mr-2" />
                  <div>
                    <span className="font-medium text-gray-900">Aktif</span>
                    <p className="text-xs text-gray-600">
                      Ekipler aktif hale gelir ve iş emirleri alabilir
                    </p>
                  </div>
                </label>
                <label className="flex items-center p-2 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                  <input
                    type="radio"
                    checked={newStatus === false}
                    onChange={() => setNewStatus(false)}
                    className="text-red-600 focus:ring-red-500"
                  />
                  <FaTimesCircle className="w-5 h-5 text-red-600 ml-3 mr-2" />
                  <div>
                    <span className="font-medium text-gray-900">Pasif</span>
                    <p className="text-xs text-gray-600">
                      Ekipler pasif hale gelir ve yeni iş emirleri alamaz
                    </p>
                  </div>
                </label>
              </div>
            </div>

            {/* Reason (required for deactivation) */}
            {!newStatus && (
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">
                  Pasif Yapma Sebebi *
                </label>
                <textarea
                  value={reason}
                  onChange={(e) => {
                    setReason(e.target.value);
                    if (errors.reason) {
                      setErrors((prev) => ({ ...prev, reason: "" }));
                    }
                  }}
                  rows={2}
                  className={`w-full px-3 py-1.5 text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
                    errors.reason ? "border-red-500" : "border-gray-300"
                  }`}
                  placeholder="Ekiplerin neden pasif yapıldığını açıklayın..."
                />
                {errors.reason && (
                  <p className="text-red-500 text-xs mt-1">{errors.reason}</p>
                )}
              </div>
            )}

            {/* Impact Analysis */}
            <div className="bg-gray-50 rounded-lg p-3">
              <h3 className="text-sm font-medium text-gray-900 mb-3">
                Etki Analizi
              </h3>
              <div className="grid grid-cols-2 gap-3 mb-3">
                <div className="text-center">
                  <div className="text-base font-bold text-blue-600">
                    {selectedTeams.length}
                  </div>
                  <div className="text-sm text-gray-600">
                    Toplam Seçili Ekip
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-base font-bold text-green-600">
                    {impact.totalMembers}
                  </div>
                  <div className="text-sm text-gray-600">Toplam Üye Sayısı</div>
                </div>
              </div>

              {!newStatus && impact.teamsToDeactivate.length > 0 && (
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-2">
                  <div className="flex items-start space-x-3">
                    <FaExclamationTriangle className="w-5 h-5 text-yellow-600 mt-0.5" />
                    <div>
                      <h4 className="text-sm font-medium text-yellow-800">
                        Uyarı
                      </h4>
                      <p className="text-sm text-yellow-700 mt-1">
                        {impact.teamsToDeactivate.length} aktif ekip pasif
                        yapılacak. Bu ekipler artık yeni iş emirleri alamayacak.
                      </p>
                    </div>
                  </div>
                </div>
              )}

              {newStatus && impact.teamsToActivate.length > 0 && (
                <div className="bg-green-50 border border-green-200 rounded-lg p-2">
                  <div className="flex items-start space-x-3">
                    <FaCheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
                    <div>
                      <h4 className="text-sm font-medium text-green-800">
                        Bilgi
                      </h4>
                      <p className="text-sm text-green-700 mt-1">
                        {impact.teamsToActivate.length} pasif ekip aktif hale
                        gelecek. Bu ekipler tekrar iş emirleri alabilecek.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Selected Teams List */}
            <div>
              <h3 className="text-sm font-medium text-gray-900 mb-2">
                Etkilenecek Ekipler
              </h3>
              <div className="max-h-32 overflow-y-auto border border-gray-200 rounded-lg">
                {selectedTeams.map((team) => (
                  <div
                    key={team.id}
                    className="flex items-center justify-between p-2 border-b border-gray-100 last:border-b-0"
                  >
                    <div>
                      <h4 className="font-medium text-sm text-gray-900">
                        {team.name}
                      </h4>
                      <p className="text-sm text-gray-600">{team.code}</p>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span
                        className={`px-2 py-1 text-xs font-semibold rounded-full ${
                          team.isActive
                            ? "bg-green-100 text-green-800"
                            : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {team.isActive ? "Aktif" : "Pasif"}
                      </span>
                      <span className="text-sm text-gray-500">→</span>
                      <span
                        className={`px-2 py-1 text-xs font-semibold rounded-full ${
                          newStatus
                            ? "bg-green-100 text-green-800"
                            : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {newStatus ? "Aktif" : "Pasif"}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="flex items-center justify-end space-x-2 p-3 border-t border-gray-200">
            <button
              onClick={onClose}
              className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
            >
              İptal
            </button>
            <button
              onClick={handleSave}
              className={`px-3 py-1.5 text-sm text-white rounded-lg transition-colors flex items-center space-x-2 ${
                newStatus
                  ? "bg-green-600 hover:bg-green-700"
                  : "bg-red-600 hover:bg-red-700"
              }`}
            >
              <FaSave className="w-4 h-4" />
              <span>Durumu Değiştir</span>
            </button>
          </div>
        </div>
      </div>
    )
  );
};

export default TeamStatusChangeModal;