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({ close }) {
  const [data, setData] = useState([]);
  const [eventData, setEventData] = useState({
    time: "",
    date: "",
    price: "",
    food: false,
    endtime: ""
  });

  
  useEffect(() => {
    let unsub = onSnapshot(collection(db, "forms"), (snapshot) => {
      let data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setData(data)
    })
    let unsub1 = onSnapshot(doc(db, "time", "time"), data => {
      let parsedData = data.data()
      setEventData(parsedData)
    })
    return () => {
      unsub();
      unsub1()
    };
  }, []);

  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 saveEventData = async () => {
    try {
      await updateDoc(doc(db, "time", "time"), eventData)
      alert("Event-Daten gespeichert")
    } catch (error) {
      alert("Irgendetwas ist schief gelaufen :(")
      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);
      }
    }
  }

  const resetEverything = () => {
    if (!window.confirm("Wirklich alle Anmeldungen löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.")) {
      return;
    }
    data.forEach(async el => {
      try {
        await deleteDoc(doc(db, "forms", el.id))
      } catch (error) {
        console.error(error)
        alert("Irgendetwas ist schiefgelaufen :(")
      }
    });
  }

  const handlePrint = () => {
    const allNames = data.flatMap(entry => entry.names || []);
    const printContent = `
      <html>
        <head>
          <title>Liste der angemeldeten Personen</title>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            h1 { text-align: center; }
            ul { list-style-type: none; padding: 0; }
            li { padding: 5px 0; border-bottom: 1px solid #eee; }
          </style>
        </head>
        <body>
          <h1>Liste der angemeldeten Personen</h1>
          <ul>
            ${allNames.map(name => `<li>${name}</li>`).join('')}
          </ul>
        </body>
      </html>
    `;
    const printWindow = window.open('', '_blank');
    printWindow.document.write(printContent);
    printWindow.document.close();
    printWindow.print();
  }

  return (
    <div className="admin-container">
      <div className="admin-header">
        <h2>Verwaltung Dashboard</h2>
        <div className="header-buttons" style={{ paddingLeft: "50px" }}>
          <button type='button' onClick={handlePrint} className="print-btn">Drucken</button>
          <button type='button' onClick={() => signOut(auth)} className="logout-btn">Logout</button>
          <button type='button' onClick={() => resetEverything()} className="logout-btn" style={{ color: "rgb(179, 0, 0)" }}>Alle Anmeldungen löschen</button>
          <button type='button' onClick={() => close()} className="logout-btn" >Verwaltung ohne Abmelden schließen</button>
        </div>
      </div>
      <div className="event-data-container">
        <h3>Event-Daten bearbeiten</h3>
        <div className="event-data-grid">
          <div className="event-data-field">
            <label className="event-data-label">Zeit:</label>
            <input
              type="text"
              value={eventData.time}
              onChange={(e) => setEventData({...eventData, time: e.target.value})}
              className="event-data-input"
              placeholder="z.B. 19:00 Uhr"
            />
          </div>
          <div className="event-data-field">
            <label className="event-data-label">Datum:</label>
            <input
              type="text"
              value={eventData.date}
              onChange={(e) => setEventData({...eventData, date: e.target.value})}
              className="event-data-input"
              placeholder="z.B. 27. März 2026"
            />
          </div>
          <div className="event-data-field">
            <label className="event-data-label">Preis:</label>
            <input
              type="text"
              value={eventData.price}
              onChange={(e) => setEventData({...eventData, price: e.target.value})}
              className="event-data-input"
              placeholder="z.B. 5"
            />
          </div>
          <div className="event-data-field">
            <label className="event-data-label">Anmeldung bis:</label>
            <input
              type="datetime-local"
              value={eventData.endtime}
              onChange={(e) => setEventData({...eventData, endtime: e.target.value})}
              className="event-data-input"
            />
          </div>
          <div className="event-data-field">
            <label className="event-data-label">Verpflegung:</label>
            <div className="checkbox-container">
              <input
                type="checkbox"
                checked={eventData.food}
                onChange={(e) => setEventData({...eventData, food: e.target.checked})}
                className="event-data-checkbox"
              />
              <span>Verpflegung ist gesorgt</span>
            </div>
          </div>
        </div>
        <button
          type='button'
          onClick={saveEventData}
          className="event-save-btn"
        >
          Event-Daten speichern
        </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>
  )
}
