{% extends "admin_base.html" %}
{% block title %}Settings — GoldBuy Admin{% endblock %}

{% block admin_content %}
<div class="admin-header">
    <h1>Settings</h1>
</div>
<section class="panel">
    <h2>Email notifications</h2>
    <p class="lead">Every new item submitted on the site is emailed to the address below,
       using your SMTP server (e.g. Gmail: <code>smtp.gmail.com</code>, port 587, TLS,
       with an <em>app password</em>).</p>

    <form method="post" action="{{ url_for('admin_settings') }}">
        {{ csrf_field() }}
        <div class="form-row">
            <label for="notify_email">Send notifications to (your email) *</label>
            <input type="email" id="notify_email" name="notify_email"
                   value="{{ cfg.get('notify_email', '') }}" placeholder="admin@example.com">
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="smtp_host">SMTP host *</label>
                <input type="text" id="smtp_host" name="smtp_host"
                       value="{{ cfg.get('smtp_host', '') }}" placeholder="smtp.gmail.com">
            </div>
            <div class="form-row">
                <label for="smtp_port">SMTP port</label>
                <input type="number" id="smtp_port" name="smtp_port"
                       value="{{ cfg.get('smtp_port', '') }}" placeholder="587">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="smtp_user">SMTP username</label>
                <input type="text" id="smtp_user" name="smtp_user"
                       value="{{ cfg.get('smtp_user', '') }}" placeholder="you@gmail.com">
            </div>
            <div class="form-row">
                <label for="smtp_password">SMTP password
                    <span class="hint">{% if cfg.get('smtp_password') %}(saved — leave blank to keep){% endif %}</span>
                </label>
                <input type="password" id="smtp_password" name="smtp_password"
                       autocomplete="new-password">
            </div>
        </div>
        <div class="form-row">
            <label for="smtp_security">Connection security</label>
            <select id="smtp_security" name="smtp_security">
                <option value="tls" {% if cfg.get('smtp_security', 'tls') == 'tls' %}selected{% endif %}>STARTTLS (port 587, most common)</option>
                <option value="ssl" {% if cfg.get('smtp_security') == 'ssl' %}selected{% endif %}>SSL (port 465)</option>
                <option value="none" {% if cfg.get('smtp_security') == 'none' %}selected{% endif %}>None (not recommended)</option>
            </select>
        </div>
        <button type="submit" class="btn">Save settings</button>
    </form>

    <form method="post" action="{{ url_for('admin_settings_test') }}" class="test-form">
        {{ csrf_field() }}
        <button type="submit" class="btn btn-outline">Send a test email</button>
    </form>
</section>

