{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <h1 class="h2 fw-bold mb-4">Settings</h1>

    <div class="row">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-4">Branding & Appearance</h5>

                    <form method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                        <div class="mb-4">
                            <label class="form-label fw-bold">Company Name</label>
                            <input type="text" name="company_name" class="form-control"
                                value="{{ current_user.company_name or '' }}">
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Brand Colors</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="small text-muted mb-1">Primary Color</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" name="primary_color"
                                            value="{{ current_user.primary_color }}" title="Choose your color">
                                        <input type="text" class="form-control" value="{{ current_user.primary_color }}"
                                            readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="small text-muted mb-1">Secondary Color</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color"
                                            name="secondary_color" value="{{ current_user.secondary_color }}"
                                            title="Choose your color">
                                        <input type="text" class="form-control"
                                            value="{{ current_user.secondary_color }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Company Logo</label>
                            {% if current_user.logo_path %}
                            <div class="mb-2">
                                <img src="{{ url_for('static', filename=current_user.logo_path) }}" alt="Logo"
                                    height="60" class="d-block">
                            </div>
                            {% endif %}
                            <input type="file" name="logo" class="form-control" accept="image/*">
                            <div class="form-text">Recommended size: 200x60px transparent PNG</div>
                        </div>

                        <hr class="my-4">

                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3">Google Integrations</h5>
                    <p class="text-muted small mb-3">Manage your connections to Google Analytics 4 and Search Console.
                    </p>

                    <div class="d-grid gap-2">
                        {% if google_connected %}
                        <div class="alert alert-success d-flex align-items-center mb-3" role="alert">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            <span>Google Account Connected</span>
                        </div>
                        <a href="{{ url_for('settings.google_disconnect') }}"
                            class="btn btn-outline-danger d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-x-circle"></i>
                            Disconnect Google Account
                        </a>
                        {% else %}
                        <a href="{{ url_for('settings.google_connect') }}"
                            class="btn btn-outline-dark d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-google"></i>
                            Connect Google Account
                        </a>
                        {% endif %}
                    </div>

                    <!-- OAuth Setup Help -->
                    <div class="mt-4 pt-3 border-top">
                        <details class="small">
                            <summary class="text-muted cursor-pointer mb-2">
                                <i class="bi bi-gear me-1"></i> OAuth Configuration Help
                            </summary>
                            <div class="bg-light rounded p-2 mt-2">
                                <p class="mb-2 text-muted">Add this redirect URI to your Google Cloud Console:</p>
                                <code
                                    class="d-block bg-white p-2 rounded border text-break small">{{ url_for('settings.google_callback', _external=True) }}</code>
                                <p class="mt-2 mb-0 text-muted small">
                                    Go to <a href="https://console.cloud.google.com/apis/credentials" target="_blank"
                                        class="text-decoration-none">Google Cloud Console → APIs & Services →
                                        Credentials</a>,
                                    edit your OAuth client, and add this URI under "Authorized redirect URIs".
                                </p>
                            </div>
                        </details>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}