const { useState, useEffect } = React;

function StatusBadge({ status }) {
    const getStatusColor = (status) => {
        switch (status?.toLowerCase()) {
            case 'healthy':
            case 'running':
                return 'success';
            case 'degraded':
            case 'warning':
                return 'warning';
            case 'unhealthy':
            case 'stopped':
            case 'error':
                return 'danger';
            case 'unknown':
            case 'notfound':
                return 'secondary';
            default:
                return 'info';
        }
    };

    const getStatusIcon = (status) => {
        switch (status?.toLowerCase()) {
            case 'healthy':
            case 'running':
                return '✓';
            case 'degraded':
            case 'warning':
                return '⚠';
            case 'unhealthy':
            case 'stopped':
            case 'error':
                return '✗';
            default:
                return '?';
        }
    };

    return (
        <span className={`badge bg-${getStatusColor(status)} fs-6`}>
            {getStatusIcon(status)} {status}
        </span>
    );
}

function ResourceCard({ resource }) {
    return (
        <div className="col-md-6 mb-4">
            <div className="card h-100 shadow-sm">
                <div className="card-header d-flex justify-content-between align-items-center">
                    <h5 className="mb-0">{resource.displayName || resource.name}</h5>
                    <StatusBadge status={resource.status} />
                </div>
                <div className="card-body">
                    <dl className="row mb-0">
                        <dt className="col-sm-4">Description</dt>
                        <dd className="col-sm-8">{resource.statusDescription}</dd>

                        {resource.availabilityState && (
                            <>
                                <dt className="col-sm-4">Availability</dt>
                                <dd className="col-sm-8">
                                    <span className={`badge bg-${resource.availabilityState === 'Normal' ? 'success' : 'warning'}`}>
                                        {resource.availabilityState}
                                    </span>
                                </dd>
                            </>
                        )}

                        {resource.usageState && (
                            <>
                                <dt className="col-sm-4">Usage</dt>
                                <dd className="col-sm-8">
                                    <span className={`badge bg-${resource.usageState === 'Normal' ? 'success' : 'danger'}`}>
                                        {resource.usageState}
                                    </span>
                                </dd>
                            </>
                        )}

                        <dt className="col-sm-4">Last Checked</dt>
                        <dd className="col-sm-8">
                            {new Date(resource.lastChecked).toLocaleString()}
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    );
}

function ResourceStatusApp() {
    const [resources, setResources] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [lastRefresh, setLastRefresh] = useState(null);

    const fetchStatuses = async () => {
        setLoading(true);
        setError(null);
        
        try {
            const response = await fetch('/api/resourcestatus');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            setResources(data);
            setLastRefresh(new Date());
        } catch (err) {
            setError(err.message);
            console.error('Error fetching resource statuses:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchStatuses();
        
        // Auto-refresh every 60 seconds
        const interval = setInterval(fetchStatuses, 60000);
        return () => clearInterval(interval);
    }, []);

    const getOverallHealth = () => {
        if (resources.length === 0) return 'Unknown';
        const healthyCount = resources.filter(r => 
            r.status?.toLowerCase() === 'healthy' || r.status?.toLowerCase() === 'running'
        ).length;
        
        if (healthyCount === resources.length) return 'All Systems Operational';
        if (healthyCount > 0) return 'Partial Outage';
        return 'Major Outage';
    };

    const getOverallHealthColor = () => {
        const health = getOverallHealth();
        if (health === 'All Systems Operational') return 'success';
        if (health === 'Partial Outage') return 'warning';
        if (health === 'Major Outage') return 'danger';
        return 'secondary';
    };

    const getResourcesByRegion = () => {
        const grouped = {};
        resources.forEach(resource => {
            const region = resource.region || 'Unknown Region';
            if (!grouped[region]) {
                grouped[region] = [];
            }
            grouped[region].push(resource);
        });
        return grouped;
    };

    const getRegionHealth = (regionResources) => {
        if (regionResources.length === 0) return { status: 'Unknown', color: 'secondary' };
        const healthyCount = regionResources.filter(r => 
            r.status?.toLowerCase() === 'healthy' || r.status?.toLowerCase() === 'running'
        ).length;

        if (healthyCount === regionResources.length) {
            return { status: 'Operational', color: 'success' };
        }
        if (healthyCount > 0) {
            return { status: 'Partial Outage', color: 'warning' };
        }
        return { status: 'Major Outage', color: 'danger' };
    };

    return (
        <div className="container-fluid">
            <div className="row mb-4">
                <div className="col-12">
                    <div className={`alert alert-${getOverallHealthColor()} d-flex justify-content-between align-items-center`}>
                        <div>
                            <h4 className="mb-0">
                                <i className="me-2">🌐</i>
                                {getOverallHealth()}
                            </h4>
                        </div>
                        <div className="d-flex align-items-center gap-3">
                            {lastRefresh && (
                                <small>Last updated: {lastRefresh.toLocaleTimeString()}</small>
                            )}
                            <button 
                                className="btn btn-outline-dark btn-sm"
                                onClick={fetchStatuses}
                                disabled={loading}
                            >
                                {loading ? '↻ Refreshing...' : '↻ Refresh'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {error && (
                <div className="alert alert-danger" role="alert">
                    <strong>Error:</strong> {error}
                </div>
            )}

            {loading && resources.length === 0 ? (
                <div className="text-center py-5">
                    <div className="spinner-border text-primary" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                    <p className="mt-3">Loading resource statuses...</p>
                </div>
            ) : (
                Object.entries(getResourcesByRegion()).map(([region, regionResources]) => {
                    const regionHealth = getRegionHealth(regionResources);
                    return (
                        <div key={region} className="mb-4">
                            <div className="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
                                <h4 className="mb-0">
                                    <span className="me-2">📍</span>{region}
                                </h4>
                                <span className={`badge bg-${regionHealth.color} fs-6`}>
                                    {regionHealth.status}
                                </span>
                            </div>
                            <div className="row">
                                {regionResources.map((resource, index) => (
                                    <ResourceCard key={index} resource={resource} />
                                ))}
                            </div>
                        </div>
                    );
                })
            )}

            {!loading && resources.length === 0 && !error && (
                <div className="alert alert-info" role="alert">
                    No resources configured for monitoring.
                </div>
            )}
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('resource-status-root'));
root.render(<ResourceStatusApp />);