From 091067f9229fbf39dc6dc4c6778b0a4147ab530b Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sat, 21 Jun 2025 19:15:17 +0200
Subject: [PATCH] yay

---
 pages/api/health.js | 34 ++++++++++++++++++++++++++++
 pages/index.js      | 54 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 pages/api/health.js

diff --git a/pages/api/health.js b/pages/api/health.js
new file mode 100644
index 0000000..19e355c
--- /dev/null
+++ b/pages/api/health.js
@@ -0,0 +1,34 @@
+import { db } from '../../lib/supabase'
+
+export default async function handler(req, res) {
+  try {
+    // Test database connection
+    const users = await db.getUsers()
+    
+    res.status(200).json({
+      status: 'healthy',
+      database: 'connected',
+      usersCount: Object.keys(users).length,
+      timestamp: new Date().toISOString(),
+      environment: {
+        hasSupabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
+        hasSupabaseKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+        hasPusherKey: !!process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
+        hasPusherCluster: !!process.env.NEXT_PUBLIC_PUSHER_CLUSTER
+      }
+    })
+  } catch (error) {
+    console.error('Health check error:', error)
+    res.status(500).json({
+      status: 'unhealthy',
+      error: error.message,
+      timestamp: new Date().toISOString(),
+      environment: {
+        hasSupabaseUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
+        hasSupabaseKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+        hasPusherKey: !!process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
+        hasPusherCluster: !!process.env.NEXT_PUBLIC_PUSHER_CLUSTER
+      }
+    })
+  }
+} 
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index e385cb6..e7779e6 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import Head from 'next/head'
 import dynamic from 'next/dynamic'
+import { useState, useEffect } from 'react'
 
 // Dynamically import the chess app to avoid SSR issues with Pusher
 const ChessApp = dynamic(() => import('../components/ChessApp'), {
@@ -16,6 +17,59 @@ const ChessApp = dynamic(() => import('../components/ChessApp'), {
 })
 
 export default function Home() {
+  const [healthStatus, setHealthStatus] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Check API health on mount
+    fetch('/api/health')
+      .then(res => res.json())
+      .then(data => {
+        setHealthStatus(data)
+        setLoading(false)
+      })
+      .catch(error => {
+        console.error('Health check failed:', error)
+        setHealthStatus({ status: 'error', error: error.message })
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-green-900 to-gray-900 text-green-100 flex items-center justify-center">
+        <div className="text-center">
+          <div className="text-6xl mb-4">🍄</div>
+          <div>Checking system health...</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (healthStatus?.status === 'unhealthy') {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-red-900 to-gray-900 text-red-100 flex items-center justify-center">
+        <div className="text-center max-w-md mx-auto p-6">
+          <div className="text-6xl mb-4">⚠️</div>
+          <h1 className="text-2xl font-bold mb-4">System Error</h1>
+          <div className="bg-red-800 p-4 rounded mb-4 text-left">
+            <p className="text-sm mb-2"><strong>Error:</strong> {healthStatus.error}</p>
+            <p className="text-sm mb-2"><strong>Environment Check:</strong></p>
+            <ul className="text-xs space-y-1">
+              <li>Supabase URL: {healthStatus.environment?.hasSupabaseUrl ? '✅' : '❌'}</li>
+              <li>Supabase Key: {healthStatus.environment?.hasSupabaseKey ? '✅' : '❌'}</li>
+              <li>Pusher Key: {healthStatus.environment?.hasPusherKey ? '✅' : '❌'}</li>
+              <li>Pusher Cluster: {healthStatus.environment?.hasPusherCluster ? '✅' : '❌'}</li>
+            </ul>
+          </div>
+          <p className="text-sm text-gray-300">
+            Please check your environment variables and database setup.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <>
       <Head>