import React, { useState, useEffect, useRef } from 'react';
import { Menu, X, Plus, Search, LogIn, LogOut, Settings, User, MapPin, List, Grid, ChevronDown, ChevronUp } from 'lucide-react';

// Main App Component
export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);
  const [activeTab, setActiveTab] = useState('map'); // 'map', 'admin'
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [locations, setLocations] = useState([]);
  const [filteredLocations, setFilteredLocations] = useState([]);
  const [selectedLocation, setSelectedLocation] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [viewMode, setViewMode] = useState('card'); // 'card' or 'list'
  const [loading, setLoading] = useState(true);
  const [mapCenter, setMapCenter] = useState([40.7128, -74.0060]); // NYC default
  const [mapZoom, setMapZoom] = useState(13);
  const [categories, setCategories] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [newLocation, setNewLocation] = useState(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    category: '',
    image: '',
    lat: '',
    lng: '',
  });
  const mapRef = useRef(null);

  // Fetch locations from API
  useEffect(() => {
    // Simulated API call
    setTimeout(() => {
      const dummyLocations = [
        {
          _id: '1',
          title: 'Central Park',
          description: 'A large urban park in Manhattan, New York City.',
          category: 'Parks',
          image: 'https://images.unsplash.com/photo-1534251369789-5067c8b8602a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
          coordinates: [40.7812, -73.9665],
          createdAt: '2023-01-15T12:00:00Z',
          rating: 4.8,
        },
        {
          _id: '2',
          title: 'Empire State Building',
          description: 'A 102-story Art Deco skyscraper in Midtown Manhattan.',
          category: 'Landmarks',
          image: 'https://images.unsplash.com/photo-1555109307-f7d9da25c244?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
          coordinates: [40.7484, -73.9857],
          createdAt: '2023-01-20T14:30:00Z',
          rating: 4.7,
        },
        {
          _id: '3',
          title: 'Brooklyn Bridge',
          description: 'A hybrid cable-stayed/suspension bridge spanning the East River.',
          category: 'Bridges',
          image: 'https://images.unsplash.com/photo-1581373449483-37449f962b6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
          coordinates: [40.7061, -73.9969],
          createdAt: '2023-01-25T09:15:00Z',
          rating: 4.6,
        },
        {
          _id: '4',
          title: 'Times Square',
          description: 'A major commercial intersection and tourist destination.',
          category: 'Entertainment',
          image: 'https://images.unsplash.com/photo-1534430480872-3b5e7416a3a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
          coordinates: [40.7580, -73.9855],
          createdAt: '2023-02-01T18:45:00Z',
          rating: 4.5,
        },
        {
          _id: '5',
          title: 'The High Line',
          description: 'A 1.45-mile-long elevated linear park built on a former railroad spur.',
          category: 'Parks',
          image: 'https://images.unsplash.com/photo-1587965596700-3875ef9757e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
          coordinates: [40.7480, -74.0048],
          createdAt: '2023-02-05T11:20:00Z',
          rating: 4.9,
        },
      ];
      
      const uniqueCategories = [...new Set(dummyLocations.map(loc => loc.category))];
      setCategories(uniqueCategories);
      setLocations(dummyLocations);
      setFilteredLocations(dummyLocations);
      setLoading(false);
      
      // Initialize map after data is loaded
      initMap();
    }, 1000);
  }, []);
  
  // Initialize map using vanilla Leaflet instead of react-leaflet
  const initMap = () => {
    // Skip if not in map view or map already initialized
    if (activeTab !== 'map' || !document.getElementById('map')) return;
    
    // Clean up previous map instance if it exists
    if (mapRef.current) {
      mapRef.current.remove();
    }
    
    // Import Leaflet dynamically to avoid SSR issues
    import('https://cdn.jsdelivr.net/npm/leaflet@1.9.4/+esm').then((L) => {
      // Create map
      const map = L.map('map').setView(mapCenter, mapZoom);
      mapRef.current = map;
      
      // Add tile layer
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      // Create custom icon
      const customIcon = L.icon({
        iconUrl: 'https://cdn.mapmarker.io/api/v1/pin?size=50&background=%2348A9A6&icon=fa-map-marker&color=%23FFFFFF',
        iconSize: [30, 30],
        iconAnchor: [15, 30],
        popupAnchor: [0, -30],
      });
      
      // Add markers for locations
      filteredLocations.forEach(location => {
        const marker = L.marker(location.coordinates, { icon: customIcon }).addTo(map);
        
        marker.bindPopup(`
          <div style="width: 200px;">
            <h3 style="font-weight: 600; color: #2A6B8F;">${location.title}</h3>
            <p style="font-size: 0.75rem; color: #666; margin-top: 0.25rem;">${location.description.substring(0, 50)}...</p>
            <span style="display: inline-block; padding: 0.25rem 0.5rem; background-color: #E4FDE1; color: #114B5F; font-size: 0.75rem; border-radius: 0.25rem; margin-top: 0.5rem;">
              ${location.category}
            </span>
          </div>
        `);
        
        marker.on('click', () => {
          setSelectedLocation(location);
        });
      });
      
      // Add click handler for admin mode
      if (isAdmin && activeTab === 'admin') {
        map.on('click', (e) => {
          const { lat, lng } = e.latlng;
          
          // Remove previous new location marker if exists
          if (newLocation) {
            map.eachLayer((layer) => {
              if (layer._latlng && 
                  layer._latlng.lat === newLocation[0] && 
                  layer._latlng.lng === newLocation[1]) {
                map.removeLayer(layer);
              }
            });
          }
          
          // Add new marker
          const newMarker = L.marker([lat, lng]).addTo(map);
          newMarker.bindPopup(`
            <div style="width: 200px;">
              <h3 style="font-weight: 600;">New Location</h3>
              <p style="font-size: 0.75rem; color: #666;">
                Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}
              </p>
            </div>
          `).openPopup();
          
          setNewLocation([lat, lng]);
          setFormData({
            ...formData,
            lat: lat.toFixed(6),
            lng: lng.toFixed(6),
          });
          setShowAddForm(true);
        });
      }
      
      // Update map when selected location changes
      if (selectedLocation) {
        map.setView(selectedLocation.coordinates, 15);
      }
    });
  };
  
  // Re-initialize map when filtered locations change
  useEffect(() => {
    if (activeTab === 'map') {
      initMap();
    }
  }, [filteredLocations, activeTab, isAdmin]);
  
  // Clean up map on unmount
  useEffect(() => {
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
      }
    };
  }, []);

  // Filter locations based on search and category
  useEffect(() => {
    let filtered = [...locations];
    
    if (searchQuery) {
      filtered = filtered.filter(loc => 
        loc.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
        loc.description.toLowerCase().includes(searchQuery.toLowerCase())
      );
    }
    
    if (selectedCategory !== 'all') {
      filtered = filtered.filter(loc => loc.category === selectedCategory);
    }
    
    setFilteredLocations(filtered);
  }, [searchQuery, selectedCategory, locations]);

  // Handle login
  const handleLogin = () => {
    setIsLoggedIn(true);
    setIsAdmin(true); // For demo purposes
  };

  // Handle logout
  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsAdmin(false);
    setActiveTab('map');
  };

  // Handle form input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Create new location
    const newLoc = {
      _id: Date.now().toString(),
      title: formData.title,
      description: formData.description,
      category: formData.category || 'Uncategorized',
      image: formData.image || 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
      coordinates: [parseFloat(formData.lat), parseFloat(formData.lng)],
      createdAt: new Date().toISOString(),
      rating: 4.0,
    };
    
    // Add to locations
    setLocations([...locations, newLoc]);
    
    // Reset form
    setFormData({
      title: '',
      description: '',
      category: '',
      image: '',
      lat: '',
      lng: '',
    });
    
    setShowAddForm(false);
    setNewLocation(null);
  };

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <h1 className="text-2xl font-bold text-[#2A6B8F]">GeoExplorer</h1>
              </div>
            </div>
            
            <div className="hidden md:block">
              <div className="ml-4 flex items-center md:ml-6">
                {isLoggedIn ? (
                  <div className="flex items-center space-x-4">
                    {isAdmin && (
                      <button 
                        onClick={() => setActiveTab(activeTab === 'map' ? 'admin' : 'map')}
                        className={`px-3 py-2 rounded-md text-sm font-medium ${
                          activeTab === 'admin' 
                            ? 'bg-[#48A9A6] text-white' 
                            : 'text-gray-700 hover:bg-gray-100'
                        }`}
                      >
                        {activeTab === 'map' ? 'Admin Dashboard' : 'View Map'}
                      </button>
                    )}
                    <button 
                      onClick={handleLogout}
                      className="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"
                    >
                      <LogOut className="h-4 w-4 mr-1" />
                      Logout
                    </button>
                    <div className="h-8 w-8 rounded-full bg-[#114B5F] flex items-center justify-center text-white">
                      <User className="h-4 w-4" />
                    </div>
                  </div>
                ) : (
                  <button 
                    onClick={handleLogin}
                    className="flex items-center px-3 py-2 rounded-md text-sm font-medium bg-[#2A6B8F] text-white hover:bg-[#114B5F]"
                  >
                    <LogIn className="h-4 w-4 mr-1" />
                    Login
                  </button>
                )}
              </div>
            </div>
            
            <div className="flex md:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white shadow-lg rounded-b-lg">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {isLoggedIn && isAdmin && (
                <button 
                  onClick={() => {
                    setActiveTab(activeTab === 'map' ? 'admin' : 'map');
                    setMobileMenuOpen(false);
                  }}
                  className={`block px-3 py-2 rounded-md text-base font-medium w-full text-left ${
                    activeTab === 'admin' 
                      ? 'bg-[#48A9A6] text-white' 
                      : 'text-gray-700 hover:bg-gray-100'
                  }`}
                >
                  {activeTab === 'map' ? 'Admin Dashboard' : 'View Map'}
                </button>
              )}
              {isLoggedIn ? (
                <button 
                  onClick={() => {
                    handleLogout();
                    setMobileMenuOpen(false);
                  }}
                  className="flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 w-full"
                >
                  <LogOut className="h-4 w-4 mr-2" />
                  Logout
                </button>
              ) : (
                <button 
                  onClick={() => {
                    handleLogin();
                    setMobileMenuOpen(false);
                  }}
                  className="flex items-center px-3 py-2 rounded-md text-base font-medium bg-[#2A6B8F] text-white hover:bg-[#114B5F] w-full"
                >
                  <LogIn className="h-4 w-4 mr-2" />
                  Login
                </button>
              )}
            </div>
          </div>
        )}
      </header>

      {/* Main content */}
      <main className="flex-1 flex flex-col md:flex-row overflow-hidden">
        {activeTab === 'map' ? (
          <>
            {/* Map section */}
            <div className="flex-1 h-[50vh] md:h-auto relative">
              {/* Map container */}
              <div id="map" style={{ height: '100%', width: '100%' }}></div>
              
              {/* Add Leaflet CSS */}
              <link 
                rel="stylesheet" 
                href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
                integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
                crossOrigin=""
              />
              
              {/* Map controls */}
              <div className="absolute top-4 right-4 z-[1000] flex flex-col space-y-2">
                <button 
                  className="bg-white p-2 rounded-full shadow-md hover:bg-gray-100"
                  onClick={() => setSidebarOpen(!sidebarOpen)}
                >
                  {sidebarOpen ? <ChevronDown className="h-5 w-5" /> : <ChevronUp className="h-5 w-5" />}
                </button>
              </div>
            </div>
            
            {/* Sidebar */}
            <div 
              className={`bg-white w-full md:w-96 shadow-lg transition-all duration-300 ease-in-out ${
                sidebarOpen ? 'h-[50vh] md:h-auto' : 'h-12'
              } flex flex-col`}
            >
              {/* Sidebar header */}
              <div className="p-4 border-b flex items-center justify-between">
                <h2 className="font-semibold text-lg text-[#114B5F]">Locations</h2>
                <div className="flex items-center space-x-2">
                  <button 
                    onClick={() => setViewMode('card')}
                    className={`p-1 rounded ${viewMode === 'card' ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
                  >
                    <Grid className="h-4 w-4" />
                  </button>
                  <button 
                    onClick={() => setViewMode('list')}
                    className={`p-1 rounded ${viewMode === 'list' ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
                  >
                    <List className="h-4 w-4" />
                  </button>
                </div>
              </div>
              
              {sidebarOpen && (
                <>
                  {/* Search and filters */}
                  <div className="p-4 border-b">
                    <div className="relative">
                      <input
                        type="text"
                        placeholder="Search locations..."
                        className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#48A9A6]"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                      />
                      <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
                    </div>
                    
                    <div className="mt-3">
                      <label className="text-sm font-medium text-gray-700">Category</label>
                      <select
                        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[#48A9A6] focus:border-[#48A9A6] sm:text-sm rounded-md"
                        value={selectedCategory}
                        onChange={(e) => setSelectedCategory(e.target.value)}
                      >
                        <option value="all">All Categories</option>
                        {categories.map(category => (
                          <option key={category} value={category}>{category}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  
                  {/* Locations list */}
                  <div className="flex-1 overflow-y-auto p-4">
                    {loading ? (
                      <div className="flex justify-center items-center h-full">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#48A9A6]"></div>
                      </div>
                    ) : filteredLocations.length === 0 ? (
                      <div className="text-center py-8 text-gray-500">
                        No locations found matching your criteria.
                      </div>
                    ) : (
                      <div className={viewMode === 'card' ? 'grid grid-cols-1 gap-4' : 'space-y-3'}>
                        {filteredLocations.map(location => (
                          <div 
                            key={location._id}
                            className={`bg-white rounded-lg overflow-hidden cursor-pointer transition-all hover:shadow-md ${
                              viewMode === 'card' 
                                ? 'border shadow-sm' 
                                : 'border-b pb-3'
                            } ${selectedLocation?._id === location._id ? 'ring-2 ring-[#48A9A6]' : ''}`}
                            onClick={() => {
                              setSelectedLocation(location);
                              if (mapRef.current) {
                                mapRef.current.setView(location.coordinates, 15);
                              }
                            }}
                          >
                            {viewMode === 'card' && (
                              <div className="h-32 overflow-hidden">
                                <img 
                                  src={location.image} 
                                  alt={location.title}
                                  className="w-full h-full object-cover"
                                />
                              </div>
                            )}
                            
                            <div className="p-3">
                              <div className="flex justify-between items-start">
                                <h3 className="font-semibold text-[#2A6B8F]">{location.title}</h3>
                                {viewMode === 'list' && (
                                  <span className="inline-block px-2 py-1 bg-[#E4FDE1] text-[#114B5F] text-xs rounded">
                                    {location.category}
                                  </span>
                                )}
                              </div>
                              
                              {viewMode === 'card' && (
                                <span className="inline-block px-2 py-1 bg-[#E4FDE1] text-[#114B5F] text-xs rounded mt-1">
                                  {location.category}
                                </span>
                              )}
                              
                              <p className="text-sm text-gray-600 mt-1 line-clamp-2">
                                {location.description}
                              </p>
                              
                              <div className="flex items-center justify-between mt-2 text-xs text-gray-500">
                                <div className="flex items-center">
                                  <MapPin className="h-3 w-3 mr-1" />
                                  <span>{location.coordinates[0].toFixed(2)}, {location.coordinates[1].toFixed(2)}</span>
                                </div>
                                <div className="flex items-center">
                                  <span>★ {location.rating}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </>
              )}
            </div>
          </>
        ) : (
          /* Admin Dashboard */
          <div className="flex-1 overflow-auto p-6">
            <div className="max-w-7xl mx-auto">
              <div className="bg-white shadow-sm rounded-lg p-6">
                <h2 className="text-xl font-semibold text-[#114B5F] mb-6">Location Management</h2>
                
                {showAddForm ? (
                  <div className="bg-gray-50 p-4 rounded-lg mb-6">
                    <h3 className="font-medium text-[#2A6B8F] mb-4">Add New Location</h3>
                    <form onSubmit={handleSubmit}>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
                          <input
                            type="text"
                            name="title"
                            value={formData.title}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                            required
                          />
                        </div>
                        
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
                          <select
                            name="category"
                            value={formData.category}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                          >
                            <option value="">Select a category</option>
                            {categories.map(category => (
                              <option key={category} value={category}>{category}</option>
                            ))}
                            <option value="new">+ Add new category</option>
                          </select>
                        </div>
                        
                        <div className="md:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                          <textarea
                            name="description"
                            value={formData.description}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                            rows="3"
                            required
                          ></textarea>
                        </div>
                        
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Latitude</label>
                          <input
                            type="text"
                            name="lat"
                            value={formData.lat}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                            required
                          />
                        </div>
                        
                        <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Longitude</label>
                          <input
                            type="text"
                            name="lng"
                            value={formData.lng}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                            required
                          />
                        </div>
                        
                        <div className="md:col-span-2">
                          <label className="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
                          <input
                            type="text"
                            name="image"
                            value={formData.image}
                            onChange={handleInputChange}
                            placeholder="https://example.com/image.jpg"
                            className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-[#48A9A6]"
                          />
                        </div>
                      </div>
                      
                      <div className="mt-4 flex justify-end space-x-3">
                        <button
                          type="button"
                          onClick={() => {
                            setShowAddForm(false);
                            setNewLocation(null);
                          }}
                          className="px-4 py-2 border rounded-md text-gray-700 hover:bg-gray-50"
                        >
                          Cancel
                        </button>
                        <button
                          type="submit"
                          className="px-4 py-2 bg-[#48A9A6] text-white rounded-md hover:bg-[#2A6B8F]"
                        >
                          Save Location
                        </button>
                      </div>
                    </form>
                  </div>
                ) : (
                  <div className="mb-6">
                    <p className="text-gray-600 mb-4">
                      Click on the map to add a new location, or use the button below to enter coordinates manually.
                    </p>
                    <button
                      onClick={() => setShowAddForm(true)}
                      className="flex items-center px-4 py-2 bg-[#48A9A6] text-white rounded-md hover:bg-[#2A6B8F]"
                    >
                      <Plus className="h-4 w-4 mr-2" />
                      Add New Location
                    </button>
                  </div>
                )}
                
                <div>
                  <h3 className="font-medium text-[#2A6B8F] mb-4">Existing Locations</h3>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Coordinates</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rating</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {locations.map(location => (
                          <tr key={location._id} className="hover:bg-gray-50">
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">{location.title}</div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <span className="px-2 py-1 text-xs rounded-full bg-[#E4FDE1] text-[#114B5F]">
                                {location.category}
                              </span>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {location.coordinates[0].toFixed(4)}, {location.coordinates[1].toFixed(4)}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {location.rating}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <button className="text-[#2A6B8F] hover:text-[#114B5F] mr-3">Edit</button>
                              <button className="text-red-600 hover:text-red-800">Delete</button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}