'use client';

import { useState, useEffect, useRef } from 'react';

interface Member {
  memberNumber: string;
  hasVoted: boolean;
  lastLogin?: string;
}

export default function MembersManager() {
  const [members, setMembers] = useState<Member[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [showUploadForm, setShowUploadForm] = useState(false);
  const [newMemberNumber, setNewMemberNumber] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [editingMember, setEditingMember] = useState<string | null>(null);
  const [editPassword, setEditPassword] = useState('');
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Stats
  const totalMembers = members.length;
  const votedMembers = members.filter(m => m.hasVoted).length;
  const notVotedMembers = totalMembers - votedMembers;

  // Load members on component mount
  useEffect(() => {
    fetchMembers();
  }, []);

  // Fetch members from API
  const fetchMembers = async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/members');

      if (!response.ok) {
        throw new Error('Fehler beim Abrufen der Mitglieder');
      }

      const data = await response.json();
      setMembers(data.members || []);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Add a new member
  const handleAddMember = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!newMemberNumber || !newPassword) {
      setError('Mitgliedsnummer und Passwort sind erforderlich');
      return;
    }

    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/members', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'add',
          memberNumber: newMemberNumber,
          password: newPassword
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Hinzufügen des Mitglieds');
      }

      setSuccess('Mitglied erfolgreich hinzugefügt');
      setNewMemberNumber('');
      setNewPassword('');
      setShowAddForm(false);

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Update a member
  const handleUpdateMember = async (memberNumber: string) => {
    if (!editPassword) {
      setError('Passwort ist erforderlich');
      return;
    }

    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/members', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'update',
          memberNumber,
          password: editPassword
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Aktualisieren des Mitglieds');
      }

      setSuccess('Passwort erfolgreich aktualisiert');
      setEditPassword('');
      setEditingMember(null);

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Delete a member
  const handleDeleteMember = async (memberNumber: string) => {
    // Show confirmation dialog
    if (!confirm(`Sind Sie sicher, dass Sie das Mitglied "${memberNumber}" löschen möchten?`)) {
      return;
    }

    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/members', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'delete',
          memberNumber
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Löschen des Mitglieds');
      }

      setSuccess('Mitglied erfolgreich gelöscht');

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Delete all members
  const handleDeleteAllMembers = async () => {
    // Show confirmation dialog
    if (!confirm('Sind Sie sicher, dass Sie ALLE Mitglieder löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.')) {
      return;
    }

    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/members', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'deleteAll'
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Löschen aller Mitglieder');
      }

      setSuccess('Alle Mitglieder erfolgreich gelöscht');

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Toggle voting status
  const handleToggleVotingStatus = async (memberNumber: string, currentStatus: boolean) => {
    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const response = await fetch('/api/members', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          action: 'update',
          memberNumber,
          hasVoted: !currentStatus
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Aktualisieren des Status');
      }

      setSuccess('Status erfolgreich aktualisiert');

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Handle CSV upload
  const handleUploadCSV = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!fileInputRef.current?.files?.length) {
      setError('Bitte wählen Sie eine CSV-Datei aus');
      return;
    }

    const file = fileInputRef.current.files[0];

    if (!file.name.endsWith('.csv')) {
      setError('Bitte wählen Sie eine CSV-Datei aus');
      return;
    }

    setIsLoading(true);
    setError(null);
    setSuccess(null);

    try {
      const formData = new FormData();
      formData.append('file', file);

      const response = await fetch('/api/upload-members', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Fehler beim Hochladen der Datei');
      }

      setSuccess(`${data.added} Mitglieder importiert, ${data.skipped} übersprungen`);
      setShowUploadForm(false);

      // Reset file input
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }

      // Refresh members list
      fetchMembers();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten');
    } finally {
      setIsLoading(false);
    }
  };

  // Filter members by search term
  const filteredMembers = members.filter(member =>
    member.memberNumber.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <h2 className="text-xl font-bold text-[#0057a6] mb-4">Mitgliederverwaltung</h2>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="bg-[#e6f0fa] p-4 text-center">
          <div className="text-2xl font-bold text-[#0057a6]">{totalMembers}</div>
          <div className="text-sm text-[#0057a6]">Gesamt</div>
        </div>
        <div className="bg-[#e6f0fa] p-4 text-center">
          <div className="text-2xl font-bold text-[#0057a6]">{votedMembers}</div>
          <div className="text-sm text-[#0057a6]">Abgestimmt</div>
        </div>
        <div className="bg-[#e6f0fa] p-4 text-center">
          <div className="text-2xl font-bold text-[#0057a6]">{notVotedMembers}</div>
          <div className="text-sm text-[#0057a6]">Nicht abgestimmt</div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex flex-wrap gap-2 mb-6">
        <button
          onClick={() => {
            setShowAddForm(!showAddForm);
            setShowUploadForm(false);
            setError(null);
            setSuccess(null);
          }}
          className="ssvc-button"
        >
          {showAddForm ? 'Abbrechen' : 'Mitglied hinzufügen'}
        </button>

        <button
          onClick={() => {
            setShowUploadForm(!showUploadForm);
            setShowAddForm(false);
            setError(null);
            setSuccess(null);
          }}
          className="ssvc-button"
        >
          {showUploadForm ? 'Abbrechen' : 'CSV importieren'}
        </button>

        <button
          onClick={handleDeleteAllMembers}
          className="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded"
        >
          Alle Mitglieder löschen
        </button>
      </div>

      {/* Add Member Form */}
      {showAddForm && (
        <div className="bg-[#e6f0fa] p-4 mb-6">
          <h3 className="font-medium text-[#0057a6] mb-3">Neues Mitglied hinzufügen</h3>

          <form onSubmit={handleAddMember} className="space-y-3">
            <div>
              <label htmlFor="newMemberNumber" className="block text-sm font-medium text-gray-700 mb-1">
                Mitgliedsnummer
              </label>
              <input
                type="text"
                id="newMemberNumber"
                value={newMemberNumber}
                onChange={(e) => setNewMemberNumber(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
                required
              />
            </div>

            <div>
              <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
                Passwort
              </label>
              <input
                type="text"
                id="newPassword"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
                required
              />
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className="ssvc-button w-full"
            >
              {isLoading ? 'Wird hinzugefügt...' : 'Mitglied hinzufügen'}
            </button>
          </form>
        </div>
      )}

      {/* Upload CSV Form */}
      {showUploadForm && (
        <div className="bg-[#e6f0fa] p-4 mb-6">
          <h3 className="font-medium text-[#0057a6] mb-3">CSV-Datei importieren</h3>

          <form onSubmit={handleUploadCSV} className="space-y-3">
            <div>
              <label htmlFor="csvFile" className="block text-sm font-medium text-gray-700 mb-1">
                CSV-Datei auswählen
              </label>
              <input
                type="file"
                id="csvFile"
                ref={fileInputRef}
                accept=".csv"
                className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
                required
              />
              <p className="text-xs text-gray-500 mt-1">
                Die CSV-Datei sollte zwei Spalten enthalten: Mitgliedsnummer und Passwort.
              </p>
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className="ssvc-button w-full"
            >
              {isLoading ? 'Wird hochgeladen...' : 'CSV importieren'}
            </button>
          </form>
        </div>
      )}

      {/* Messages */}
      {error && (
        <div className="text-red-500 text-sm mb-4">{error}</div>
      )}

      {success && (
        <div className="text-green-500 text-sm mb-4">{success}</div>
      )}

      {/* Search */}
      <div className="mb-4">
        <label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">
          Mitglieder suchen
        </label>
        <input
          type="text"
          id="search"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Mitgliedsnummer eingeben..."
          className="w-full px-3 py-2 border border-gray-300 focus:outline-none focus:border-[#0057a6]"
        />
      </div>

      {/* Members List */}
      {isLoading && members.length === 0 ? (
        <div className="text-center p-4">Lade Mitglieder...</div>
      ) : filteredMembers.length === 0 ? (
        <div className="text-center p-4">
          {searchTerm ? 'Keine Mitglieder gefunden' : 'Keine Mitglieder vorhanden'}
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-[#0057a6] text-white">
                <th className="p-2 text-left">Mitgliedsnummer</th>
                <th className="p-2 text-center">Status</th>
                <th className="p-2 text-center">Letzte Anmeldung</th>
                <th className="p-2 text-right">Aktionen</th>
              </tr>
            </thead>
            <tbody>
              {filteredMembers.map((member) => (
                <tr key={member.memberNumber} className="border-b border-gray-200 hover:bg-gray-50">
                  <td className="p-2">{member.memberNumber}</td>
                  <td className="p-2 text-center">
                    <span
                      className={`inline-block px-2 py-1 rounded text-xs ${member.hasVoted
                        ? 'bg-green-100 text-green-800'
                        : 'bg-yellow-100 text-yellow-800'
                        }`}
                    >
                      {member.hasVoted ? 'Abgestimmt' : 'Nicht abgestimmt'}
                    </span>
                  </td>
                  <td className="p-2 text-center text-sm text-gray-600">
                    {member.lastLogin
                      ? new Date(member.lastLogin).toLocaleString('de-DE', {
                        day: '2-digit',
                        month: '2-digit',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                      })
                      : '-'}
                  </td>
                  <td className="p-2 text-right">
                    {editingMember === member.memberNumber ? (
                      <div className="flex items-center justify-end gap-2">
                        <input
                          type="text"
                          value={editPassword}
                          onChange={(e) => setEditPassword(e.target.value)}
                          placeholder="Neues Passwort"
                          className="px-2 py-1 border border-gray-300 text-sm w-32"
                        />
                        <button
                          onClick={() => handleUpdateMember(member.memberNumber)}
                          className="text-[#0057a6] hover:underline text-sm"
                        >
                          Speichern
                        </button>
                        <button
                          onClick={() => {
                            setEditingMember(null);
                            setEditPassword('');
                          }}
                          className="text-gray-500 hover:underline text-sm"
                        >
                          Abbrechen
                        </button>
                      </div>
                    ) : (
                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => {
                            setEditingMember(member.memberNumber);
                            setEditPassword('');
                            setError(null);
                            setSuccess(null);
                          }}
                          className="text-[#0057a6] hover:underline text-sm"
                          title="Passwort ändern"
                        >
                          Bearbeiten
                        </button>
                        <button
                          onClick={() => handleToggleVotingStatus(member.memberNumber, member.hasVoted)}
                          className="text-orange-600 hover:underline text-sm"
                          title={member.hasVoted ? 'Als nicht abgestimmt markieren' : 'Als abgestimmt markieren'}
                        >
                          Status ändern
                        </button>
                        <button
                          onClick={() => handleDeleteMember(member.memberNumber)}
                          className="text-red-600 hover:underline text-sm"
                          title="Mitglied löschen"
                        >
                          Löschen
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}