{% extends "base.html" %}
{% block title %}Settings — Mornings{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h2>Settings</h2>
    <p>Global configuration for announcements</p>
</div>

<form method="post" action="{{ root_path }}/settings" style="max-width: 640px;" class="animate-in">
    <div class="form-group">
        <label for="default_airplay_device">Default Cast Device</label>
        <select id="default_airplay_device" name="default_airplay_device" style="max-width: 100%;">
            <option value="">— Select device —</option>
            <option value="__all__" {{ "selected" if settings.default_airplay_device == "__all__" else "" }}>All available devices</option>
            {% for d in devices %}
            <option value="{{ d.name }}" {{ "selected" if settings.default_airplay_device == d.name else "" }}>{{ d.name }} ({{ d.address }}) [{{ d.device_type }}]</option>
            {% endfor %}
            {% if settings.default_airplay_device and settings.default_airplay_device != "__all__" and settings.default_airplay_device not in devices | map(attribute='name') | list %}
            <option value="{{ settings.default_airplay_device }}" selected>{{ settings.default_airplay_device }} (saved)</option>
            {% endif %}
            <option value="__other__">Other (manual entry)…</option>
        </select>
        <input type="text" id="default_airplay_device_manual" placeholder="Enter device name"
               style="display: none; margin-top: 0.5rem;">
    </div>

    <div class="form-group">
        <label for="tts_voice">TTS Voice</label>
        <select id="tts_voice" name="tts_voice">
            {% for v in voices %}
            <option value="{{ v.id }}" {{ "selected" if (settings.tts_voice or "en_US-lessac-high") == v.id else "" }}>{{ v.label }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="form-group">
        <label for="default_volume">Default Volume <small>(0-100)</small></label>
        <input type="number" id="default_volume" name="default_volume"
               value="{{ settings.default_volume or '80' }}" min="0" max="100">
    </div>

    <div class="form-group">
        <label for="output_device">Audio Output Device <small>(optional)</small></label>
        <input type="text" id="output_device" name="output_device"
               value="{{ settings.output_device or '' }}"
               placeholder="e.g. Onkyo receiver">
        <small class="form-hint">For AirPlay devices with multiple audio outputs (e.g. receivers via HDMI-CEC). Leave blank for default output.</small>
    </div>

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

<hr class="section-divider">

<div class="animate-in">
    <h3 class="mb-4">Test</h3>
    <button type="button" id="test-btn" class="btn btn-secondary">Play Test Announcement</button>
</div>

<hr class="section-divider">

<form method="post" action="{{ root_path }}/settings" style="max-width: 640px;" class="animate-in">
    <h3 class="mb-4">Dashboard Display</h3>

    <div class="form-group">
        <label for="display_start_time">Start Time</label>
        <input type="time" id="display_start_time" name="display_start_time"
               value="{{ settings.display_start_time or '' }}">
        <small class="form-hint">When to start showing the dashboard on cast devices.</small>
    </div>

    <div class="form-group">
        <label for="display_stop_time">Stop Time</label>
        <input type="time" id="display_stop_time" name="display_stop_time"
               value="{{ settings.display_stop_time or '' }}">
    </div>

    <div class="form-group">
        <label for="display_devices">Display Devices <small>(comma-separated)</small></label>
        <input type="text" id="display_devices" name="display_devices"
               value="{{ settings.display_devices or '' }}"
               placeholder="Living Room TV, Kitchen Display">
    </div>

    <h3 class="mb-4" style="margin-top: 2rem;">Weather (NWS)</h3>

    <div class="form-group">
        <label for="weather_zipcode">ZIP Code</label>
        <input type="text" id="weather_zipcode" name="weather_zipcode"
               value="{{ settings.weather_zipcode or '' }}" placeholder="e.g. 94598"
               maxlength="5" style="max-width: 8rem;">
        <small class="form-hint">US ZIP code. Automatically resolved to NWS grid coordinates. Takes precedence over manual grid below.</small>
    </div>

    <details style="margin-bottom: 1rem;">
        <summary style="cursor: pointer; color: var(--text-muted, #888); font-size: 0.875rem;">Manual NWS grid (advanced)</summary>
        <div style="margin-top: 0.75rem;">
            <div class="form-group">
                <label for="weather_office">NWS Office</label>
                <input type="text" id="weather_office" name="weather_office"
                       value="{{ settings.weather_office or '' }}" placeholder="e.g. OKX">
            </div>
            <div style="display: flex; gap: 1rem;">
                <div class="form-group" style="flex: 1;">
                    <label for="weather_gridx">Grid X</label>
                    <input type="number" id="weather_gridx" name="weather_gridx"
                           value="{{ settings.weather_gridx or '' }}">
                </div>
                <div class="form-group" style="flex: 1;">
                    <label for="weather_gridy">Grid Y</label>
                    <input type="number" id="weather_gridy" name="weather_gridy"
                           value="{{ settings.weather_gridy or '' }}">
                </div>
            </div>
        </div>
    </details>

    <h3 class="mb-4" style="margin-top: 2rem;">Calendar</h3>

    <div class="form-group">
        <label for="calendar_credentials_path">Google Service Account Credentials Path</label>
        <input type="text" id="calendar_credentials_path" name="calendar_credentials_path"
               value="{{ settings.calendar_credentials_path or '' }}" placeholder="/path/to/credentials.json">
    </div>

    <div class="form-group">
        <label for="calendar_id">Calendar ID</label>
        <input type="text" id="calendar_id" name="calendar_id"
               value="{{ settings.calendar_id or '' }}" placeholder="primary or email@example.com">
    </div>

    <h3 class="mb-4" style="margin-top: 2rem;">Discord Greeting</h3>

    <div class="form-group">
        <label for="discord_webhook_url">Webhook URL</label>
        <input type="text" id="discord_webhook_url" name="discord_webhook_url"
               value="{{ settings.discord_webhook_url or '' }}"
               placeholder="https://discord.com/api/webhooks/…">
        <small class="form-hint">Post a morning greeting with weather, birthdays, and exception days to a Discord channel.</small>
    </div>

    <div class="form-group">
        <label for="discord_greeting_time">Greeting Time</label>
        <input type="time" id="discord_greeting_time" name="discord_greeting_time"
               value="{{ settings.discord_greeting_time or '' }}">
        <small class="form-hint">When to send the greeting each day.</small>
    </div>

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

<div class="animate-in" style="margin-top: 1rem;">
    <button type="button" id="display-start-btn" class="btn btn-primary">Start Display</button>
    <button type="button" id="display-stop-btn" class="btn btn-secondary">Stop Display</button>
    <span id="display-status" style="margin-left: 0.5rem;"></span>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.getElementById('test-btn').addEventListener('click', async function() {
    const btn = this;
    const orig = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Playing\u2026';
    try {
        const resp = await fetch('{{ root_path }}/settings/test', {method: 'POST'});
        const data = await resp.json();
        if (data.ok) {
            btn.textContent = 'Done!';
        } else {
            btn.textContent = 'Error: ' + (data.error || 'Unknown');
        }
        setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 4000);
    } catch {
        btn.textContent = 'Error';
        setTimeout(() => { btn.textContent = orig; btn.disabled = false; }, 4000);
    }
});

(function() {
    const select = document.getElementById('default_airplay_device');
    const manual = document.getElementById('default_airplay_device_manual');

    select.addEventListener('change', function() {
        if (this.value === '__other__') {
            manual.style.display = '';
            manual.name = 'default_airplay_device';
            select.name = '';
            manual.focus();
        } else {
            manual.style.display = 'none';
            manual.name = '';
            select.name = 'default_airplay_device';
        }
    });
})();

(function() {
    const startBtn = document.getElementById('display-start-btn');
    const stopBtn = document.getElementById('display-stop-btn');
    const statusEl = document.getElementById('display-status');

    async function checkStatus() {
        try {
            const resp = await fetch('{{ root_path }}/settings/display/status');
            const data = await resp.json();
            statusEl.textContent = data.running ? 'Running' : 'Stopped';
        } catch { statusEl.textContent = ''; }
    }
    checkStatus();

    startBtn.addEventListener('click', async function() {
        startBtn.disabled = true;
        startBtn.textContent = 'Starting\u2026';
        try {
            await fetch('{{ root_path }}/settings/display/start', {method: 'POST'});
            statusEl.textContent = 'Running';
        } catch { statusEl.textContent = 'Error'; }
        startBtn.textContent = 'Start Display';
        startBtn.disabled = false;
    });

    stopBtn.addEventListener('click', async function() {
        stopBtn.disabled = true;
        stopBtn.textContent = 'Stopping\u2026';
        try {
            await fetch('{{ root_path }}/settings/display/stop', {method: 'POST'});
            statusEl.textContent = 'Stopped';
        } catch { statusEl.textContent = 'Error'; }
        stopBtn.textContent = 'Stop Display';
        stopBtn.disabled = false;
    });
})();
</script>
{% endblock %}