<x-app-layout>
    <x-module-hero
        title="Google Meet Integration Documentation"
        description="Learn how to integrate Google Meet into your Laravel application"
        icon="fa-book">
        <x-slot name="tabs">
            <a href="{{ route('config.google-meet.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('config.google-meet.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.create') || request()->routeIs('config.google-meet.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-cog"></i> Configuration
            </a>
            <a href="{{ route('config.google-meet.test') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.test') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plug"></i> Test Connection
            </a>
            <a href="{{ route('config.google-meet.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> Activity Logs
            </a>
            <a href="{{ route('config.google-meet.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.google-meet.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            {{-- Table of Contents (sticky sidebar) --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-4">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-list text-gray-500"></i> Contents
                    </h3>
                    <nav class="space-y-1">
                        <a href="#overview" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">1. Overview</a>
                        <a href="#prerequisites" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">2. Prerequisites</a>
                        <a href="#google-cloud-setup" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">3. Google Cloud Setup</a>
                        <a href="#usage" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">4. Usage Examples</a>
                        <a href="#api-reference" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">5. API Reference</a>
                        <a href="#error-handling" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">6. Error Handling</a>
                        <a href="#security" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">7. Security</a>
                        <a href="#troubleshooting" class="block text-sm text-green-600 hover:text-green-700 py-1 border-l-2 border-transparent hover:border-green-500 pl-2 transition-colors">8. Troubleshooting</a>
                    </nav>
                </div>
            </div>

            {{-- Documentation Content --}}
            <div class="lg:col-span-3 space-y-6">

                {{-- Section 1: Overview --}}
                <section id="overview" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-info-circle"></i> 1. Overview
                        </h2>
                    </div>
                    <div class="p-5">
                        <p class="text-sm text-gray-700 leading-relaxed mb-4">
                            The Google Meet Configuration module provides seamless integration between your Laravel application
                            and the Google Meet API. It allows your application to programmatically create video conference meetings,
                            invite attendees, and manage Google Calendar events with Meet conferencing.
                        </p>
                        <h3 class="text-sm font-semibold text-gray-800 mb-2">Key Features</h3>
                        <ul class="list-disc list-inside space-y-1 text-sm text-gray-700">
                            <li>OAuth2 authentication with Google</li>
                            <li>Automatic token refresh before expiration</li>
                            <li>Secure credential storage with Laravel encryption</li>
                            <li>Comprehensive activity logging</li>
                            <li>Role-based access control (Super Manager only)</li>
                            <li>Reusable <code class="bg-gray-100 px-1 rounded text-xs">MeetService</code> for other modules</li>
                        </ul>
                        <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-blue-800 mb-2">How It Works</h4>
                            <ol class="list-decimal list-inside space-y-1 text-sm text-blue-700">
                                <li>Configure OAuth2 credentials from Google Cloud Console</li>
                                <li>Authenticate with Google using your Super Manager account</li>
                                <li>Access tokens are stored securely and auto-refreshed</li>
                                <li>Other modules use <code class="bg-blue-100 px-1 rounded text-xs">MeetService</code> to create meetings</li>
                                <li>All API interactions are logged for debugging</li>
                            </ol>
                        </div>
                    </div>
                </section>

                {{-- Section 2: Prerequisites --}}
                <section id="prerequisites" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-check-circle"></i> 2. Prerequisites
                        </h2>
                    </div>
                    <div class="p-5">
                        <h3 class="text-sm font-semibold text-gray-800 mb-2">Before You Begin</h3>
                        <ul class="list-disc list-inside space-y-1 text-sm text-gray-700 mb-4">
                            <li>A Google account with access to Google Cloud Console</li>
                            <li>Super Manager role in the SSHIA system</li>
                            <li>HTTPS enabled for your application (required for OAuth callback)</li>
                            <li>Google Calendar API enabled in your Google Cloud project</li>
                        </ul>
                        <h3 class="text-sm font-semibold text-gray-800 mb-2">Required OAuth2 Scopes</h3>
                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
                            <code class="text-xs text-gray-700 block">https://www.googleapis.com/auth/calendar.events</code>
                            <code class="text-xs text-gray-700 block mt-1">https://www.googleapis.com/auth/calendar</code>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            These scopes allow the application to create and manage calendar events with Google Meet conferencing.
                        </p>
                    </div>
                </section>

                {{-- Section 3: Google Cloud Setup --}}
                <section id="google-cloud-setup" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fab fa-google"></i> 3. Google Cloud Console Setup
                        </h2>
                    </div>
                    <div class="p-5">
                        <div class="space-y-5">
                            @foreach([
                                ['num' => 1, 'title' => 'Create a Google Cloud Project', 'desc' => 'Go to <a href="https://console.cloud.google.com" target="_blank" class="text-green-600 underline">console.cloud.google.com</a> and create a new project or select an existing one.'],
                                ['num' => 2, 'title' => 'Enable Google Calendar API', 'desc' => 'Navigate to <strong>APIs & Services → Library</strong>, search for "Google Calendar API", and enable it.'],
                                ['num' => 3, 'title' => 'Configure OAuth Consent Screen', 'desc' => 'Go to <strong>APIs & Services → OAuth consent screen</strong>. Set User Type, App name, support email, and add the Calendar scopes.'],
                                ['num' => 4, 'title' => 'Create OAuth 2.0 Credentials', 'desc' => 'Go to <strong>APIs & Services → Credentials</strong>, click "Create Credentials" → "OAuth client ID". Select "Web application" and add your Redirect URI.'],
                                ['num' => 5, 'title' => 'Copy Credentials', 'desc' => 'After creating, copy the Client ID and Client Secret. You\'ll need these for the SSHIA configuration form.'],
                            ] as $step)
                                <div class="flex gap-4">
                                    <div class="flex-shrink-0 w-7 h-7 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-bold">
                                        {{ $step['num'] }}
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-800">{{ $step['title'] }}</h4>
                                        <p class="text-sm text-gray-600 mt-0.5">{!! $step['desc'] !!}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-5 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5"></i>
                                <div class="text-sm text-yellow-800">
                                    <strong>Important:</strong> The redirect URI must exactly match what you configure in Google Cloud Console.
                                    Your redirect URI should be:
                                    <code class="block mt-2 bg-yellow-100 p-2 rounded text-xs">
                                        {{ config('app.url') }}/config/google-meet/callback
                                    </code>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- Section 4: Usage --}}
                <section id="usage" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-code"></i> 4. Usage Examples
                        </h2>
                    </div>
                    <div class="p-5 space-y-5">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Basic Usage</h3>
                            <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs"><code>use App\Services\MeetService;

