@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="h3 mb-1 text-gray-800 fw-bold">Google Analytics Integration</h2>
        <p class="text-muted mb-0">Connect your website to Google Analytics 4</p>
    </div>
    <a href="{{ route('admin.analytics.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
    </a>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card shadow mb-4 border-0">
            <div class="card-header py-3 bg-white">
                <h6 class="m-0 font-weight-bold text-primary">Configuration</h6>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="alert alert-info mb-4">
                    <h5 class="alert-heading"><i class="fas fa-info-circle me-2"></i>How to get credentials</h5>
                    <ol class="mb-0 ps-3">
                        <li>Go to the <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a>.</li>
                        <li>Create a project and enable the <strong>Google Analytics Data API</strong>.</li>
                        <li>Create a <strong>Service Account</strong> and download the JSON key file.</li>
                        <li>Go to <a href="https://analytics.google.com/" target="_blank">Google Analytics</a>, go to Admin > Property Access Management.</li>
                        <li>Add the service account email address as a user with <strong>Viewer</strong> role.</li>
                    </ol>
                </div>

                <form action="{{ route('admin.analytics.google.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-4">
                        <label for="property_id" class="form-label fw-bold">GA4 Property ID</label>
                        <input type="text" class="form-control" id="property_id" name="property_id" value="{{ $propertyId }}" placeholder="e.g. 321456789" required>
                        <div class="form-text">You can find this in Google Analytics Admin > Property Settings.</div>
                    </div>

                    <div class="mb-4">
                        <label for="credentials_json" class="form-label fw-bold">Service Account Credentials (JSON)</label>
                        <input type="file" class="form-control" id="credentials_json" name="credentials_json" accept=".json">
                        <div class="form-text">Upload the JSON key file you downloaded from Google Cloud Console.</div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Save Configuration
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card shadow mb-4 border-0">
            <div class="card-header py-3 bg-white">
                <h6 class="m-0 font-weight-bold text-primary">Status</h6>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <div class="me-3">
                        @if($isConfigured)
                            <div class="rounded-circle bg-success p-3">
                                <i class="fas fa-check text-white fa-lg"></i>
                            </div>
                        @else
                            <div class="rounded-circle bg-secondary p-3">
                                <i class="fas fa-times text-white fa-lg"></i>
                            </div>
                        @endif
                    </div>
                    <div>
                        <h5 class="mb-1">Integration Status</h5>
                        @if($isConfigured)
                            <span class="badge bg-success">Connected</span>
                        @else
                            <span class="badge bg-secondary">Not Configured</span>
                        @endif
                    </div>
                </div>

                @if($isConfigured)
                    <p class="text-muted small mb-0">Your website is successfully connected to Google Analytics API. You can now pull data directly into your dashboard.</p>
                @else
                    <p class="text-muted small mb-0">Please configure the Property ID and upload the Service Account credentials to enable the integration.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection