import { collection, onSnapshot, deleteDoc, doc, updateDoc } from 'firebase/firestore';
import React, { useEffect, useState } from 'react'
import { auth, db } from './firebase';
import { signOut } from 'firebase/auth';
import './Admin.css';

export default function Admin() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    let unsub = onSnapshot(collection(db, "forms"), (snapshot) => {
      let data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setData(data)
    })
    return () => {
      unsub();
    };
  }, []);

  const getTotalPeople = () => {
    return data.reduce((sum, entry) => sum + (entry.names ? entry.names.length : 0), 0);
  }

  const deleteRegistration = async (id) => {
    if (window.confirm("Möchtest du diese Anmeldung wirklich löschen?")) {
      try {
        await deleteDoc(doc(db, "forms", id));
        alert("Anmeldung gelöscht.");
      } catch (error) {
        alert("Fehler beim Löschen: " + error.message);
        console.error(error);
      }
    }
  }

  const deletePerson = async (id, index) => {
    if (window.confirm("Möchtest du diese Person wirklich löschen?")) {
      try {
        const entry = data.find(item => item.id === id);
        if (entry && entry.names) {
          const updatedNames = entry.names.filter((_, i) => i !== index);
          await updateDoc(doc(db, "forms", id), {
            names: updatedNames,
            number: updatedNames.length
          });
          alert("Person gelöscht.");
        }
      } catch (error) {
        alert("Fehler beim Löschen: " + error.message);
        console.error(error);
      }
    }
  }

  return (
    <div className="admin-container">
      <div className="admin-header">
        <h2>Verwaltung Dashboard</h2>
        <button type='button' onClick={() => signOut(auth)} className="logout-btn">Logout</button>
      </div>

      <div className="admin-stats">
        <div className="stat-box">
          <h3>Gesamtzahl Anmeldungen</h3>
          <p className="stat-number">{data.length}</p>
        </div>
        <div className="stat-box">
          <h3>Gesamtzahl Personen</h3>
          <p className="stat-number">{getTotalPeople()}</p>
        </div>
      </div>

      <div className="admin-table-container">
        <h3>Anmeldungen</h3>
        <table className="admin-table">
          <thead>
            <tr>
              <th>E-Mail</th>
              <th>Personen</th>
              <th>Anzahl</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {data.map((entry) => (
              <tr key={entry.id}>
                <td>{entry.email}</td>
                <td>
                  <div className="names-list">
                    {entry.names && entry.names.map((name, index) => (
                      <div key={index} className="name-item">
                        <span>{name}</span>
                        <button 
                          className="delete-person-btn"
                          onClick={() => deletePerson(entry.id, index)}
                          title="Person löschen"
                        >
                          🗑️
                        </button>
                      </div>
                    ))}
                  </div>
                </td>
                <td className="count-cell">{entry.names ? entry.names.length : 0}</td>
                <td className="actions-cell">
                  <button 
                    className="delete-registration-btn"
                    onClick={() => deleteRegistration(entry.id)}
                    title="Gesamte Anmeldung löschen"
                  >
                    Löschen
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