class YourController extends Controller
{
    public function createMeeting(MeetService $meetService)
    {
        $result = $meetService->createMeeting(
            summary: 'Project Review Meeting',
            startTime: '2024-01-15T10:00:00',
            endTime: '2024-01-15T11:00:00',
            attendees: ['john@example.com', 'jane@example.com'],
            description: 'Monthly project status review'
        );

        if ($result['success']) {
            return response()->json([
                'meeting_link' => $result['meeting_link'],
                'meeting_id'   => $result['meeting_id']
            ]);
        }

        return response()->json(['error' => $result['message']], 400);
    }
}</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Response Format</h3>
                            <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs"><code>// Success Response
[
    'success'          => true,
    'meeting_link'     => 'https://meet.google.com/abc-defg-hij',
    'meeting_id'       => 'abc-defg-hij',
    'calendar_event_id'=> 'event123',
    'summary'          => 'Project Review Meeting',
    'start_time'       => '2024-01-15T10:00:00',
    'end_time'         => '2024-01-15T11:00:00',
    'attendees'        => ['john@example.com', 'jane@example.com']
]

// Error Response
[
    'success'    => false,
    'message'    => 'Error description',
    'error_code' => 'authentication_failed'
]</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Checking Configuration Status</h3>
                            <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs"><code>use App\Services\GoogleMeetConfigurationService;

// Check if configured
if (!$configService->isConfigured()) {
    return 'Google Meet is not configured';
}

