@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-6 py-4 bg-gray-800 text-white">
            <h2 class="text-xl font-semibold">Dashboard</h2>
        </div>
        
        <div class="p-6">
            @if (session('status'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
                    <span class="block sm:inline">{{ session('status') }}</span>
                </div>
            @endif

            <p class="mb-4">Welcome, {{ Auth::user()->name }}!</p>
            <p class="mb-6">You're logged in to the application.</p>

            <div class="flex space-x-4">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        Logout (Web)
                    </button>
                </form>

                <button id="apiLogoutBtn" class="bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded hidden">
                    Logout (API)
                </button>
            </div>
        </div>
    </div>

    <!-- API Section -->
    <div class="max-w-3xl mx-auto mt-8 bg-white rounded-lg shadow-md overflow-hidden">
        <div class="px-6 py-4 bg-gray-800 text-white">
            <h2 class="text-xl font-semibold">API Test Section</h2>
        </div>
        
        <div class="p-6">
            <div id="apiAuthStatus" class="mb-4 p-4 bg-gray-100 rounded">
                <p>No active API session</p>
            </div>

            <div class="flex space-x-4">
                <button id="testApiUserBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded hidden">
                    Test /api/user
                </button>
            </div>

            <div class="mt-4">
                <div class="p-4 bg-gray-100 rounded hidden" id="apiTestResult">
                    <h3 class="font-bold">API Response:</h3>
                    <pre id="apiTestResultContent" class="text-sm mt-2"></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Check if we have an API token from the login page
    if (localStorage.getItem('authToken')) {
        authToken = localStorage.getItem('authToken');
        updateApiUI(true);
    }

    function updateApiUI(isAuthenticated) {
        const apiAuthStatus = document.getElementById('apiAuthStatus');
        const apiLogoutBtn = document.getElementById('apiLogoutBtn');
        const testApiUserBtn = document.getElementById('testApiUserBtn');

        if (isAuthenticated) {
            apiAuthStatus.innerHTML = '<p>API session is active</p>';
            apiLogoutBtn.classList.remove('hidden');
            testApiUserBtn.classList.remove('hidden');
        } else {
            apiAuthStatus.innerHTML = '<p>No active API session</p>';
            apiLogoutBtn.classList.add('hidden');
            testApiUserBtn.classList.add('hidden');
        }
    }

    document.getElementById('apiLogoutBtn').addEventListener('click', function() {
        fetch('/api/logout', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + authToken,
                'Accept': 'application/json',
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Logout failed');
            }
            return response.json();
        })
        .then(data => {
            authToken = null;
            localStorage.removeItem('authToken');
            updateApiUI(false);
            document.getElementById('apiTestResult').classList.add('hidden');
        })
        .catch(error => {
            document.getElementById('apiTestResult').classList.remove('hidden');
            document.getElementById('apiTestResultContent').textContent = error.message;
        });
    });

    document.getElementById('testApiUserBtn').addEventListener('click', function() {
        fetch('/api/user', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + authToken,
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('apiTestResult').classList.remove('hidden');
            document.getElementById('apiTestResultContent').textContent = JSON.stringify(data, null, 2);
        })
        .catch(error => {
            document.getElementById('apiTestResult').classList.remove('hidden');
            document.getElementById('apiTestResultContent').textContent = JSON.stringify(error, null, 2);
        });
    });
</script>
@endsection