import React, { useState, useEffect } from "react";
import { TfiWheelchair } from "react-icons/tfi";
import { mosdokFetch } from "../../apiFetch";
import { useAuth } from "../Bejel_Regisz/AuthContext";

export default function Csempe() {
    const [mosdok, setMosdok] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const { user } = useAuth();

    useEffect(() => {
        const getData = async () => {
            setLoading(true);
            setError(null);
            const data = await mosdokFetch();
            if (data) {
                setMosdok(data);
            } else {
                setError("Nem sikerült betölteni az adatokat.");
            }
            setLoading(false);
        };
        getData();
    }, []);

    function mosdoTorles(mosdoId){
        fetch("http://localhost:8000/api/mosdotorles/" + mosdoId, {
            method: "DELETE",
            header: {
                "Accept" : "application/json",
                "Content-Type" : "application/json"
            }
        })
        .then(response => {
            if (response.ok) {
                setMosdok(prev => prev.filter(m => m.id !== mosdoId));
            } else {
                console.error("Törlés sikertelen");
            }
        })
        .catch(error => {
            console.error("Hiba a törlés során:", error);
        });
    }

    if (loading) {
        return(
          <div className="flex justify-center items-center h-32">
              <div 
                role="status"
                className="w-12 h-12 border-4 border-gray-300 border-t-yellow-500 rounded-full animate-spin"
              ></div>
          </div>
        );
    }

    if (error) {
        return <div className="text-center text-red-600 p-4">{error}</div>;
    }

    if(user && user.is_admin){
        return (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
                {mosdok.map((mosdo, index) => (
                    <div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 relative">
                        <h1 className="text-xl font-semibold text-gray-800 mb-3">{mosdo.nev}</h1>
                        <div className="text-gray-600 space-y-1">
                            <p><span className="font-medium text-gray-800">Kerület:</span> {mosdo.kerulet?.kerulet_nev}</p>
                            <p><span className="font-medium text-gray-800">Legközelebbi megálló:</span> {mosdo.kozeli_megall}</p>
                            <p><span className="font-medium text-gray-800">Ár:</span> {mosdo.ar} Ft</p>
                            <p><span className="font-medium text-gray-800">Nyitvatartás:</span> {mosdo.nyitva}</p>
                        </div>
                        {mosdo.akadalym === 1 ? <TfiWheelchair className="absolute bottom-10 right-10 w-8 h-8"/> : ""}
                        <a
                            href={mosdo.utvonal}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-bold mt-4 inline-block bg-yellow-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-yellow-600 transition"
                        >
                            Útvonalterv
                        </a>
                        <button
                            onClick={() => mosdoTorles(mosdo.id)}
                            className="font-bold mt-4 inline-block bg-red-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-red-600 transition"
                        >
                            Törlés
                        </button>
                    </div>
                ))}
            </div>
        );
    } else {
        return(
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
                {mosdok.map((mosdo, index) => (
                    <div key={index} className="bg-white shadow-lg rounded-xl p-6 border border-gray-200 relative">
                        <h1 className="text-xl font-semibold text-gray-800 mb-3">{mosdo.nev}</h1>
                        <div className="text-gray-600 space-y-1">
                            <p><span className="font-medium text-gray-800">Kerület:</span> {mosdo.kerulet?.kerulet_nev}</p>
                            <p><span className="font-medium text-gray-800">Legközelebbi megálló:</span> {mosdo.kozeli_megall}</p>
                            <p><span className="font-medium text-gray-800">Ár:</span> {mosdo.ar} Ft</p>
                            <p><span className="font-medium text-gray-800">Nyitvatartás:</span> {mosdo.nyitva}</p>
                        </div>
                        {mosdo.akadalym === 1 ? <TfiWheelchair className="absolute bottom-10 right-10 w-8 h-8"/> : ""}
                        <a
                            href={mosdo.utvonal}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-bold mt-4 inline-block bg-yellow-500 text-white py-2 px-4 rounded-lg shadow-md hover:bg-yellow-600 transition"
                        >
                            Útvonalterv
                        </a>
                    </div>
                ))}
            </div>
        )
    }
}