{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="settings-container">
    <div class="settings-header">
        <h1>⚙️ Settings</h1>
        <p>Manage your account preferences, saved delivery details, and device-ready shopping experience.</p>
    </div>

    <div class="settings-grid">
        <div class="settings-card">
            <h3>🎨 Appearance</h3>
            <p>Customize how the app looks on your device.</p>
            <div class="settings-action">
                <button type="button" class="mode-toggle btn btn-primary">Toggle Theme</button>
            </div>
        </div>

        <div class="settings-card">
            <h3>🌐 Language</h3>
            <p>Select your preferred language.</p>
            <div class="settings-action">
                <form action="{% url 'set_language_preference' %}" method="post" class="settings-language-form">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                    <select name="language" onchange="this.form.submit()" class="form-select">
                        {% for opt in language_options %}
                        <option value="{{ opt.code }}" {% if site_language == opt.code %}selected{% endif %}>{{ opt.label }}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>

        <div class="settings-card settings-card--wide">
            <h3>📍 Delivery Location</h3>
            <p>Save your default phone, address, and optional GPS location for faster and more accurate checkout.</p>
            <div class="settings-action settings-action--stretch">
                {% if user.is_authenticated %}
                <form method="post" class="settings-location-form" data-location-form>
                    {% csrf_token %}
                    {{ location_form.latitude }}
                    {{ location_form.longitude }}
                    {{ location_form.location_accuracy_m }}

                    <div class="form-grid settings-form-grid">
                        <div class="form-group">
                            <label for="{{ location_form.phone.id_for_label }}">Phone</label>
                            {{ location_form.phone }}
                            {% if location_form.phone.errors %}<div class="field-errors">{{ location_form.phone.errors }}</div>{% endif %}
                        </div>
                        <div class="form-group">
                            <label for="{{ location_form.location_label.id_for_label }}">Quick location</label>
                            {{ location_form.location_label }}
                            {% if location_form.location_label.errors %}<div class="field-errors">{{ location_form.location_label.errors }}</div>{% else %}<small class="field-note">Shown in the navbar and used as your saved delivery area.</small>{% endif %}
                        </div>
                        <div class="form-group form-group--full">
                            <div class="location-card">
                                <div class="location-card-head">
                                    <div>
                                        <strong>Browser GPS</strong>
                                        <p class="field-note">Use current device location to improve support for hard-to-find delivery points.</p>
                                    </div>
                                    <button type="button" class="btn btn-secondary small" data-geolocate-btn>Use Current GPS</button>
                                </div>
                                <p class="location-status" data-location-status>
                                    {% if location_saved_at %}
                                        GPS was last refreshed on {{ location_saved_at|date:'M d, Y H:i' }}.
                                    {% else %}
                                        No exact GPS saved yet. Manual delivery details still work.
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="form-group form-group--full">
                            <label for="{{ location_form.default_address.id_for_label }}">Default delivery address</label>
                            {{ location_form.default_address }}
                            {% if location_form.default_address.errors %}<div class="field-errors">{{ location_form.default_address.errors }}</div>{% endif %}
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Save delivery preferences</button>
                    <small class="field-note">Your latest delivery addresses from previous orders will also appear as quick-select shortcuts during checkout.</small>
                </form>
                {% else %}
                <form method="post" class="settings-location-form">
                    {% csrf_token %}
                    <input type="text" name="delivery_location" value="{{ guest_delivery_location }}" placeholder="Enter city or address" class="form-control">
                    <button type="submit" class="btn btn-primary">Save temporary location</button>
                </form>
                {% endif %}
            </div>
        </div>

        <div class="settings-card">
            <h3>👤 Account</h3>
            <p>Update your profile information and manage your account.</p>
            <div class="settings-action">
                {% if user.is_authenticated %}
                <a href="{% url 'profile' %}" class="btn btn-secondary">Go to Profile</a>
                {% else %}
                <a href="{% url 'login' %}" class="btn btn-secondary">Login to manage account</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}