import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, addDoc, deleteDoc, doc, setLogLevel } from 'firebase/firestore';
import { ArrowRight, Facebook, Instagram, MapPin, Plus, Trash2, X } from 'lucide-react';

// --- Firebase Configuration ---
// These variables are provided by the environment.
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-paleteria-app';

// --- Main App Component ---
export default function App() {
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);

    // --- Component State ---
    const [inventory, setInventory] = useState([]);
    const [showAddForm, setShowAddForm] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    // --- Initialize Firebase and Authentication ---
    useEffect(() => {
        try {
            const app = initializeApp(firebaseConfig);
            const firestoreDb = getFirestore(app);
            const firebaseAuth = getAuth(app);
            
            setLogLevel('debug'); // For detailed console logs

            setDb(firestoreDb);
            setAuth(firebaseAuth);

            const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
                if (user) {
                    setUserId(user.uid);
                } else {
                    // If no user, try custom token or fall back to anonymous sign-in
                    try {
                        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                            await signInWithCustomToken(firebaseAuth, __initial_auth_token);
                        } else {
                            await signInAnonymously(firebaseAuth);
                        }
                    } catch (authError) {
                        console.error("Authentication Error:", authError);
                        setError("Could not connect to authentication service.");
                    }
                }
                setIsAuthReady(true);
            });

            return () => unsubscribe();
        } catch (e) {
            console.error("Firebase Initialization Error:", e);
            setError("Failed to initialize the application. Please check the configuration.");
            setIsLoading(false);
        }
    }, []);

    // --- Firestore Real-time Data Fetching ---
    useEffect(() => {
        if (isAuthReady && db && userId) {
            setIsLoading(true);
            const productsCollectionPath = `artifacts/${appId}/users/${userId}/products`;
            const productsCollection = collection(db, productsCollectionPath);
            
            const unsubscribe = onSnapshot(productsCollection, (snapshot) => {
                const productsData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                setInventory(productsData);
                setIsLoading(false);
            }, (err) => {
                console.error("Firestore Snapshot Error:", err);
                setError("Failed to load inventory. Please try again later.");
                setIsLoading(false);
            });

            return () => unsubscribe();
        } else if (isAuthReady && !userId) {
             // Handle case where authentication is ready but no user is signed in
             setIsLoading(false);
             setError("Authentication failed. Inventory cannot be loaded.");
        }
    }, [isAuthReady, db, userId]);

    // --- Event Handlers ---
    const handleAddItem = async (item) => {
        if (!db || !userId) return;
        try {
            const productsCollectionPath = `artifacts/${appId}/users/${userId}/products`;
            await addDoc(collection(db, productsCollectionPath), item);
            setShowAddForm(false);
        } catch (e) {
            console.error("Error adding document: ", e);
            setError("Failed to add item.");
        }
    };

    const handleDeleteItem = async (id) => {
        if (!db || !userId) return;
        // Using a custom modal for confirmation would be better, but window.confirm is used for simplicity.
        // In a real app, replace this with a UI component to avoid browser blocking dialogs.
        if (window.confirm("Are you sure you want to delete this item?")) {
            try {
                const productDocPath = `artifacts/${appId}/users/${userId}/products/${id}`;
                await deleteDoc(doc(db, productDocPath));
            } catch (e) {
                console.error("Error deleting document: ", e);
                setError("Failed to delete item.");
            }
        }
    };

    return (
        <div className="bg-blue-50 font-sans text-gray-800">
            {/* --- Header --- */}
            <Header />

            {/* --- Hero Section --- */}
            <Hero />

            {/* --- Main Content --- */}
            <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
                {/* --- Inventory Section --- */}
                <InventorySection
                    inventory={inventory}
                    onDeleteItem={handleDeleteItem}
                    onShowAddForm={() => setShowAddForm(true)}
                    isLoading={isLoading}
                    error={error}
                />

                {/* --- Location Section --- */}
                <LocationSection />
            </main>

            {/* --- Footer --- */}
            <Footer />

            {/* --- Add Item Modal --- */}
            {showAddForm && (
                <AddProductModal
                    onClose={() => setShowAddForm(false)}
                    onAddItem={handleAddItem}
                />
            )}
        </div>
    );
}

// --- Sub-components ---

const Header = () => (
    <header className="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center py-4">
                <div className="text-2xl md:text-3xl font-bold text-blue-600 tracking-tight">
                    Frosty Paleteria
                </div>
                <nav className="hidden md:flex items-center space-x-6">
                    <a href="#inventory" className="text-gray-600 hover:text-blue-600 transition-colors duration-300">Menu</a>
                    <a href="#location" className="text-gray-600 hover:text-blue-600 transition-colors duration-300">Location</a>
                    <a href="#contact" className="text-gray-600 hover:text-blue-600 transition-colors duration-300">Contact</a>
                </nav>
            </div>
        </div>
    </header>
);

const Hero = () => (
    <section className="bg-gradient-to-br from-cyan-300 to-blue-500 text-white text-center py-20 md:py-32 px-4">
        <h1 className="text-4xl md:text-6xl font-extrabold mb-4 drop-shadow-lg">Cool, Refreshing, Authentic</h1>
        <p className="text-lg md:text-xl max-w-2xl mx-auto mb-8 drop-shadow">Experience the best paletas, ice cream, and aguas frescas in town.</p>
        <a href="#inventory" className="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-blue-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
            View Our Menu <ArrowRight className="inline-block ml-2" size={20} />
        </a>
    </section>
);

