<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - FastOpp</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.ico') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#3B82F6',
                        'ai-purple': '#8B5CF6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    {% include 'partials/header.html' %}

    <!-- Database Status Header -->
    <div class="bg-gradient-to-r from-ai-blue to-ai-purple text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-3xl font-bold mb-2">Database Status</h1>
            <p class="text-blue-100">Check your database connection and configuration</p>
        </div>
    </div>

    <!-- Database Status Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Status Card -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-900">Connection Status</h2>
                <div class="flex items-center space-x-2">
                    {% if status.available %}
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        <span class="text-green-600 font-semibold">Connected</span>
                    {% else %}
                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                        <span class="text-red-600 font-semibold">Disconnected</span>
                    {% endif %}
                </div>
            </div>

            <!-- Database Information -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Database Type</label>
                        <p class="text-lg font-semibold text-gray-900">{{ status.database_type }}</p>
                    </div>
                    
                    <div>
                        <label class="text-sm font-medium text-gray-500">Database URL</label>
                        <p class="text-sm font-mono text-gray-700 bg-gray-100 p-2 rounded break-all">
                            {{ status.database_url }}
                        </p>
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Status</label>
                        <p class="text-lg font-semibold {% if status.available %}text-green-600{% else %}text-red-600{% endif %}">
                            {% if status.available %}Available{% else %}Unavailable{% endif %}
                        </p>
                    </div>
                    
                    {% if status.error %}
                    <div>
                        <label class="text-sm font-medium text-gray-500">Error Message</label>
                        <p class="text-sm text-red-600 bg-red-50 p-2 rounded">{{ status.error }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Troubleshooting Section -->
        <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Troubleshooting Guide</h3>
            
            {% if not status.available %}
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            <strong>Database Connection Failed:</strong> Your application cannot connect to the database. This is common in serverless environments.
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="space-y-6">
                <div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">Common Solutions</h4>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start">
                            <span class="text-ai-blue mr-2">•</span>
                            <span><strong>Check Environment Variables:</strong> Ensure DATABASE_URL is properly set in your environment</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-ai-blue mr-2">•</span>
                            <span><strong>Serverless Environments:</strong> SQLite may not work in serverless environments like Leapcell. Consider using PostgreSQL or another cloud database</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-ai-blue mr-2">•</span>
                            <span><strong>Database Permissions:</strong> Ensure your database user has the necessary permissions</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-ai-blue mr-2">•</span>
                            <span><strong>Network Access:</strong> Check if your database is accessible from your deployment environment</span>
                        </li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">For Serverless Deployments</h4>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <p class="text-sm text-blue-800 mb-2">
                            <strong>Recommended Database Options:</strong>
                        </p>
                        <ul class="text-sm text-blue-700 space-y-1">
                            <li>• PostgreSQL (Supabase, Neon, PlanetScale)</li>
                        </ul>
                        <p class="text-sm text-blue-800 mt-2">
                            <strong>Note:</strong> Only PostgreSQL has been tested with Leapcell. Use <code>postgresql+psycopg</code> in your DATABASE_URL (asyncpg and psycopg2 are not supported).
                        </p>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-semibold text-gray-900 mb-3">Quick Fixes</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h5 class="font-semibold text-gray-900 mb-2">Environment Variables</h5>
                            <p class="text-sm text-gray-600 mb-2">Set DATABASE_URL in your environment:</p>
                            <code class="text-xs bg-gray-200 p-2 rounded block">DATABASE_URL=postgresql+psycopg://user:pass@host:port/db</code>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h5 class="font-semibold text-gray-900 mb-2">Database Initialization</h5>
                            <p class="text-sm text-gray-600 mb-2">Initialize database:</p>
                            <code class="text-xs bg-gray-200 p-2 rounded block">uv run python oppman.py db</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
            <button onclick="location.reload()" 
                    class="bg-ai-blue text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                Refresh Status
            </button>
            <a href="/" 
               class="bg-gray-500 text-white px-6 py-3 rounded-lg hover:bg-gray-600 transition-colors text-center">
                Back to Home
            </a>
            <a href="/health/database" 
               class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors text-center">
                API Status
            </a>
        </div>
    </div>

    <!-- Footer -->
    {% include 'partials/footer.html' %}
</body>
</html>
