const VenuesView = ({ selectedProperty }) => {
    const { useState, useEffect, useRef } = React;
    const [venues, setVenues] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (selectedProperty) {
            loadVenues();
        }
    }, [selectedProperty]);

    const loadVenues = async () => {
        if (!selectedProperty) {
            setLoading(false);
            return;
        }

        try {
            const res = await fetch(`/api/properties/${selectedProperty.property_code}/venues`);
            if (res.ok) {
                const data = await res.json();
                setVenues(data.venues || []);
            }
        } catch (error) {
            console.error('Failed to load venues:', error);
        } finally {
            setLoading(false);
        }
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-full">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
            </div>
        );
    }

    if (!selectedProperty) {
        return (
            <div className="flex items-center justify-center h-full bg-gray-50">
                <div className="text-center">
                    <div className="text-6xl mb-4">🏨</div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">Select a Property</h3>
                    <p className="text-gray-600">Choose a property from the dropdown to view venues</p>
                </div>
            </div>
        );
    }

    return (
        <div className="h-full overflow-y-auto bg-gray-50">
            <div className="max-w-7xl mx-auto p-8">
                <div className="mb-8">
                    <h1 className="text-3xl font-bold text-gray-900 mb-2">Venues</h1>
                    <p className="text-gray-600">{selectedProperty.name}</p>
                </div>

                {venues.length === 0 ? (
                    <div className="text-center py-12">
                        <div className="text-6xl mb-4">🏨</div>
                        <h3 className="text-xl font-semibold text-gray-900 mb-2">No venues found</h3>
                        <p className="text-gray-600">This property doesn't have any venues configured yet</p>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {venues.map((venue) => (
                            <div key={venue.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
                                <div className="flex items-start justify-between mb-4">
                                    <div>
                                        <h3 className="text-lg font-semibold text-gray-900">{venue.name}</h3>
                                        <span className="inline-block px-3 py-1 text-xs font-medium bg-primary text-white rounded-full mt-2">
                                            {venue.type}
                                        </span>
                                    </div>
                                </div>
                                {venue.restaurant_name && (
                                    <p className="text-sm text-gray-700 mb-2">
                                        <span className="font-medium">Restaurant:</span> {venue.restaurant_name}
                                    </p>
                                )}
                                {venue.description && (
                                    <p className="text-sm text-gray-600 mb-3">{venue.description}</p>
                                )}
                                {venue.location && (
                                    <p className="text-sm text-gray-700 flex items-center gap-2 mb-1">
                                        <span>📍</span> {venue.location}
                                    </p>
                                )}
                                {venue.capacity && (
                                    <p className="text-sm text-gray-700 flex items-center gap-2">
                                        <span>👥</span> Capacity: {venue.capacity}
                                    </p>
                                )}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

if (typeof window !== 'undefined') window.VenuesView = VenuesView;

// ═══════════════════════════════════════════════════════════════════════════
// ADMINISTRATION VIEW COMPONENT
// ═══════════════════════════════════════════════════════════════════════════