import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, getDoc, addDoc, setDoc, updateDoc, deleteDoc, onSnapshot, collection, query, where, addDoc, getDocs } from 'firebase/firestore';

// Main App component for the lemonade stand web page.
export default function App() {
  const [db, setDb] = useState(null);
  const [userId, setUserId] = useState(null);
  const [isAuthReady, setIsAuthReady] = useState(false);
  const [orders, setOrders] = useState([]);
  const [isAdmin, setIsAdmin] = useState(false);
  const [password, setPassword] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [editingOrder, setEditingOrder] = useState(null);
  const [newOrder, setNewOrder] = useState({
    name: '',
    address: '',
    lemonSoda: 1,
    status: 'Pending',
    createdAt: null,
  });

  // Unique ID for the app, provided by the environment.
  const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

  // State to hold the admin password. In a real-world app, this would be more secure.
  const ADMIN_PASSWORD = 'lemonade';

  // useEffect to handle Firebase initialization and authentication.
  useEffect(() => {
    // Check for the required global variables.
    if (typeof __firebase_config !== 'undefined' && typeof __initial_auth_token !== 'undefined') {
      try {
        const firebaseConfig = JSON.parse(__firebase_config);
        const app = initializeApp(firebaseConfig);
        const firestoreDb = getFirestore(app);
        const auth = getAuth(app);
        setDb(firestoreDb);

        // Sign in with the custom token or anonymously.
        if (__initial_auth_token) {
          signInWithCustomToken(auth, __initial_auth_token)
            .then(() => {
              // Listen for auth state changes to get the user ID.
              onAuthStateChanged(auth, (user) => {
                if (user) {
                  setUserId(user.uid);
                } else {
                  // If auth fails, sign in anonymously as a fallback.
                  signInAnonymously(auth).then(() => {
                    setUserId(auth.currentUser.uid);
                  });
                }
                setIsAuthReady(true);
              });
            })
            .catch(() => {
              // Handle custom token sign-in failure.
              signInAnonymously(auth).then(() => {
                setUserId(auth.currentUser.uid);
                setIsAuthReady(true);
              });
            });
        } else {
          // No token provided, sign in anonymously.
          signInAnonymously(auth).then(() => {
            setUserId(auth.currentUser.uid);
            setIsAuthReady(true);
          });
        }
      } catch (e) {
        console.error("Firebase initialization failed:", e);
      }
    } else {
      console.error("Firebase config or auth token is missing.");
    }
  }, []);

  // useEffect to subscribe to real-time order updates from Firestore.
  useEffect(() => {
    if (!db || !isAuthReady) return;

    // Listen to changes in the 'orders' collection.
    const q = collection(db, `/artifacts/${appId}/public/data/orders`);
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const ordersData = [];
      querySnapshot.forEach((doc) => {
        ordersData.push({ id: doc.id, ...doc.data() });
      });
      // Sort orders by creation date (newest first).
      ordersData.sort((a, b) => b.createdAt.toDate() - a.createdAt.toDate());
      setOrders(ordersData);
    }, (error) => {
      console.error("Error fetching orders:", error);
    });

    // Clean up the listener on component unmount.
    return () => unsubscribe();
  }, [db, isAuthReady, appId]);

  // Handler for password submission to access the admin view.
  const handlePasswordSubmit = (e) => {
    e.preventDefault();
    if (password === ADMIN_PASSWORD) {
      setIsAdmin(true);
    } else {
      alert('Incorrect password. Please try again.');
    }
  };

  // Handler for consumer form submission.
  const handleAddOrder = async (e) => {
    e.preventDefault();
    if (!db || !newOrder.name || !newOrder.address) {
      alert('Please fill out all fields.');
      return;
    }

    try {
      // Add a new order document to Firestore.
      await addDoc(collection(db, `/artifacts/${appId}/public/data/orders`), {
        ...newOrder,
        createdAt: new Date(),
        // To make the data extensible
        items: [{
          name: 'Lemon Soda',
          quantity: newOrder.lemonSoda
        }]
      });

      // Clear the form after a successful submission.
      setNewOrder({ name: '', address: '', lemonSoda: 1 });
      alert('Order placed successfully!');
    } catch (e) {
      console.error('Error adding document: ', e);
      alert('There was an error placing your order. Please try again.');
    }
  };

  // Handler to delete an order from Firestore.
  const handleDeleteOrder = async (orderId) => {
    if (confirm('Are you sure you want to delete this order?')) {
      try {
        await deleteDoc(doc(db, `/artifacts/${appId}/public/data/orders`, orderId));
      } catch (e) {
        console.error('Error deleting document: ', e);
      }
    }
  };

  // Handler to mark an order as completed.
  const handleMarkAsCompleted = async (orderId, status) => {
    const newStatus = status === 'Completed' ? 'Pending' : 'Completed';
    try {
      await updateDoc(doc(db, `/artifacts/${appId}/public/data/orders`, orderId), {
        status: newStatus,
      });
    } catch (e) {
      console.error('Error updating document: ', e);
    }
  };

  // Handler for editing an order.
  const handleEditOrder = (order) => {
    setEditingOrder(order);
    setIsEditing(true);
    setNewOrder({ ...order, lemonSoda: order.items[0].quantity });
  };

  // Handler for updating an edited order.
  const handleUpdateOrder = async (e) => {
    e.preventDefault();
    if (!db || !newOrder.name || !newOrder.address) {
      alert('Please fill out all fields.');
      return;
    }
    
    try {
      await updateDoc(doc(db, `/artifacts/${appId}/public/data/orders`, editingOrder.id), {
        name: newOrder.name,
        address: newOrder.address,
        items: [{ name: 'Lemon Soda', quantity: newOrder.lemonSoda }],
      });
      setIsEditing(false);
      setEditingOrder(null);
      setNewOrder({ name: '', address: '', lemonSoda: 1 });
      alert('Order updated successfully!');
    } catch (e) {
      console.error('Error updating document: ', e);
      alert('There was an error updating the order. Please try again.');
    }
  };

  // Function to create a custom modal/dialog box instead of `confirm()` or `alert()`.
  const confirm = (message) => {
    const result = window.confirm(message); // Using window.confirm() for simplicity since it is a quick app.
    return result;
  };
  
  // Base CSS classes for shared styles.
  const baseClasses = {
    card: 'bg-white rounded-xl shadow-lg p-6 m-4 ring-1 ring-gray-200',
    button: 'bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300',
    input: 'w-full p-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500',
    header: 'text-2xl font-bold text-gray-800 text-center mb-6',
    table: 'w-full text-left table-auto border-collapse',
    th: 'py-2 px-4 bg-gray-100 font-bold uppercase text-sm text-gray-600',
    td: 'py-3 px-4 border-b border-gray-200',
    buttonGroup: 'flex flex-wrap gap-2 justify-center mt-4'
  };

  // Render the Admin view.
  const renderAdminView = () => (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className={`${baseClasses.card} max-w-4xl mx-auto`}>
        <h1 className={baseClasses.header}>Admin Dashboard</h1>
        
        <button onClick={() => setIsAdmin(false)} className={`${baseClasses.button} mb-4`}>
          ← Go to Customer View
        </button>

        {isEditing && (
          <div className={`${baseClasses.card} mb-6 border-2 border-yellow-500`}>
            <h2 className="text-xl font-bold mb-4">Edit Order</h2>
            <form onSubmit={handleUpdateOrder}>
              <input
                type="text"
                placeholder="Name"
                value={newOrder.name}
                onChange={(e) => setNewOrder({ ...newOrder, name: e.target.value })}
                className={baseClasses.input}
              />
              <input
                type="text"
                placeholder="Address"
                value={newOrder.address}
                onChange={(e) => setNewOrder({ ...newOrder, address: e.target.value })}
                className={baseClasses.input}
              />
              <label className="block text-gray-700 font-semibold mb-2">
                Number of Lemon Sodas:
                <input
                  type="number"
                  min="1"
                  value={newOrder.lemonSoda}
                  onChange={(e) => setNewOrder({ ...newOrder, lemonSoda: parseInt(e.target.value, 10) })}
                  className={baseClasses.input}
                />
              </label>
              <div className="flex justify-end gap-2">
                <button type="submit" className={baseClasses.button}>
                  Update Order
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setIsEditing(false);
                    setEditingOrder(null);
                    setNewOrder({ name: '', address: '', lemonSoda: 1 });
                  }}
                  className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full"
                >
                  Cancel
                </button>
              </div>
            </form>
          </div>
        )}

        {orders.length === 0 ? (
          <p className="text-center text-gray-500">No orders yet.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className={baseClasses.table}>
              <thead>
                <tr>
                  <th className={baseClasses.th}>Name</th>
                  <th className={baseClasses.th}>Address</th>
                  <th className={baseClasses.th}>Items</th>
                  <th className={baseClasses.th}>Status</th>
                  <th className={baseClasses.th}>Actions</th>
                </tr>
              </thead>
              <tbody>
                {orders.map((order) => (
                  <tr key={order.id} className={order.status === 'Completed' ? 'bg-green-100' : 'bg-yellow-50'}>
                    <td className={baseClasses.td}>{order.name}</td>
                    <td className={baseClasses.td}>{order.address}</td>
                    <td className={baseClasses.td}>
                      {order.items.map((item, index) => (
                        <div key={index}>{item.quantity} x {item.name}</div>
                      ))}
                    </td>
                    <td className={baseClasses.td}>
                      <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
                        order.status === 'Completed' ? 'bg-green-500 text-white' : 'bg-yellow-500 text-white'
                      }`}>
                        {order.status}
                      </span>
                    </td>
                    <td className={`${baseClasses.td} whitespace-nowrap`}>
                      <div className="flex items-center space-x-2">
                        <button
                          onClick={() => handleMarkAsCompleted(order.id, order.status)}
                          className={`text-sm py-1 px-3 rounded-full ${
                            order.status === 'Completed' ? 'bg-gray-400 hover:bg-gray-500' : 'bg-green-500 hover:bg-green-600'
                          } text-white`}
                        >
                          {order.status === 'Completed' ? 'Mark Pending' : 'Mark Completed'}
                        </button>
                        <button
                          onClick={() => handleEditOrder(order)}
                          className="bg-blue-500 hover:bg-blue-600 text-white text-sm py-1 px-3 rounded-full"
                        >
                          Edit
                        </button>
                        <button
                          onClick={() => handleDeleteOrder(order.id)}
                          className="bg-red-500 hover:bg-red-600 text-white text-sm py-1 px-3 rounded-full"
                        >
                          Delete
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );

  // Render the Customer view.
  const renderCustomerView = () => (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className={`${baseClasses.card} max-w-md w-full`}>
        <h1 className={baseClasses.header}>Lemonade Stand</h1>
        
        {/* Admin Login Form */}
        <form onSubmit={handlePasswordSubmit} className="mb-8">
          <input
            type="password"
            placeholder="Admin Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className={`${baseClasses.input} mb-2`}
          />
          <button type="submit" className={`${baseClasses.button} w-full`}>
            Access Admin View
          </button>
        </form>

        {/* Customer Order Form */}
        <h2 className="text-xl font-bold text-center text-gray-700 mb-4">Place Your Order</h2>
        <form onSubmit={handleAddOrder}>
          <input
            type="text"
            placeholder="Your Name"
            value={newOrder.name}
            onChange={(e) => setNewOrder({ ...newOrder, name: e.target.value })}
            className={baseClasses.input}
          />
          <input
            type="text"
            placeholder="Your Address"
            value={newOrder.address}
            onChange={(e) => setNewOrder({ ...newOrder, address: e.target.value })}
            className={baseClasses.input}
          />
          <div className="mb-4">
            <label className="block text-gray-700 font-semibold mb-2">
              Number of Lemon Sodas:
            </label>
            <input
              type="number"
              min="1"
              value={newOrder.lemonSoda}
              onChange={(e) => setNewOrder({ ...newOrder, lemonSoda: parseInt(e.target.value, 10) })}
              className={baseClasses.input}
            />
          </div>
          <button type="submit" className={`${baseClasses.button} w-full`}>
            Place Order
          </button>
        </form>
      </div>
    </div>
  );

  return (
    <div className="font-sans antialiased text-gray-900 bg-gray-50">
      {isAdmin ? renderAdminView() : renderCustomerView()}
    </div>
  );
}