import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged,
  signInWithCustomToken
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  onSnapshot, 
  doc, 
  updateDoc, 
  deleteDoc,
  serverTimestamp
} from 'firebase/firestore';
import { 
  Calendar, 
  Clock, 
  Users, 
  PlusCircle, 
  Trash2, 
  UserPlus, 
  UserMinus, 
  Share2,
  AlertCircle,
  Trophy
} from 'lucide-react';

// --- Konfiguracja Firebase (Zgodna z instrukcjami) ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// Główny komponent aplikacji
export default function FootballApp() {
  const [user, setUser] = useState(null);
  const [matches, setMatches] = useState([]);
  const [loading, setLoading] = useState(true);
  
  // Stan formularzy
  const [newMatchData, setNewMatchData] = useState({
    date: '',
    time: '20:00',
    location: 'Orlik',
    maxPlayers: 14
  });
  const [playerName, setPlayerName] = useState('');
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  // 1. Inicjalizacja Autentykacji
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Błąd autoryzacji:", error);
      }
    };
    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      // Próbujemy odzyskać imię z localStorage jeśli użytkownik wraca
      const savedName = localStorage.getItem('football_player_name');
      if (savedName) setPlayerName(savedName);
    });
    return () => unsubscribe();
  }, []);

  // 2. Pobieranie danych (Mecze) - Realtime
  useEffect(() => {
    if (!user) return;

    // Ścieżka publiczna - wszyscy widzą te same mecze
    const matchesRef = collection(db, 'artifacts', appId, 'public', 'data', 'matches');

    const unsubscribe = onSnapshot(matchesRef, 
      (snapshot) => {
        const matchesList = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        
        // Sortowanie po dacie (najbliższe najpierw) - robimy to w JS
        // Zakładamy format YYYY-MM-DD
        matchesList.sort((a, b) => {
          const dateA = new Date(`${a.date}T${a.time}`);
          const dateB = new Date(`${b.date}T${b.time}`);
          return dateA - dateB;
        });

        setMatches(matchesList);
        setLoading(false);
      },
      (error) => {
        console.error("Błąd pobierania danych:", error);
        setErrorMsg("Nie udało się pobrać listy meczów.");
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [user]);

  // Funkcja tworzenia meczu
  const handleCreateMatch = async (e) => {
    e.preventDefault();
    if (!user) return;
    if (!newMatchData.date || !newMatchData.time) {
      setErrorMsg("Podaj datę i godzinę.");
      return;
    }

    try {
      const matchesRef = collection(db, 'artifacts', appId, 'public', 'data', 'matches');
      await addDoc(matchesRef, {
        ...newMatchData,
        createdBy: user.uid,
        createdAt: serverTimestamp(),
        players: [] // Pusta tablica na start
      });
      setShowCreateForm(false);
      setNewMatchData({ ...newMatchData, date: '' }); // Reset daty
    } catch (err) {
      console.error(err);
      setErrorMsg("Błąd podczas tworzenia meczu.");
    }
  };

  // Funkcja usuwania meczu (tylko twórca lub dla uproszczenia każdy w tym demo)
  const handleDeleteMatch = async (matchId) => {
    if (!confirm("Czy na pewno chcesz usunąć to wydarzenie?")) return;
    try {
      const matchDoc = doc(db, 'artifacts', appId, 'public', 'data', 'matches', matchId);
      await deleteDoc(matchDoc);
    } catch (err) {
      console.error(err);
    }
  };

  // Funkcja dołączenia do meczu
  const handleJoin = async (match) => {
    if (!playerName.trim()) {
      setErrorMsg("Wpisz swoje imię/ksywkę, aby dołączyć.");
      return;
    }
    
    // Zapisz imię w pamięci lokalnej dla wygody
    localStorage.setItem('football_player_name', playerName);

    // Sprawdź czy gracz już jest na liście
    const isAlreadyJoined = match.players.some(p => p.uid === user.uid || p.name.toLowerCase() === playerName.toLowerCase());
    
    if (isAlreadyJoined) {
      setErrorMsg("Już jesteś na liście!");
      setTimeout(() => setErrorMsg(''), 3000);
      return;
    }

    const newPlayer = {
      name: playerName,
      uid: user.uid,
      joinedAt: Date.now()
    };

    try {
      const matchDoc = doc(db, 'artifacts', appId, 'public', 'data', 'matches', match.id);
      // Kopiujemy tablicę i dodajemy nowego gracza
      const updatedPlayers = [...match.players, newPlayer];
      
      await updateDoc(matchDoc, {
        players: updatedPlayers
      });
      setErrorMsg('');
    } catch (err) {
      console.error(err);
      setErrorMsg("Nie udało się zapisać.");
    }
  };

  // Funkcja wypisania się
  const handleLeave = async (match, playerUid) => {
    // Pozwalamy usuwać tylko siebie, chyba że jesteśmy twórcą meczu (tu uproszczone: każdy może usunąć siebie)
    // Dodajemy małe zabezpieczenie UI
    
    try {
      const matchDoc = doc(db, 'artifacts', appId, 'public', 'data', 'matches', match.id);
      const updatedPlayers = match.players.filter(p => p.uid !== playerUid);
      
      await updateDoc(matchDoc, {
        players: updatedPlayers
      });
    } catch (err) {
      console.error(err);
    }
  };

  // Kopiowanie linku
  const copyLink = () => {
    const url = window.location.href;
    // Fallback dla iframe
    const textArea = document.createElement("textarea");
    textArea.value = url;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      alert("Link skopiowany do schowka! Wyślij go na Messengerze.");
    } catch (err) {
      console.error('Nie udało się skopiować', err);
    }
    document.body.removeChild(textArea);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-green-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-700"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-100 font-sans pb-10">
      {/* Header */}
      <header className="bg-green-700 text-white p-4 shadow-lg sticky top-0 z-10">
        <div className="max-w-md mx-auto flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Trophy className="h-6 w-6 text-yellow-300" />
            <h1 className="text-xl font-bold">Piłka - Zapisy</h1>
          </div>
          <button 
            onClick={() => setShowCreateForm(!showCreateForm)}
            className="bg-green-800 hover:bg-green-900 p-2 rounded-full transition-colors text-sm flex items-center gap-1 px-3"
          >
            {showCreateForm ? 'Anuluj' : 'Nowy Mecz'}
          </button>
        </div>
      </header>

      <main className="max-w-md mx-auto p-4 space-y-6">
        
        {/* Error Message Toast */}
        {errorMsg && (
          <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-3 rounded shadow-md flex items-center gap-2 animate-pulse">
            <AlertCircle size={18} />
            <p>{errorMsg}</p>
          </div>
        )}

        {/* Formularz tworzenia (ukryty domyślnie) */}
        {showCreateForm && (
          <div className="bg-white p-6 rounded-xl shadow-md border border-green-200">
            <h2 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
              <PlusCircle className="text-green-600" /> Utwórz nowe wydarzenie
            </h2>
            <form onSubmit={handleCreateMatch} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">Data</label>
                <input 
                  type="date" 
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border focus:ring-green-500 focus:border-green-500"
                  value={newMatchData.date}
                  onChange={e => setNewMatchData({...newMatchData, date: e.target.value})}
                  required
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">Godzina</label>
                  <input 
                    type="time" 
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
                    value={newMatchData.time}
                    onChange={e => setNewMatchData({...newMatchData, time: e.target.value})}
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">Max Graczy</label>
                  <input 
                    type="number" 
                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
                    value={newMatchData.maxPlayers}
                    onChange={e => setNewMatchData({...newMatchData, maxPlayers: parseInt(e.target.value)})}
                    min="2"
                    max="30"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Lokalizacja</label>
                <input 
                  type="text" 
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border"
                  value={newMatchData.location}
                  onChange={e => setNewMatchData({...newMatchData, location: e.target.value})}
                  placeholder="np. Orlik Centrum"
                />
              </div>
              <button 
                type="submit" 
                className="w-full bg-green-600 text-white p-3 rounded-lg font-bold hover:bg-green-700 transition shadow"
              >
                Stwórz listę
              </button>
            </form>
          </div>
        )}

        {/* Lista Meczów */}
        {matches.length === 0 ? (
          <div className="text-center py-10 text-gray-500 bg-white rounded-xl shadow-sm">
            <p className="text-lg">Brak zaplanowanych gier.</p>
            <p className="text-sm">Kliknij "Nowy Mecz" aby rozpocząć zapisy.</p>
          </div>
        ) : (
          matches.map(match => {
            const playerCount = match.players.length;
            const isFull = playerCount >= match.maxPlayers;
            const spotsLeft = match.maxPlayers - playerCount;
            
            // Podział na skład i rezerwę
            const mainSquad = match.players.slice(0, match.maxPlayers);
            const reserves = match.players.slice(match.maxPlayers);
            
            const myEntry = match.players.find(p => p.uid === user?.uid);

            return (
              <div key={match.id} className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
                {/* Karta Meczu Header */}
                <div className="bg-gradient-to-r from-gray-50 to-gray-100 p-4 border-b border-gray-200">
                  <div className="flex justify-between items-start">
                    <div>
                      <h3 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                        {match.location}
                      </h3>
                      <div className="flex items-center gap-3 text-gray-600 mt-1 text-sm">
                        <span className="flex items-center gap-1"><Calendar size={14} /> {match.date}</span>
                        <span className="flex items-center gap-1"><Clock size={14} /> {match.time}</span>
                      </div>
                    </div>
                    <button 
                      onClick={() => handleDeleteMatch(match.id)}
                      className="text-gray-400 hover:text-red-500 p-1"
                      title="Usuń mecz"
                    >
                      <Trash2 size={16} />
                    </button>
                  </div>

                  {/* Pasek postępu */}
                  <div className="mt-4">
                    <div className="flex justify-between text-sm font-semibold mb-1">
                      <span className={isFull ? "text-red-600" : "text-green-600"}>
                        {isFull ? "Lista Pełna!" : `Wolne miejsca: ${spotsLeft}`}
                      </span>
                      <span className="text-gray-500">{playerCount}/{match.maxPlayers}</span>
                    </div>
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div 
                        className={`h-2.5 rounded-full ${isFull ? 'bg-red-500' : 'bg-green-500'}`} 
                        style={{ width: `${Math.min((playerCount / match.maxPlayers) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                </div>

                {/* Sekcja Zapisów */}
                <div className="p-4 bg-white">
                  {!myEntry ? (
                    <div className="flex gap-2">
                      <input 
                        type="text" 
                        placeholder="Wpisz swoje imię..." 
                        className="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-green-500 outline-none"
                        value={playerName}
                        onChange={(e) => setPlayerName(e.target.value)}
                        onKeyDown={(e) => {
                           if (e.key === 'Enter') handleJoin(match);
                        }}
                      />
                      <button 
                        onClick={() => handleJoin(match)}
                        className={`px-4 rounded-lg font-bold text-white shadow-md transition-transform active:scale-95 flex items-center gap-2 ${isFull ? 'bg-orange-500 hover:bg-orange-600' : 'bg-green-600 hover:bg-green-700'}`}
                      >
                        {isFull ? <span className="text-sm">Na Rezerwę</span> : <span className="flex items-center gap-1"><UserPlus size={18}/> Gram</span>}
                      </button>
                    </div>
                  ) : (
                    <div className="bg-green-50 border border-green-200 text-green-800 p-3 rounded-lg flex justify-between items-center mb-2">
                      <span className="font-medium">Jesteś na liście jako <b>{myEntry.name}</b></span>
                      <button 
                        onClick={() => handleLeave(match, user.uid)}
                        className="text-red-500 hover:text-red-700 text-sm font-semibold bg-white px-2 py-1 rounded border border-red-100 hover:border-red-300"
                      >
                        Wypisz się
                      </button>
                    </div>
                  )}

                  {/* Lista Graczy */}
                  <div className="mt-6">
                    <h4 className="text-xs font-uppercase text-gray-500 font-bold tracking-wider mb-2">SKŁAD PODSTAWOWY</h4>
                    <ul className="space-y-2">
                      {mainSquad.map((player, idx) => (
                        <li key={idx} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors border-b border-gray-50 last:border-0">
                          <span className="flex items-center justify-center w-6 h-6 bg-gray-200 text-gray-600 rounded-full text-xs font-bold">
                            {idx + 1}
                          </span>
                          <span className="font-medium text-gray-800">{player.name}</span>
                          {/* Opcja usunięcia kogoś innego (dla admina/organizatora) - tutaj dostępna dla każdego dla wygody */}
                          <button 
                             onClick={() => handleLeave(match, player.uid)}
                             className="ml-auto text-gray-300 hover:text-red-400"
                          >
                             <UserMinus size={14} />
                          </button>
                        </li>
                      ))}
                      {mainSquad.length === 0 && <li className="text-gray-400 text-sm italic py-2">Lista jest pusta. Bądź pierwszy!</li>}
                    </ul>
                  </div>

                  {/* Lista Rezerwowa */}
                  {reserves.length > 0 && (
                    <div className="mt-6 pt-4 border-t border-dashed border-gray-300">
                      <h4 className="text-xs font-uppercase text-orange-600 font-bold tracking-wider mb-2 flex items-center gap-1">
                        <AlertCircle size={12} /> LISTA REZERWOWA
                      </h4>
                      <ul className="space-y-2 opacity-75">
                         {reserves.map((player, idx) => (
                          <li key={idx} className="flex items-center gap-3 p-2 bg-orange-50 rounded-lg border border-orange-100">
                            <span className="flex items-center justify-center w-6 h-6 bg-orange-200 text-orange-700 rounded-full text-xs font-bold">
                              R{idx + 1}
                            </span>
                            <span className="font-medium text-gray-700">{player.name}</span>
                            <button 
                               onClick={() => handleLeave(match, player.uid)}
                               className="ml-auto text-gray-300 hover:text-red-400"
                            >
                               <UserMinus size={14} />
                            </button>
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                  
                  {/* Przycisk Udostępnij */}
                  <div className="mt-6 pt-4 border-t border-gray-100 flex justify-center">
                    <button 
                      onClick={copyLink}
                      className="text-blue-600 hover:text-blue-800 text-sm font-semibold flex items-center gap-2 py-2 px-4 rounded-full hover:bg-blue-50 transition-colors"
                    >
                      <Share2 size={16} /> Skopiuj link dla grupy
                    </button>
                  </div>
                </div>
              </div>
            );
          })
        )}
      </main>
    </div>
  );
}