<section class="panel">
    <h2>Site settings</h2>
    <form method="post" action="{{ url_for('admin_settings') }}">
        {{ csrf_field() }}
        {# resubmit SMTP values unchanged so one save button per form works #}
        {% for k in ('smtp_host','smtp_port','smtp_user','smtp_security','notify_email') %}
            <input type="hidden" name="{{ k }}" value="{{ cfg.get(k, '') }}">
        {% endfor %}

        <div class="form-grid">
            <div class="form-row">
                <label for="whatsapp_number">Business WhatsApp number
                    <span class="hint">(chat button on the site)</span></label>
                <input type="tel" id="whatsapp_number" name="whatsapp_number"
                       value="{{ cfg.get('whatsapp_number', '') }}" placeholder="0712 345 678">
            </div>
            <div class="form-row">
                <label for="contact_phone">Contact phone
                    <span class="hint">(shown in the footer)</span></label>
                <input type="tel" id="contact_phone" name="contact_phone"
                       value="{{ cfg.get('contact_phone', '') }}" placeholder="0712 345 678">
            </div>
        </div>
        <div class="form-row">
            <label for="contact_email">Public contact email
                <span class="hint">(shown in the footer — e.g. info@supreonix.com)</span></label>
            <input type="email" id="contact_email" name="contact_email"
                   value="{{ cfg.get('contact_email', '') }}" placeholder="info@yourdomain.com">
        </div>

        <p><strong>Social media links</strong>
           <span class="hint">(shown as icons in the footer; leave blank to hide)</span></p>
        <div class="form-grid">
            <div class="form-row">
                <label for="facebook_url">Facebook</label>
                <input type="url" id="facebook_url" name="facebook_url"
                       value="{{ cfg.get('facebook_url', '') }}"
                       placeholder="https://facebook.com/yourpage">
            </div>
            <div class="form-row">
                <label for="instagram_url">Instagram</label>
                <input type="url" id="instagram_url" name="instagram_url"
                       value="{{ cfg.get('instagram_url', '') }}"
                       placeholder="https://instagram.com/yourpage">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="tiktok_url">TikTok</label>
                <input type="url" id="tiktok_url" name="tiktok_url"
                       value="{{ cfg.get('tiktok_url', '') }}"
                       placeholder="https://tiktok.com/@yourpage">
            </div>
            <div class="form-row">
                <label for="twitter_url">X (Twitter)</label>
                <input type="url" id="twitter_url" name="twitter_url"
                       value="{{ cfg.get('twitter_url', '') }}"
                       placeholder="https://x.com/yourpage">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="youtube_url">YouTube</label>
                <input type="url" id="youtube_url" name="youtube_url"
                       value="{{ cfg.get('youtube_url', '') }}"
                       placeholder="https://youtube.com/@yourchannel">
            </div>
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="service_area">Service area
                    <span class="hint">(footer — where you buy)</span></label>
                <input type="text" id="service_area" name="service_area"
                       value="{{ cfg.get('service_area', '') }}"
                       placeholder="Nairobi &amp; environs — we come to you">
            </div>
            <div class="form-row">
                <label for="business_hours">Business hours
                    <span class="hint">(footer)</span></label>
                <input type="text" id="business_hours" name="business_hours"
                       value="{{ cfg.get('business_hours', '') }}"
                       placeholder="Monday – Saturday, 8am – 6pm">
            </div>
        </div>

        <p><strong>Today's gold prices</strong>
           <span class="hint">(KSh per gram — shown in a banner on the home page; leave blank to hide)</span></p>
        <div class="form-grid form-grid-3">
            <div class="form-row">
                <label for="gold_price_24k">24k</label>
                <input type="text" id="gold_price_24k" name="gold_price_24k"
                       value="{{ cfg.get('gold_price_24k', '') }}" placeholder="e.g. 9,800">
            </div>
            <div class="form-row">
                <label for="gold_price_21k">21k</label>
                <input type="text" id="gold_price_21k" name="gold_price_21k"
                       value="{{ cfg.get('gold_price_21k', '') }}" placeholder="e.g. 8,500">
            </div>
            <div class="form-row">
                <label for="gold_price_18k">18k</label>
                <input type="text" id="gold_price_18k" name="gold_price_18k"
                       value="{{ cfg.get('gold_price_18k', '') }}" placeholder="e.g. 7,300">
            </div>
        </div>
        <button type="submit" class="btn">Save site settings</button>
    </form>
</section>

<section class="panel">
    <h2>AI support chat</h2>
    <p class="lead">A chat bubble on the site where "Grace", our AI assistant
       (powered by DeepSeek), answers visitor questions about selling gold.
       Enabled automatically when a key is saved.</p>
    <form method="post" action="{{ url_for('admin_settings') }}">
        {{ csrf_field() }}
        <div class="form-row">
            <label for="deepseek_api_key">DeepSeek API key
                <span class="hint">{% if cfg.get('deepseek_api_key') %}(saved — leave blank to keep){% else %}(get one at platform.deepseek.com){% endif %}</span>
            </label>
            <input type="password" id="deepseek_api_key" name="deepseek_api_key"
                   autocomplete="new-password" placeholder="sk-&hellip;">
        </div>
        <button type="submit" class="btn">Save AI settings</button>
    </form>
</section>

<section class="panel">
    <h2>Backups</h2>
    <p class="lead">A backup (database + all photos) is created automatically when the
       app starts and once every day. The most recent {{ 14 }} are kept. You can also
       create or download one now.</p>
    <div class="backup-actions">
        <form method="post" action="{{ url_for('admin_backup') }}">
            {{ csrf_field() }}
            <button type="submit" class="btn">Create backup now</button>
        </form>
        <a class="btn btn-outline" href="{{ url_for('admin_backup_download') }}">
            &#8595; Download latest backup</a>
    </div>
</section>
{% endblock %}