erp-platform/ui/src/views/maintenance/components/MaintenanceTeams.tsx

import React, { useState } from "react";
import {
  FaPlus,
  FaSearch,
  FaFilter,
  FaUsers,
  FaUser,
  FaEdit,
  FaTrash,
  FaEye,
  FaPhone,
  FaEnvelope,
  FaAward,
  FaClock,
} from "react-icons/fa";
import { TeamRoleEnum } from "../../../types/common";
import { mockMaintenanceTeams } from "../../../mocks/mockMaintenanceTeams";
import NewTeamModal from "./NewTeamModal";
import ViewTeamModal from "./ViewTeamModal";
import EditTeamModal from "./EditTeamModal";
import AssignWorkOrderModal from "./AssignWorkOrderModal";
import TeamStatusChangeModal from "./TeamStatusChangeModal";
import Widget from "../../../components/common/Widget";
import { Team } from "../../../types/common";
import {
  getTeamRoleColor,
  getTeamRoleIcon,
  getTeamRoleText,
} from "../../../utils/erp";

const MaintenanceTeams: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [roleFilter, setRoleFilter] = useState<TeamRoleEnum | "all">("all");
  const [statusFilter, setStatusFilter] = useState<
    "active" | "inactive" | "all"
  >("all");

  // Modal states
  const [showNewTeamModal, setShowNewTeamModal] = useState(false);
  const [showViewTeamModal, setShowViewTeamModal] = useState(false);
  const [showEditTeamModal, setShowEditTeamModal] = useState(false);
  const [showAssignWorkOrderModal, setShowAssignWorkOrderModal] =
    useState(false);
  const [showStatusChangeModal, setShowStatusChangeModal] = useState(false);

  // Selected data
  const [viewingTeam, setViewingTeam] = useState<Team | null>(null);
  const [editingTeam, setEditingTeam] = useState<Team | null>(null);
  const [selectedTeams, setSelectedTeams] = useState<string[]>([]);

  // Mock data - replace with actual API calls
  const [teams, setTeams] = useState<Team[]>(mockMaintenanceTeams);

  const filteredTeams = teams.filter((team) => {
    const matchesSearch =
      team.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      team.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      team.members.some(
        (member) =>
          member.employee?.firstName
            .toLowerCase()
            .includes(searchTerm.toLowerCase()) ||
          member.employee?.lastName
            .toLowerCase()
            .includes(searchTerm.toLowerCase())
      );
    const matchesRole =
      roleFilter === "all" ||
      team.members.some((member) => member.role === roleFilter);
    const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "active" && team.isActive) ||
      (statusFilter === "inactive" && !team.isActive);
    return matchesSearch && matchesRole && matchesStatus;
  });

  const getTeamLeader = (team: Team) => {
    return team.members.find((member) => member.role === TeamRoleEnum.Lead);
  };

  const getActiveMembers = (team: Team) => {
    return team.members.filter((member) => member.isActive);
  };

  const handleAddTeam = () => {
    setEditingTeam(null);
    setShowNewTeamModal(true);
  };

  const handleViewTeam = (team: Team) => {
    setViewingTeam(team);
    setShowViewTeamModal(true);
  };

  const handleEditTeam = (team: Team) => {
    setEditingTeam(team);
    setShowEditTeamModal(true);
  };

  const handleSelectTeam = (teamId: string) => {
    setSelectedTeams((prev) =>
      prev.includes(teamId)
        ? prev.filter((id) => id !== teamId)
        : [...prev, teamId]
    );
  };

  const handleNewTeamSave = (newTeam: Partial<Team>) => {
    if (newTeam.id) {
      setTeams((prev) => [...prev, newTeam as Team]);
    }
  };

  const handleEditTeamSave = (updatedTeam: Team) => {
    setTeams((prev) =>
      prev.map((team) => (team.id === updatedTeam.id ? updatedTeam : team))
    );
  };

  const handleAssignWorkOrders = (
    assignments: { teamId: string; planIds: string[] }[]
  ) => {
    // Here you would typically make API calls to assign work orders
    console.log("Assigning work orders:", assignments);
    // Show success message or handle the actual assignment logic
  };

  const handleStatusChange = (
    teamIds: string[],
    newStatus: boolean,
    reason?: string
  ) => {
    setTeams((prev) =>
      prev.map((team) =>
        teamIds.includes(team.id)
          ? { ...team, isActive: newStatus, lastModificationTime: new Date() }
          : team
      )
    );
    setSelectedTeams([]);
    // Here you would typically log the status change with reason
    console.log("Status change:", { teamIds, newStatus, reason });
  };

  const selectedTeamObjects = teams.filter((team) =>
    selectedTeams.includes(team.id)
  );

  return (
    <div className="space-y-4 pt-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">Bakım Ekipleri</h2>
          <p className="text-gray-600">
            Bakım ekiplerini ve üyelerini yönetin
          </p>
        </div>
        <button
          onClick={handleAddTeam}
          className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-2 text-sm"
        >
          <FaPlus className="w-4 h-4" />
          <span>Yeni Ekip</span>
        </button>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Widget
          title="Toplam Ekip"
          value={teams.length}
          color="blue"
          icon="FaUsers"
        />

        <Widget
          title="Aktif Ekip"
          value={teams.filter((t) => t.isActive).length}
          color="green"
          icon="FaCheckCircle"
        />

        <Widget
          title="Toplam Üye"
          value={teams.reduce(
            (total, team) => total + getActiveMembers(team).length,
            0
          )}
          color="orange"
          icon="FaUser"
        />

        <Widget
          title="Uzmanlık"
          value={teams.reduce(
            (total, team) => total + (team.specializations?.length || 0),
            0
          )}
          color="purple"
          icon="FaWrench"
        />
      </div>

      {/* Filters */}
      <div className="flex space-x-3">
        <div className="flex-1 relative">
          <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
          <input
            type="text"
            placeholder="Ekip veya üye ara..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-9 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        <div className="relative">
          <FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
          <select
            value={roleFilter}
            onChange={(e) =>
              setRoleFilter(e.target.value as TeamRoleEnum | "all")
            }
            className="pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
            <option value="all">Tüm Roller</option>
            <option value={TeamRoleEnum.Lead}>Lider</option>
            <option value={TeamRoleEnum.Specialist}>Uzman</option>
            <option value={TeamRoleEnum.Member}>Üye</option>
          </select>
        </div>
        <div className="relative">
          <select
            value={statusFilter}
            onChange={(e) =>
              setStatusFilter(e.target.value as "active" | "inactive" | "all")
            }
            className="pl-4 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          >
            <option value="all">Tüm Durumlar</option>
            <option value="active">Aktif</option>
            <option value="inactive">Pasif</option>
          </select>
        </div>
      </div>

      {/* Teams Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {filteredTeams.map((team) => {
          const leader = getTeamLeader(team);
          const activeMembers = getActiveMembers(team);

          return (
            <div
              key={team.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">
                    <input
                      type="checkbox"
                      checked={selectedTeams.includes(team.id)}
                      onChange={() => handleSelectTeam(team.id)}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mt-0.5"
                    />
                    <h3 className="text-lg font-semibold text-gray-900">
                      {team.code}
                    </h3>
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-medium ${
                        team.isActive
                          ? "bg-green-100 text-green-800"
                          : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {team.isActive ? "Aktif" : "Pasif"}
                    </span>
                  </div>
                  <h4 className="font-medium text-gray-700 mb-1 text-sm">
                    {team.name}
                  </h4>
                  <p className="text-xs text-gray-500 mb-2">
                    {team.description}
                  </p>
                </div>
                <div className="flex space-x-1">
                  <button
                    onClick={() => handleViewTeam(team)}
                    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" />
                  </button>
                  <button
                    onClick={() => handleEditTeam(team)}
                    className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
                  >
                    <FaEdit className="w-4 h-4" />
                  </button>
                  <button className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
                    <FaTrash className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Team Leader */}
              {leader && (
                <div className="bg-purple-50 rounded-lg p-2 mb-3">
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center">
                      <FaAward className="w-5 h-5 text-white" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                        <h5 className="font-medium text-gray-900">
                          {leader.employee?.firstName}{" "}
                          {leader.employee?.lastName}
                        </h5>
                        <span
                          className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getTeamRoleColor(
                            leader.role
                          )}`}
                        >
                          {getTeamRoleIcon(leader.role)}
                          <span>{getTeamRoleText(leader.role)}</span>
                        </span>
                      </div>
                      <p className="text-sm text-gray-600">
                        {leader.employee?.jobPosition?.code}
                      </p>
                      <div className="flex items-center space-x-4 mt-1 text-xs text-gray-500">
                        {leader.employee?.email && (
                          <div className="flex items-center space-x-1">
                            <FaEnvelope className="w-3 h-3" />
                            <span>{leader.employee.email}</span>
                          </div>
                        )}
                        {leader.employee?.phone && (
                          <div className="flex items-center space-x-1">
                            <FaPhone className="w-3 h-3" />
                            <span>{leader.employee.phone}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {/* Team Members */}
              <div className="space-y-2 mb-3">
                <h5 className="text-xs font-medium text-gray-700">
                  Ekip Üyeleri ({activeMembers.length})
                </h5>
                <div className="space-y-2">
                  {activeMembers
                    .filter((member) => member.role !== TeamRoleEnum.Lead)
                    .slice(0, 3)
                    .map((member) => (
                      <div
                        key={member.id}
                        className="flex items-center space-x-2 p-1.5 bg-gray-50 rounded-lg"
                      >
                        <div className="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center">
                          <FaUser className="w-4 h-4 text-white" />
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center space-x-2">
                            <span className="text-sm font-medium text-gray-900">
                              {member.employee?.firstName}{" "}
                              {member.employee?.lastName}
                            </span>
                            <span
                              className={`px-2 py-1 rounded-full text-xs font-medium flex items-center space-x-1 ${getTeamRoleColor(
                                member.role
                              )}`}
                            >
                              {getTeamRoleIcon(member.role)}
                              <span>{getTeamRoleText(member.role)}</span>
                            </span>
                          </div>
                          <p className="text-xs text-gray-600">
                            {member.employee?.jobPosition?.code}
                          </p>
                        </div>
                      </div>
                    ))}
                  {activeMembers.filter(
                    (member) => member.role !== TeamRoleEnum.Lead
                  ).length > 3 && (
                    <div className="text-center text-xs text-gray-500 p-1.5">
                      +
                      {activeMembers.filter(
                        (member) => member.role !== TeamRoleEnum.Lead
                      ).length - 3}{" "}
                      kişi daha...
                    </div>
                  )}
                </div>
              </div>

              {/* Specializations */}
              <div className="border-t border-gray-100 pt-2">
                <h5 className="text-xs font-medium text-gray-700 mb-2">
                  Uzmanlık Alanları
                </h5>
                <div className="flex flex-wrap gap-1">
                  {team.specializations ??
                    [].slice(0, 6).map((specialization, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                      >
                        {specialization}
                      </span>
                    ))}
                  {(team.specializations?.length ?? 0) > 6 && (
                    <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                      +{(team.specializations?.length ?? 0) - 6}
                    </span>
                  )}
                </div>
              </div>

              <div className="border-t border-gray-100 pt-2 mt-2">
                <div className="flex items-center justify-between text-xs text-gray-500">
                  <div className="flex items-center space-x-2">
                    <FaClock className="w-3 h-3" />
                    <span>
                      Oluşturuldu:{" "}
                      {team.creationTime.toLocaleDateString("tr-TR")}
                    </span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <span>
                      Son Güncelleme:{" "}
                      {team.lastModificationTime.toLocaleDateString("tr-TR")}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {filteredTeams.length === 0 && (
        <div className="text-center py-12">
          <FaUsers className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">
            Ekip bulunamadı
          </h3>
          <p className="text-gray-500 mb-4">
            Arama kriterlerinizi değiştirin veya yeni bir ekip oluşturun.
          </p>
          <button
            onClick={handleAddTeam}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
          >
            Yeni Ekip Oluştur
          </button>
        </div>
      )}

      {/* Bulk Actions */}
      {selectedTeams.length > 0 && (
        <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-white rounded-lg shadow-lg border border-gray-200 p-4">
          <div className="flex items-center space-x-4">
            <span className="text-sm text-gray-600">
              {selectedTeams.length} ekip seçildi
            </span>
            <div className="flex space-x-2">
              <button
                onClick={() => setShowAssignWorkOrderModal(true)}
                className="bg-green-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-green-700"
              >
                İş Emri Ata
              </button>
              <button
                onClick={() => setShowStatusChangeModal(true)}
                className="bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-blue-700"
              >
                Durum Değiştir
              </button>
              <button
                onClick={() => setSelectedTeams([])}
                className="bg-gray-600 text-white px-2.5 py-1.5 rounded text-sm hover:bg-gray-700"
              >
                Temizle
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modals */}
      <NewTeamModal
        isOpen={showNewTeamModal}
        onClose={() => setShowNewTeamModal(false)}
        onSave={handleNewTeamSave}
      />

      <ViewTeamModal
        isOpen={showViewTeamModal}
        onClose={() => setShowViewTeamModal(false)}
        onEdit={handleEditTeam}
        team={viewingTeam}
      />

      <EditTeamModal
        isOpen={showEditTeamModal}
        onClose={() => setShowEditTeamModal(false)}
        onSave={handleEditTeamSave}
        team={editingTeam}
      />

      <AssignWorkOrderModal
        isOpen={showAssignWorkOrderModal}
        onClose={() => setShowAssignWorkOrderModal(false)}
        onSave={handleAssignWorkOrders}
        selectedTeams={selectedTeamObjects}
      />

      <TeamStatusChangeModal
        isOpen={showStatusChangeModal}
        onClose={() => setShowStatusChangeModal(false)}
        onSave={handleStatusChange}
        selectedTeams={selectedTeamObjects}
      />
    </div>
  );
};

export default MaintenanceTeams;