const InventorySection = ({ inventory, onDeleteItem, onShowAddForm, isLoading, error }) => (
    <section id="inventory" className="py-16">
        <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800">Nuestro Menú</h2>
            <p className="text-lg text-gray-600 mt-2">Handcrafted with the finest ingredients.</p>
        </div>

        <div className="flex justify-end mb-6">
            <button
                onClick={onShowAddForm}
                className="flex items-center bg-green-500 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-green-600 transition-colors duration-300"
            >
                <Plus size={20} className="mr-2" />
                Add Item
            </button>
        </div>

        {error && <div className="text-center text-red-500 bg-red-100 p-4 rounded-lg mb-6">{error}</div>}
        
        {isLoading ? (
            <div className="text-center text-gray-500">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
                <p className="mt-4">Loading Inventory...</p>
            </div>
        ) : inventory.length === 0 && !error ? (
            <div className="text-center text-gray-500 py-10 border-2 border-dashed border-gray-300 rounded-lg">
                <p className="text-xl">Your inventory is empty.</p>
                <p>Click "Add Item" to build your menu!</p>
            </div>
        ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                {inventory.map(item => (
                    <ProductCard key={item.id} item={item} onDelete={() => onDeleteItem(item.id)} />
                ))}
            </div>
        )}
    </section>
);

const ProductCard = ({ item, onDelete }) => (
    <div className="bg-white rounded-xl shadow-lg overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 group">
        <img 
            src={item.imageUrl || 'https://placehold.co/600x400/3498db/ffffff?text=Paleta'} 
            alt={item.name} 
            className="w-full h-48 object-cover"
            onError={(e) => { e.target.onerror = null; e.target.src='https://placehold.co/600x400/e74c3c/ffffff?text=Error'; }}
        />
        <div className="p-5">
            <h3 className="text-xl font-bold text-gray-800 truncate">{item.name}</h3>
            <p className="text-gray-600 mt-2 h-12 overflow-hidden">{item.description}</p>
            <div className="flex justify-between items-center mt-4">
                <span className="text-2xl font-bold text-green-600">${parseFloat(item.price).toFixed(2)}</span>
                <button
                    onClick={onDelete}
                    className="p-2 rounded-full bg-red-100 text-red-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:bg-red-200"
                    aria-label={`Delete ${item.name}`}
                >
                    <Trash2 size={20} />
                </button>
            </div>
        </div>
    </div>
);

const LocationSection = () => (
    <section id="location" className="py-16 bg-white rounded-2xl shadow-inner">
        <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800">Visítanos</h2>
            <p className="text-lg text-gray-600 mt-2">We are waiting for you!</p>
        </div>
        <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div className="text-center md:text-left">
                <h3 className="text-2xl font-bold mb-4 flex items-center justify-center md:justify-start">
                    <MapPin className="text-blue-600 mr-3" size={28} />
                    Our Location
                </h3>
                <p className="text-lg text-gray-700 mb-2">123 Calle del Sabor</p>
                <p className="text-lg text-gray-700 mb-4">Frutaville, TX 75001</p>
                <h4 className="text-xl font-semibold mt-6 mb-2">Hours</h4>
                <p className="text-gray-700">Monday - Saturday: 9:00 AM - 8:00 PM</p>
                <p className="text-gray-700">Sunday: 10:00 AM - 6:00 PM</p>
            </div>
            <div className="w-full h-64 md:h-80 bg-gray-200 rounded-lg flex items-center justify-center">
                <p className="text-gray-500">Google Maps will be here</p>
            </div>
        </div>
    </section>
);

const Footer = () => (
    <footer id="contact" className="bg-gray-800 text-white py-10">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p className="text-xl font-semibold mb-4">Follow us on social media!</p>
            <div className="flex justify-center space-x-6 mb-6">
                <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors duration-300">
                    <Facebook size={32} />
                </a>
                <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors duration-300">
                    <Instagram size={32} />
                </a>
            </div>
            <p className="text-gray-500">&copy; {new Date().getFullYear()} Frosty Paleteria. All Rights Reserved.</p>
        </div>
    </footer>
);

const AddProductModal = ({ onClose, onAddItem }) => {
    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [imageUrl, setImageUrl] = useState('');
    const modalRef = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!name || !price) {
            // A simple validation, ideally should be a more user-friendly notification
            return;
        }
        onAddItem({ name, description, price, imageUrl });
    };
    
    // Close modal on outside click
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (modalRef.current && !modalRef.current.contains(event.target)) {
                onClose();
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [onClose]);


    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 p-4">
            <div ref={modalRef} className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md relative">
                <button onClick={onClose} className="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
                    <X size={24} />
                </button>
                <h2 className="text-2xl font-bold mb-6 text-center">Add New Item</h2>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
                        <input type="text" id="name" value={name} onChange={e => setName(e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required />
                    </div>
                    <div>
                        <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="description" value={description} onChange={e => setDescription(e.target.value)} rows="3" className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                    <div>
                        <label htmlFor="price" className="block text-sm font-medium text-gray-700">Price</label>
                        <input type="number" id="price" value={price} onChange={e => setPrice(e.target.value)} step="0.01" className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required />
                    </div>
                    <div>
                        <label htmlFor="imageUrl" className="block text-sm font-medium text-gray-700">Image URL (Optional)</label>
                        <input type="text" id="imageUrl" value={imageUrl} onChange={e => setImageUrl(e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" />
                    </div>
                    <div className="pt-2">
                        <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300">
                            Add to Menu
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};