import React, { useState, useEffect, useCallback } from 'react' import { AlertCircle, CheckCircle, Clock, RefreshCw } from 'lucide-react' interface StatusData { status: | 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'under_maintenance' | 'unknown' lastUpdated: string incidents: Array<{ name: string status: string impact: string }> } const StatusIcon = ({ status }: { status: string }) => { switch (status) { case 'operational': return case 'degraded': case 'partial_outage': return case 'major_outage': return case 'under_maintenance': return default: return } } const getStatusColor = (status: string) => { switch (status) { case 'operational': return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800' case 'degraded': case 'partial_outage': return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800' case 'major_outage': return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800' case 'under_maintenance': return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800' default: return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/20 dark:text-gray-300 dark:border-gray-800' } } const getStatusText = (status: string) => { switch (status) { case 'operational': return 'All Systems Operational' case 'degraded': return 'Degraded Performance' case 'partial_outage': return 'Partial Service Outage' case 'major_outage': return 'Major Service Outage' case 'under_maintenance': return 'Under Maintenance' default: return 'Status Unknown' } } export const OpenAIStatusChecker: React.FC = () => { const [statusData, setStatusData] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [lastRefresh, setLastRefresh] = useState(new Date()) const fetchStatus = useCallback(async () => { setLoading(true) setError(null) try { console.log('Fetching real OpenAI status...') // Use CORS proxy to fetch real OpenAI status const proxyUrl = 'https://api.allorigins.win/get?url=' const targetUrl = 'https://status.openai.com/api/v2/status.json' const response = await fetch(proxyUrl + encodeURIComponent(targetUrl)) if (!response.ok) { throw new Error(`Proxy returned ${response.status}`) } const proxyData = await response.json() const openaiData = JSON.parse(proxyData.contents) console.log('Real OpenAI data received:', openaiData) // Transform real OpenAI data to our format const transformedData: StatusData = { status: mapOpenAIStatusClient( openaiData.status?.indicator || 'operational' ), lastUpdated: openaiData.page?.updated_at || new Date().toISOString(), incidents: (openaiData.incidents || []).slice(0, 3), } setStatusData(transformedData) setLastRefresh(new Date()) console.log('✅ Real OpenAI status loaded successfully!') } catch (err) { console.error('Failed to fetch real status:', err) // Fallback: try alternative proxy try { console.log('Trying alternative proxy...') const altResponse = await fetch( `https://cors-anywhere.herokuapp.com/https://status.openai.com/api/v2/summary.json` ) if (altResponse.ok) { const altData = await altResponse.json() setStatusData({ status: mapOpenAIStatusClient( altData.status?.indicator || 'operational' ), lastUpdated: new Date().toISOString(), incidents: [], }) setLastRefresh(new Date()) console.log('✅ Alternative proxy worked!') return } } catch (altErr) { console.log('Alternative proxy also failed') } // Final fallback setError('Unable to fetch real-time status') setStatusData({ status: 'operational' as const, lastUpdated: new Date().toISOString(), incidents: [], }) setLastRefresh(new Date()) console.log('Using fallback status') } finally { setLoading(false) } }, []) // Client-side status mapping function const mapOpenAIStatusClient = (indicator: string): StatusData['status'] => { switch (indicator.toLowerCase()) { case 'none': case 'operational': return 'operational' case 'minor': return 'degraded' case 'major': return 'partial_outage' case 'critical': return 'major_outage' case 'maintenance': return 'under_maintenance' default: return 'operational' as const // Default to operational } } useEffect(() => { fetchStatus() // Refresh every 2 minutes for more real-time updates const interval = setInterval(fetchStatus, 2 * 60 * 1000) return () => clearInterval(interval) }, [fetchStatus]) const handleRefresh = () => { fetchStatus() } if (loading && !statusData) { return (
Checking OpenAI Status...
) } if (error) { return (

Unable to Check Status

{error}

) } return (

OpenAI Services

Last updated: {new Date(lastRefresh).toLocaleTimeString()}

{getStatusText(statusData?.status || 'unknown')}

Quick Status Check

ChatGPT
API
Playground
{error ? 'Using fallback status • ' : '🟢 Real-time data from OpenAI • '} Updated: {new Date(lastRefresh).toLocaleTimeString()}
View detailed status guide
) }