@extends('layouts.app')

@section('title', 'Settings')

@section('navigation')
    <a href="{{ route('dashboard') }}">Dashboard</a>
    <a href="{{ route('dashboard.settings') }}" class="active">Settings</a>
    <a href="{{ route('dashboard.events') }}">Events</a>
    <a href="{{ route('dashboard.widgets') }}">Widgets</a>
@endsection

@section('content')
<div class="eb-card">
    <h2>EventBookings API Settings</h2>
    <p>Connect your EventBookings account to start displaying events on your Shopify store.</p>

    <form method="POST" action="{{ route('dashboard.settings.update') }}" style="margin-top: 2rem;">
        @csrf

        <div class="eb-form-group">
            <label for="client_id">Client ID</label>
            <input type="text"
                   id="client_id"
                   name="client_id"
                   value="{{ old('client_id', $storeSetting?->client_id) }}"
                   placeholder="Your EventBookings Client ID"
                   required>
            <small style="color: #637381;">Found in your EventBookings account under API Access</small>
        </div>

        <div class="eb-form-group">
            <label for="client_secret">Client Secret</label>
            <input type="password"
                   id="client_secret"
                   name="client_secret"
                   value="{{ old('client_secret') }}"
                   placeholder="Your EventBookings Client Secret"
                   required>
            <small style="color: #637381;">Keep this secret secure and don't share it publicly</small>
        </div>

        <div style="display: flex; gap: 1rem; align-items: center;">
            <button type="submit" class="eb-btn">Save & Test Connection</button>

            @if($storeSetting && $storeSetting->hasValidCredentials())
                <button type="button" id="test-connection" class="eb-btn eb-btn-secondary">Test Connection</button>
            @endif
        </div>
    </form>
</div>

@if($storeSetting && $storeSetting->is_connected)
<div class="eb-card">
    <h3>Connection Status</h3>
    <div style="color: #008060;">
        <strong>✓ Connected to EventBookings</strong>
    </div>

    @if($storeSetting->org_uuid)
        <p><strong>Organization UUID:</strong> {{ $storeSetting->org_uuid }}</p>
    @endif

    @if($storeSetting->token_expires_at)
        <p><strong>Token Expires:</strong> {{ $storeSetting->token_expires_at->format('Y-m-d H:i:s') }}</p>
        @if($storeSetting->isTokenExpiringSoon())
            <div class="eb-alert eb-alert-warning">
                Your access token is expiring soon. It will be automatically refreshed when needed.
            </div>
        @endif
    @endif

    <div style="margin-top: 1rem;">
        <form method="POST" action="{{ route('api.clear-cache') }}" style="display: inline;">
            @csrf
            <button type="submit" class="eb-btn eb-btn-secondary">Clear Cache</button>
        </form>
    </div>
</div>
@endif

<div class="eb-card">
    <h3>How to get your API credentials</h3>
    <ol>
        <li>Log in to your EventBookings account</li>
        <li>Go to Settings → API Access</li>
        <li>Create a new API client or use an existing one</li>
        <li>Copy the Client ID and Client Secret</li>
        <li>Paste them in the form above</li>
    </ol>
    <p><strong>Note:</strong> Your Client Secret will be encrypted and stored securely.</p>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const testButton = document.getElementById('test-connection');

    if (testButton) {
        testButton.addEventListener('click', function() {
            this.disabled = true;
            this.textContent = 'Testing...';

            apiRequest('{{ route("api.test-connection") }}')
                .then(response => {
                    if (response.success) {
                        showAlert('Connection test successful!', 'success');
                    } else {
                        showAlert(response.message || 'Connection test failed', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('Connection test failed', 'error');
                })
                .finally(() => {
                    this.disabled = false;
                    this.textContent = 'Test Connection';
                });
        });
    }
});
</script>
@endpush