const VendorsView = ({ selectedProperty }) => {
    const { useState, useEffect, useRef } = React;
    const [vendors, setVendors] = useState([]);
    const [propertyVendors, setPropertyVendors] = useState([]);
    const [loading, setLoading] = useState(true);

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

    const loadVendors = async () => {
        try {
            const res = await fetch('/api/vendors');
            if (res.ok) {
                const data = await res.json();
                setVendors(data.vendors || []);
            }
        } catch (error) {
            console.error('Failed to load vendors:', error);
        } finally {
            setLoading(false);
        }
    };

    const loadPropertyVendors = async () => {
        if (!selectedProperty) return;

        try {
            const res = await fetch(`/api/properties/${selectedProperty.property_code}/vendors`);
            if (res.ok) {
                const data = await res.json();
                setPropertyVendors(data.property_vendors || []);
            }
        } catch (error) {
            console.error('Failed to load property vendors:', error);
        }
    };

    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>
        );
    }

    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">Vendors</h1>
                    <p className="text-gray-600">
                        {selectedProperty ? `Viewing vendors for ${selectedProperty.name}` : 'All vendors'}
                    </p>
                </div>

                {selectedProperty && propertyVendors.length > 0 && (
                    <div className="mb-8">
                        <h2 className="text-xl font-semibold text-gray-900 mb-4">Property Assigned Vendors</h2>
                        <div className="space-y-4">
                            {propertyVendors.map((pv, idx) => (
                                <div key={idx} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                                    <div className="flex items-start justify-between">
                                        <div className="flex-1">
                                            <h3 className="text-lg font-semibold text-gray-900">{pv.vendor_name}</h3>
                                            <p className="text-sm text-primary font-medium mt-1">{pv.service_name}</p>
                                            {pv.description && (
                                                <p className="text-sm text-gray-600 mt-2">{pv.description}</p>
                                            )}
                                        </div>
                                        {pv.updated_by && (
                                            <span className="text-xs text-gray-500">Updated by {pv.updated_by}</span>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

                <h2 className="text-xl font-semibold text-gray-900 mb-4">All Vendors</h2>
                {vendors.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 vendors found</h3>
                        <p className="text-gray-600">No vendors are currently configured</p>
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {vendors.map((vendor) => (
                            <div key={vendor.id} className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
                                <h3 className="text-lg font-semibold text-gray-900 mb-3">{vendor.name}</h3>
                                {vendor.contact_name && (
                                    <p className="text-sm text-gray-700 mb-1">
                                        <span className="font-medium">Contact:</span> {vendor.contact_name}
                                    </p>
                                )}
                                {vendor.contact_email && (
                                    <p className="text-sm text-gray-700 mb-1">
                                        <span className="font-medium">Email:</span> {vendor.contact_email}
                                    </p>
                                )}
                                {vendor.contact_phone && (
                                    <p className="text-sm text-gray-700 mb-1">
                                        <span className="font-medium">Phone:</span> {vendor.contact_phone}
                                    </p>
                                )}
                                {vendor.website && (
                                    <a
                                        href={vendor.website}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-1 px-3 py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 text-sm font-medium transition-colors mt-2"
                                    >
                                        Visit Website →
                                    </a>
                                )}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

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

// ═══════════════════════════════════════════════════════════════════════════
// VENUES VIEW COMPONENT
// ═══════════════════════════════════════════════════════════════════════════