import React, { useState, useEffect } from 'react';
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, onSnapshot, addDoc, doc, updateDoc, deleteDoc, setLogLevel } from 'firebase/firestore';
import { getAuth, signInAnonymously, onAuthStateChanged } from "firebase/auth";

// --- Helper Components ---

// Icon for a trash can, used for the delete button
const TrashIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-trash-2 h-5 w-5">
        <polyline points="3 6 5 6 21 6"></polyline>
        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
        <line x1="10" y1="11" x2="10" y2="17"></line>
        <line x1="14" y1="11" x2="14" y2="17"></line>
    </svg>
);

// --- Main Application ---

export default function App() {
    // --- State Management ---
    const [dvds, setDvds] = useState([]); // Holds the list of all DVDs
    const [newDvdTitle, setNewDvdTitle] = useState(''); // Controlled input for the new DVD title
    const [isLoading, setIsLoading] = useState(true); // Loading state for initial data fetch
    const [error, setError] = useState(null); // To store any error messages

    // State for the checkout modal
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [currentDvd, setCurrentDvd] = useState(null); // The DVD being checked out
    const [borrowerName, setBorrowerName] = useState('');
    const [roomNumber, setRoomNumber] = useState('');

    // Firebase state
    const [db, setDb] = useState(null);
    const [dvdCollection, setDvdCollection] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);

    // --- Firebase Initialization ---
    useEffect(() => {
        try {
            // Your web app's Firebase configuration
            const firebaseConfig = {
              apiKey: "AIzaSyCOrodCVr5c3LpImHqjNhpOKjOBERKybZU",
              authDomain: "dvd-inventory.firebaseapp.com",
              projectId: "dvd-inventory",
              storageBucket: "dvd-inventory.appspot.com",
              messagingSenderId: "504734295247",
              appId: "1:504734295247:web:afe9032b97d0f98a4443ba",
              measurementId: "G-466YGTV3DD"
            };

            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const analytics = getAnalytics(app);
            const firestore = getFirestore(app);
            const authInstance = getAuth(app);
            
            setDb(firestore);
            setAuth(authInstance);
            setLogLevel('debug'); // Optional: for detailed logs

            // Use the project ID for the collection path to keep it unique
            const dvdsCollectionRef = collection(firestore, `artifacts/dvd-inventory/public/data/dvds`);
            setDvdCollection(dvdsCollectionRef);

        } catch (e) {
            console.error("Firebase initialization failed:", e);
            setError("Could not connect to the database. Please check the configuration.");
            setIsLoading(false);
        }
    }, []);

    // --- Authentication ---
    useEffect(() => {
        if (!auth) return;

        // Sign in the user anonymously. This creates a unique session for every user.
        signInAnonymously(auth).catch(error => {
            console.error("Anonymous authentication failed:", error);
            setError("Authentication failed. Some features might not work.");
        });

        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUserId(user.uid);
            } else {
                setUserId(null);
            }
        });

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


    // --- Data Fetching (Real-time) ---
    useEffect(() => {
        // Only try to fetch data if the collection reference is set and user is authenticated
        if (!dvdCollection || !userId) {
            setIsLoading(!userId); // If no user, we are still in a loading/auth state
            return;
        }

        setIsLoading(true);
        // onSnapshot listens for real-time updates to the collection
        const unsubscribe = onSnapshot(dvdCollection, (snapshot) => {
            const dvdsData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setDvds(dvdsData);
            setIsLoading(false);
        }, (err) => {
            console.error("Error fetching DVDs:", err);
            setError("Failed to fetch DVD inventory. Check Firestore rules.");
            setIsLoading(false);
        });

        // Cleanup function to unsubscribe from the listener when the component unmounts
        return () => unsubscribe();
    }, [dvdCollection, userId]);


    // --- Core Functions ---

    /**
     * Adds a new DVD to the Firestore collection.
     */
    const handleAddDvd = async (e) => {
        e.preventDefault();
        if (!newDvdTitle.trim() || !dvdCollection) return;

        try {
            await addDoc(dvdCollection, {
                title: newDvdTitle.trim(),
                isAvailable: true,
                checkedOutBy: null,
                roomNumber: null,
                checkoutDate: null,
            });
            setNewDvdTitle(''); // Clear input field on success
        } catch (err) {
            console.error("Error adding DVD:", err);
            setError("Failed to add new DVD.");
        }
    };

    /**
     * Deletes a DVD from the Firestore collection.
     */
    const handleDeleteDvd = async (dvdId) => {
        if (!db) return;
        try {
            const dvdDocRef = doc(db, dvdCollection.path, dvdId);
            await deleteDoc(dvdDocRef);
        } catch (err) {
            console.error("Error deleting DVD:", err);
            setError("Failed to delete DVD.");
        }
    };

    /**
     * Opens the checkout modal and sets the current DVD.
     */
    const openCheckoutModal = (dvd) => {
        setCurrentDvd(dvd);
        setBorrowerName('');
        setRoomNumber('');
        setIsModalOpen(true);
    };

    /**
     * Handles the submission of the checkout form.
     */
    const handleCheckoutSubmit = async (e) => {
        e.preventDefault();
        if (!borrowerName.trim() || !roomNumber.trim() || !currentDvd || !db) return;

        const today = new Date().toLocaleDateString();
        const dvdDocRef = doc(db, dvdCollection.path, currentDvd.id);

        try {
            await updateDoc(dvdDocRef, {
                isAvailable: false,
                checkedOutBy: borrowerName.trim(),
                roomNumber: roomNumber.trim(),
                checkoutDate: today,
            });
            setIsModalOpen(false); // Close modal on success
        } catch (err) {
            console.error("Error checking out DVD:", err);
            setError("Failed to check out DVD.");
        }
    };

    /**
     * Checks in a DVD, making it available again.
     */
    const handleCheckIn = async (dvdId) => {
        if (!db) return;
        const dvdDocRef = doc(db, dvdCollection.path, dvdId);
        try {
            await updateDoc(dvdDocRef, {
                isAvailable: true,
                checkedOutBy: null,
                roomNumber: null,
                checkoutDate: null,
            });
        } catch (err) {
            console.error("Error checking in DVD:", err);
            setError("Failed to check in DVD.");
        }
    };
    
     // --- Render UI ---
    return (
        <div className="bg-gray-900 text-white min-h-screen font-sans p-4 sm:p-6 lg:p-8">
            <div className="max-w-4xl mx-auto">
                <header className="text-center mb-8">
                    <h1 className="text-4xl sm:text-5xl font-bold text-cyan-400">DVD Inventory Tracker</h1>
                    <p className="text-gray-400 mt-2">Manage your DVD collection with ease.</p>
                     {userId && <p className="text-xs text-gray-500 mt-2">Session ID: {userId}</p>}
                </header>

                {error && <div className="bg-red-500/20 text-red-300 p-3 rounded-lg mb-6 text-center">{error}</div>}

                {/* Add New DVD Form */}
                <div className="bg-gray-800 p-6 rounded-xl shadow-lg mb-8">
                    <form onSubmit={handleAddDvd} className="flex flex-col sm:flex-row gap-4">
                        <input
                            type="text"
                            value={newDvdTitle}
                            onChange={(e) => setNewDvdTitle(e.target.value)}
                            placeholder="Enter new DVD title"
                            className="flex-grow bg-gray-700 text-white placeholder-gray-400 rounded-lg px-4 py-3 border-2 border-gray-600 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 transition-all"
                            required
                        />
                        <button type="submit" className="bg-cyan-500 hover:bg-cyan-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5">
                            Add DVD
                        </button>
                    </form>
                </div>

                {/* DVD List */}
                <div className="space-y-4">
                    {isLoading ? (
                        <p className="text-center text-gray-400">Loading inventory...</p>
                    ) : dvds.length === 0 && !error ? (
                         <div className="text-center py-10 px-4 bg-gray-800 rounded-xl">
                            <h3 className="text-xl font-semibold text-gray-300">Your inventory is empty!</h3>
                            <p className="text-gray-500 mt-2">Use the form above to add your first DVD.</p>
                        </div>
                    ) : (
                        dvds.map(dvd => (
                            <div key={dvd.id} className={`bg-gray-800 p-5 rounded-xl shadow-lg flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 transition-all border-l-4 ${dvd.isAvailable ? 'border-green-500' : 'border-yellow-500'}`}>
                                <div className="flex-grow">
                                    <h3 className="font-bold text-xl text-white">{dvd.title}</h3>
                                    {dvd.isAvailable ? (
                                        <span className="text-sm font-semibold text-green-400 bg-green-500/10 px-2 py-1 rounded-full inline-block mt-2">
                                            Available
                                        </span>
                                    ) : (
                                        <div className="text-sm text-gray-400 mt-2 space-y-1">
                                            <p><strong className="font-semibold text-yellow-400">Checked Out</strong></p>
                                            <p><strong>To:</strong> {dvd.checkedOutBy}</p>
                                            <p><strong>Room:</strong> {dvd.roomNumber}</p>
                                            <p><strong>Date:</strong> {dvd.checkoutDate}</p>
                                        </div>
                                    )}
                                </div>
                                <div className="flex items-center gap-3 flex-shrink-0 w-full sm:w-auto">
                                    {dvd.isAvailable ? (
                                        <button onClick={() => openCheckoutModal(dvd)} className="w-full sm:w-auto bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-2 px-4 rounded-lg transition-all">Check Out</button>
                                    ) : (
                                        <button onClick={() => handleCheckIn(dvd.id)} className="w-full sm:w-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition-all">Check In</button>
                                    )}
                                    <button onClick={() => handleDeleteDvd(dvd.id)} className="p-2 bg-red-500/20 hover:bg-red-500/40 text-red-400 hover:text-red-300 rounded-full transition-colors">
                                        <TrashIcon />
                                    </button>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </div>

            {/* Checkout Modal */}
            {isModalOpen && (
                <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50">
                    <div className="bg-gray-800 rounded-xl shadow-2xl p-8 w-full max-w-md">
                        <h2 className="text-2xl font-bold text-white mb-2">Check Out DVD</h2>
                        <p className="text-gray-300 mb-6">"{currentDvd?.title}"</p>
                        <form onSubmit={handleCheckoutSubmit}>
                            <div className="mb-4">
                                <label htmlFor="borrowerName" className="block text-gray-400 font-semibold mb-2">Borrower's Name</label>
                                <input
                                    id="borrowerName"
                                    type="text"
                                    value={borrowerName}
                                    onChange={(e) => setBorrowerName(e.target.value)}
                                    className="w-full bg-gray-700 text-white rounded-lg px-4 py-2 border-2 border-gray-600 focus:border-cyan-500 focus:outline-none"
                                    required
                                />
                            </div>
                            <div className="mb-6">
                                <label htmlFor="roomNumber" className="block text-gray-400 font-semibold mb-2">Room Number</label>
                                <input
                                    id="roomNumber"
                                    type="text"
                                    value={roomNumber}
                                    onChange={(e) => setRoomNumber(e.target.value)}
                                    className="w-full bg-gray-700 text-white rounded-lg px-4 py-2 border-2 border-gray-600 focus:border-cyan-500 focus:outline-none"
                                    required
                                />
                            </div>
                            <div className="flex justify-end gap-4">
                                <button type="button" onClick={() => setIsModalOpen(false)} className="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg transition-all">
                                    Cancel
                                </button>
                                <button type="submit" className="bg-cyan-500 hover:bg-cyan-600 text-gray-900 font-bold py-2 px-4 rounded-lg transition-all">
                                    Confirm Checkout
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}