// Check if authenticated
if (!$configService->isAuthenticated()) {
    return 'Please authenticate with Google';
}

// Get status summary
$status = $configService->getStatusSummary();
// Returns: ['configured' => bool, 'authenticated' => bool, ...]</code></pre>
                        </div>
                    </div>
                </section>

                {{-- Section 5: API Reference --}}
                <section id="api-reference" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-book-open"></i> 5. API Reference
                        </h2>
                    </div>
                    <div class="p-5">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3">MeetService Methods</h3>
                        <div class="overflow-x-auto">
                            <table class="w-full table-zebra">
                                <thead>
                                    <tr>
                                        <th class="px-4 py-3 text-left th-col-1 text-white text-xs font-semibold uppercase tracking-wider">Method</th>
                                        <th class="px-4 py-3 text-left th-col-2 text-white text-xs font-semibold uppercase tracking-wider">Parameters</th>
                                        <th class="px-4 py-3 text-left th-col-3 text-white text-xs font-semibold uppercase tracking-wider">Returns</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                        <td class="px-4 py-3 text-sm"><code class="text-xs bg-gray-100 px-1 rounded">createMeeting()</code></td>
                                        <td class="px-4 py-3 text-xs text-gray-600">summary, startTime, endTime, attendees?, description?</td>
                                        <td class="px-4 py-3 text-xs text-gray-600">array</td>
                                    </tr>
                                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                        <td class="px-4 py-3 text-sm"><code class="text-xs bg-gray-100 px-1 rounded">validateMeetingParameters()</code></td>
                                        <td class="px-4 py-3 text-xs text-gray-600">summary, startTime, endTime, attendees?</td>
                                        <td class="px-4 py-3 text-xs text-gray-600">array</td>
                                    </tr>
                                    <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                        <td class="px-4 py-3 text-sm"><code class="text-xs bg-gray-100 px-1 rounded">createMeetingWithValidation()</code></td>
                                        <td class="px-4 py-3 text-xs text-gray-600">summary, startTime, endTime, attendees?, description?</td>
                                        <td class="px-4 py-3 text-xs text-gray-600">array</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                {{-- Section 6: Error Handling --}}
                <section id="error-handling" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-exclamation-triangle"></i> 6. Error Handling
                        </h2>
                    </div>
                    <div class="p-5 space-y-4">
                        <h3 class="text-sm font-semibold text-gray-800 mb-3">Common Error Codes</h3>
                        <div class="space-y-3">
                            @foreach([
                                ['code' => 'not_configured', 'color' => 'red', 'desc' => 'Google Meet integration has not been configured. Configure OAuth credentials first.'],
                                ['code' => 'authentication_failed', 'color' => 'red', 'desc' => 'OAuth authentication is invalid or expired. Re-authenticate with Google.'],
                                ['code' => 'token_refresh_failed', 'color' => 'red', 'desc' => 'Unable to refresh the access token. Re-authenticate with Google.'],
                                ['code' => 'api_error', 'color' => 'red', 'desc' => 'Google API returned an error. Check the error message for details.'],
                                ['code' => 'validation_failed', 'color' => 'yellow', 'desc' => 'Input validation failed. Check the validation_errors array for details.'],
                            ] as $err)
                                <div class="p-3 bg-{{ $err['color'] }}-50 border border-{{ $err['color'] }}-200 rounded-lg">
                                    <code class="text-{{ $err['color'] }}-700 text-xs font-medium">{{ $err['code'] }}</code>
                                    <p class="text-xs text-{{ $err['color'] }}-600 mt-1">{{ $err['desc'] }}</p>
                                </div>
                            @endforeach
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Best Practices</h3>
                            <pre class="bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto text-xs"><code>try {
    $result = $meetService->createMeeting(...);

    if (!$result['success']) {
        Log::warning('Meeting creation failed', $result);
        return back()->with('error', $result['message']);
    }

    return redirect()->route('meetings.show', $result['meeting_id']);

} catch (\Exception $e) {
    Log::error('Unexpected meeting error', ['error' => $e->getMessage()]);
    return back()->with('error', 'An unexpected error occurred.');
}</code></pre>
                        </div>
                    </div>
                </section>

                {{-- Section 7: Security --}}
                <section id="security" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-shield-alt"></i> 7. Security Considerations
                        </h2>
                    </div>
                    <div class="p-5">
                        <div class="space-y-4">
                            @foreach([
                                ['icon' => 'fa-lock', 'title' => 'Credential Encryption', 'desc' => 'All OAuth credentials (client_id, client_secret, access_token, refresh_token) are encrypted using Laravel\'s built-in encryption.'],
                                ['icon' => 'fa-user-shield', 'title' => 'Role-Based Access', 'desc' => 'Only Super Manager role can access configuration, authenticate, and test connections.'],
                                ['icon' => 'fa-key', 'title' => 'CSRF Protection', 'desc' => 'OAuth state parameter is validated to prevent CSRF attacks during the authentication flow.'],
                                ['icon' => 'fa-history', 'title' => 'Activity Logging', 'desc' => 'All API interactions are logged for auditing and debugging purposes.'],
                            ] as $item)
                                <div class="flex items-start gap-4">
                                    <div class="flex-shrink-0 w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                                        <i class="fas {{ $item['icon'] }} text-sm"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-800">{{ $item['title'] }}</h4>
                                        <p class="text-sm text-gray-600 mt-0.5">{{ $item['desc'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mt-0.5"></i>
                                <p class="text-sm text-yellow-800">
                                    <strong>Important:</strong> Never expose OAuth tokens in API responses, logs, or error messages.
                                    The system automatically hides sensitive fields in model serialization.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- Section 8: Troubleshooting --}}
                <section id="troubleshooting" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-green-600 to-green-700">
                        <h2 class="text-base font-semibold text-white flex items-center gap-2">
                            <i class="fas fa-tools"></i> 8. Troubleshooting
                        </h2>
                    </div>
                    <div class="p-5">
                        <div class="space-y-4">
                            @foreach([
                                [
                                    'problem' => '"Google Meet configuration not found" error',
                                    'solution' => 'No configuration exists in the database. Go to the Configuration tab and create one with your Google OAuth2 credentials.',
                                ],
                                [
                                    'problem' => 'OAuth callback returns "redirect_uri_mismatch"',
                                    'solution' => 'The redirect URI in your form does not match what is configured in Google Cloud Console. They must be identical, including the protocol (https://).',
                                ],
                                [
                                    'problem' => '"Token expired" or "invalid_grant" errors',
                                    'solution' => 'Your refresh token has been revoked or expired. Go to the Dashboard and click "Authenticate with Google" to re-authorize.',
                                ],
                                [
                                    'problem' => 'Test connection fails with 403 error',
                                    'solution' => 'The Google Calendar API may not be enabled in your Google Cloud project, or the OAuth consent screen scopes are missing the Calendar scopes.',
                                ],
                                [
                                    'problem' => 'Meetings created but no Meet link generated',
                                    'solution' => 'Ensure the conferenceDataVersion parameter is set to 1 in the API request. The MeetService handles this automatically.',
                                ],
                            ] as $item)
                                <div class="border border-gray-200 rounded-lg p-4">
                                    <h4 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                                        <i class="fas fa-question-circle text-orange-500"></i>
                                        {{ $item['problem'] }}
                                    </h4>
                                    <p class="text-sm text-gray-600 mt-2 pl-6">
                                        <i class="fas fa-arrow-right text-green-500 mr-1"></i>
                                        {{ $item['solution'] }}
                                    </p>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-5 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="flex items-start gap-3">
                                <i class="fas fa-info-circle text-blue-600 mt-0.5"></i>
                                <div class="text-sm text-blue-800">
                                    <strong>Still having issues?</strong> Check the
                                    <a href="{{ route('config.google-meet.logs') }}" class="underline">Activity Logs</a>
                                    for detailed error messages, or review the
                                    <a href="https://developers.google.com/calendar/api/guides/overview" target="_blank" class="underline">Google Calendar API documentation</a>.
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
</x-app-layout>
