{% extends "base.html" %}
{% block title %}Profile{% endblock %}
{% block page_title %}Profile & Preferences{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('settings.index') }}" class="btn btn-sm btn-outline-secondary me-1" style="font-size:12px;"><i class="bi bi-arrow-left me-1"></i>Settings</a>
{% endblock %}

{% block content %}
<div class="row g-3">
<div class="col-12 col-lg-6">
<div class="pcard">
    <div class="pcard-title mb-3">Profile</div>
    <form method="POST" action="{{ url_for('settings.profile') }}" novalidate>
        {{ form.hidden_tag() }}

        <div class="mb-3">
            {{ form.display_name.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.display_name(class="form-control", placeholder="Your name") }}
        </div>

        <div class="mb-3">
            {{ form.email.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.email(class="form-control", placeholder="email@example.com") }}
        </div>

        <div class="mb-3">
            {{ form.timezone.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.timezone(class="form-select") }}
        </div>

        <hr style="border-color:var(--border);">

        <div class="mb-3">
            {{ form.currency.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.currency(class="form-select") }}
            <small class="text-muted" style="font-size:11px;">All transactions use this single currency.</small>
        </div>

        <div class="mb-4">
            {{ form.groq_model.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.groq_model(class="form-select") }}
            <small class="text-muted" style="font-size:11px;">AI model used for chat and daily insights.</small>
        </div>

        <hr style="border-color:var(--border);">

        <div class="mb-3">
            <div class="form-label fw-medium" style="font-size:13px;">Budget Alerts</div>
            <div class="form-check">
                {{ form.budget_alerts_enabled(class="form-check-input") }}
                {{ form.budget_alerts_enabled.label(class="form-check-label", style="font-size:13px;") }}
            </div>
            {% if smtp_ok %}
            <small class="text-muted" style="font-size:11px;">
                <i class="bi bi-check-circle-fill text-success me-1"></i>SMTP configured — alerts will go to <strong>{{ alert_email }}</strong>
            </small>
            {% else %}
            <small class="text-danger" style="font-size:11px;">
                <i class="bi bi-exclamation-circle me-1"></i>SMTP not configured — set SMTP_HOST, SMTP_USER, SMTP_PASSWORD, ALERT_EMAIL in .env to enable emails.
            </small>
            {% endif %}
        </div>

        {% if smtp_ok %}
        <div class="mb-4">
            <form method="POST" action="{{ url_for('settings.test_email') }}" style="display:inline;">
                {{ form.hidden_tag() }}
                <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">
                    <i class="bi bi-envelope me-1"></i>Send Test Email
                </button>
            </form>
        </div>
        {% endif %}

        {{ form.submit(class="btn btn-primary") }}
        <a href="{{ url_for('settings.password') }}" class="btn btn-outline-secondary ms-2">Change Password</a>
    </form>
</div>
</div>

<div class="col-12 col-lg-6">
    <div class="pcard">
        <div class="pcard-title mb-3">Account Info</div>
        <table style="width:100%;font-size:13px;">
            <tr><td class="text-muted py-2" style="width:40%;border-bottom:1px solid var(--border);">Username</td><td class="py-2 fw-medium" style="border-bottom:1px solid var(--border);">{{ current_user.username }}</td></tr>
            <tr><td class="text-muted py-2" style="border-bottom:1px solid var(--border);">Last login</td><td class="py-2" style="border-bottom:1px solid var(--border);">{{ current_user.last_login.strftime('%b %d, %Y %H:%M') if current_user.last_login else '—' }}</td></tr>
            <tr><td class="text-muted py-2" style="border-bottom:1px solid var(--border);">Member since</td><td class="py-2" style="border-bottom:1px solid var(--border);">{{ current_user.created_at.strftime('%b %d, %Y') }}</td></tr>
            <tr><td class="text-muted py-2">Currency</td><td class="py-2 mono fw-bold">{{ current_user.currency_symbol }} {{ current_user.currency }}</td></tr>
        </table>
    </div>

    <div class="pcard mt-3">
        <div class="pcard-title mb-3">Quick Links</div>
        <div class="d-flex flex-column gap-2">
            <a href="{{ url_for('settings.recurring') }}" style="font-size:13px;color:var(--accent);"><i class="bi bi-repeat me-2"></i>Recurring Rules</a>
            <a href="{{ url_for('settings.import_csv') }}" style="font-size:13px;color:var(--accent);"><i class="bi bi-upload me-2"></i>Import CSV</a>
            <a href="{{ url_for('categories.index') }}" style="font-size:13px;color:var(--accent);"><i class="bi bi-tags me-2"></i>Manage Categories</a>
            <a href="{{ url_for('reports.index') }}" style="font-size:13px;color:var(--accent);"><i class="bi bi-file-earmark-bar-graph me-2"></i>Reports & Export</a>
        </div>
    </div>
</div>
</div>
{% endblock %}