project_vollidioten_website/components/EmployeeManagementModal.tsx

import React, { useState, useEffect } from 'react';
import { Icons } from './IconSet';

interface EmployeeManagementModalProps {
  isOpen: boolean;
  onClose: () => void;
  projectId: string;
  onUpdate: () => void;
}

const EmployeeManagementModal: React.FC<EmployeeManagementModalProps> = ({
  isOpen,
  onClose,
  projectId,
  onUpdate
}) => {
  const [employees, setEmployees] = useState<string[]>([]);
  const [availablePlayers, setAvailablePlayers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [selectedPlayer, setSelectedPlayer] = useState('');
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen && projectId) {
      loadEmployees();
      loadAvailablePlayers();
    }
  }, [isOpen, projectId]);

  const loadEmployees = async () => {
    try {
      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees`);
      if (response.ok) {
        const data = await response.json();
        setEmployees(data);
      }
    } catch (err) {
      console.error('Error loading employees:', err);
    }
  };

  const loadAvailablePlayers = async () => {
    try {
      const response = await fetch('https://vollidioten.ceraticsoft.de/api/players');
      if (response.ok) {
        const players = await response.json();
        // Filter out players who are already employees
        const available = players.filter((player: any) =>
          !employees.includes(player.username)
        );
        setAvailablePlayers(available);
      }
    } catch (err) {
      console.error('Error loading available players:', err);
    }
  };

  const addEmployee = async () => {
    if (!selectedPlayer) return;

    try {
      setLoading(true);
      setError(null);

      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ employeeName: selectedPlayer })
      });

      if (response.ok) {
        await loadEmployees();
        setSelectedPlayer('');
        onUpdate();
      } else {
        const errorData = await response.json();
        setError(errorData.error || 'Fehler beim Hinzufügen');
      }
    } catch (err) {
      console.error('Error adding employee:', err);
      setError('Netzwerkfehler');
    } finally {
      setLoading(false);
    }
  };

  const removeEmployee = async (employeeName: string) => {
    try {
      setLoading(true);
      const response = await fetch(`https://vollidioten.ceraticsoft.de/api/projects/${projectId}/employees/${employeeName}`, {
        method: 'DELETE',
        credentials: 'include'
      });

      if (response.ok) {
        await loadEmployees();
        onUpdate();
      } else {
        setError('Fehler beim Entfernen');
      }
    } catch (err) {
      console.error('Error removing employee:', err);
      setError('Netzwerkfehler');
    } finally {
      setLoading(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-surface border border-border rounded-xl w-full max-w-2xl shadow-2xl flex flex-col max-h-[90vh]">
        <div className="p-4 border-b border-border flex justify-between items-center bg-surfaceHighlight/20">
          <h3 className="font-bold text-textMain flex items-center gap-2">
            <Icons.Users className="w-5 h-5" />
            Mitarbeiter verwalten
          </h3>
          <button onClick={onClose} className="text-textMuted hover:text-white transition-colors text-xl leading-none">&times;</button>
        </div>

        <div className="p-6 flex-1 overflow-y-auto">
          {error && (
            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 mb-6">
              <p className="text-red-400">{error}</p>
            </div>
          )}

          {/* Add Employee */}
          <div className="bg-surfaceHighlight/30 border border-border rounded-lg p-4 mb-6">
            <h4 className="font-semibold text-textMain mb-4">Mitarbeiter hinzufügen</h4>
            <div className="flex gap-2">
              <select
                value={selectedPlayer}
                onChange={(e) => setSelectedPlayer(e.target.value)}
                className="flex-1 bg-[#0b0b0d] border border-border rounded p-2 text-sm"
              >
                <option value="">Spieler auswählen...</option>
                {availablePlayers.map((player) => (
                  <option key={player.uuid} value={player.username}>
                    {player.username}
                  </option>
                ))}
              </select>
              <button
                onClick={addEmployee}
                disabled={!selectedPlayer || loading}
                className="bg-accentInfo hover:bg-accentInfo/90 disabled:opacity-50 text-white px-4 py-2 rounded text-sm font-medium"
              >
                Hinzufügen
              </button>
            </div>
          </div>

          {/* Current Employees */}
          <div className="mb-4">
            <h4 className="font-semibold text-textMain mb-4">
              Aktuelle Mitarbeiter ({employees.length})
            </h4>

            {employees.length === 0 ? (
              <div className="text-center py-8 text-textMuted">
                <p>Noch keine Mitarbeiter hinzugefügt.</p>
              </div>
            ) : (
              <div className="space-y-3">
                {employees.map((employee) => (
                  <div key={employee} className="flex items-center justify-between bg-surfaceHighlight/30 border border-border rounded-lg p-3">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-gradient-to-br from-gray-700 to-gray-900 rounded flex items-center justify-center text-xs font-bold">
                        {employee.charAt(0).toUpperCase()}
                      </div>
                      <span className="font-medium text-textMain">{employee}</span>
                    </div>
                    <button
                      onClick={() => removeEmployee(employee)}
                      disabled={loading}
                      className="text-red-400 hover:text-red-300 text-sm px-2 py-1 rounded hover:bg-red-500/10 transition-colors"
                    >
                      Entfernen
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="p-4 border-t border-border flex justify-end">
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm font-medium text-textMuted hover:text-white transition-colors"
          >
            Schließen
          </button>
        </div>
      </div>
    </div>
  );
};

export default EmployeeManagementModal;