{% extends "base.html" %}

{% block title %}TaskWatch - 系统设置{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">系统设置</h1>
    <p class="mt-1 text-sm text-gray-500">配置 SMTP、报告和告警</p>
</div>

<form id="settingsForm" onsubmit="saveSettings(event)">
    <!-- SMTP Configuration -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">SMTP 配置</h3>
        </div>
        <div class="px-6 py-4 space-y-4">
            <div class="flex items-center">
                <input type="checkbox" id="smtpEnabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <label for="smtpEnabled" class="ml-2 block text-sm text-gray-900">启用 SMTP</label>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">SMTP 服务器</label>
                    <input type="text" id="smtpHost" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">端口</label>
                    <input type="number" id="smtpPort" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
            </div>
            <div class="flex items-center">
                <input type="checkbox" id="smtpTls" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <label for="smtpTls" class="ml-2 block text-sm text-gray-900">使用 TLS</label>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">用户名</label>
                    <input type="text" id="smtpUsername" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">密码</label>
                    <input type="password" id="smtpPassword" placeholder="********" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">发件人邮箱</label>
                    <input type="email" id="smtpFromAddr" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">收件人邮箱（逗号分隔）</label>
                    <input type="text" id="smtpToAddrs" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
            </div>
            <div>
                <button type="button" onclick="testMail()" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                    发送测试邮件
                </button>
            </div>
        </div>
    </div>

    <!-- Report Configuration -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">报告配置</h3>
        </div>
        <div class="px-6 py-4 space-y-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">日报发送时间</label>
                    <input type="time" id="dailyTime" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">周报发送星期</label>
                    <select id="weeklyDay" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                        <option value="monday">周一</option>
                        <option value="tuesday">周二</option>
                        <option value="wednesday">周三</option>
                        <option value="thursday">周四</option>
                        <option value="friday">周五</option>
                        <option value="saturday">周六</option>
                        <option value="sunday">周日</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">周报发送时间</label>
                <input type="time" id="weeklyTime" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
            </div>
        </div>
    </div>

    <!-- Alert Configuration -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">告警配置</h3>
        </div>
        <div class="px-6 py-4 space-y-4">
            <div class="flex items-center">
                <input type="checkbox" id="alertEnabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <label for="alertEnabled" class="ml-2 block text-sm text-gray-900">启用失败告警</label>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">告警冷却时间（分钟）</label>
                <input type="number" id="alertCooldown" class="mt-1 block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
            </div>
        </div>
    </div>

    <!-- Database & Logs -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-medium text-gray-900">数据库与日志</h3>
        </div>
        <div class="px-6 py-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">数据库路径</label>
                <input type="text" id="dbPath" readonly class="mt-1 block w-full rounded-md border-gray-200 bg-gray-50 shadow-sm sm:text-sm border px-3 py-2 text-gray-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">日志目录</label>
                <input type="text" id="logDir" readonly class="mt-1 block w-full rounded-md border-gray-200 bg-gray-50 shadow-sm sm:text-sm border px-3 py-2 text-gray-500">
            </div>
            <div>
                <button type="button" onclick="cleanLogs()" class="inline-flex items-center px-4 py-2 border border-red-300 text-sm font-medium rounded-md shadow-sm text-red-700 bg-white hover:bg-red-50">
                    清理日志（30天前）
                </button>
            </div>
        </div>
    </div>

    <!-- Save Button -->
    <div class="flex justify-end">
        <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
            保存配置
        </button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script>
    // Load current settings
    async function loadSettings() {
        const data = await apiCall('/api/settings');
        if (!data) return;

        const smtp = data.smtp || {};
        const report = data.report || {};
        const alert = data.alert || {};
        const core = data.core || {};

        document.getElementById('smtpEnabled').checked = smtp.enabled || false;
        document.getElementById('smtpHost').value = smtp.host || '';
        document.getElementById('smtpPort').value = smtp.port || 587;
        document.getElementById('smtpTls').checked = smtp.use_tls !== false;
        document.getElementById('smtpUsername').value = smtp.username || '';
        document.getElementById('smtpFromAddr').value = smtp.from_addr || '';
        document.getElementById('smtpToAddrs').value = (smtp.to_addrs || []).join(', ');

        document.getElementById('dailyTime').value = report.daily_time || '22:00';
        document.getElementById('weeklyDay').value = report.weekly_day || 'monday';
        document.getElementById('weeklyTime').value = report.weekly_time || '10:00';

        document.getElementById('alertEnabled').checked = alert.enabled !== false;
        document.getElementById('alertCooldown').value = alert.cooldown_minutes || 10;

        document.getElementById('dbPath').value = core.database_path || '';
        document.getElementById('logDir').value = core.log_dir || '';
    }

    async function saveSettings(e) {
        e.preventDefault();
        const data = {
            smtp: {
                enabled: document.getElementById('smtpEnabled').checked,
                host: document.getElementById('smtpHost').value,
                port: parseInt(document.getElementById('smtpPort').value),
                use_tls: document.getElementById('smtpTls').checked,
                username: document.getElementById('smtpUsername').value,
                from_addr: document.getElementById('smtpFromAddr').value,
                to_addrs: document.getElementById('smtpToAddrs').value.split(',').map(s => s.trim()).filter(Boolean),
            },
            report: {
                daily_time: document.getElementById('dailyTime').value,
                weekly_day: document.getElementById('weeklyDay').value,
                weekly_time: document.getElementById('weeklyTime').value,
            },
            alert: {
                enabled: document.getElementById('alertEnabled').checked,
                cooldown_minutes: parseInt(document.getElementById('alertCooldown').value),
            }
        };

        const pwd = document.getElementById('smtpPassword').value;
        if (pwd && pwd !== '********') {
            data.smtp.password = pwd;
        }

        const result = await apiCall('/api/settings', 'PUT', data);
        if (result) showToast('配置已保存');
    }

    async function testMail() {
        const result = await apiCall('/api/settings/test-mail', 'POST');
        if (result) {
            showToast(result.success ? '测试邮件已发送' : '发送失败', result.success ? 'success' : 'error');
        }
    }

    async function cleanLogs() {
        if (!confirm('确定要清理 30 天前的日志吗？')) return;
        const result = await apiCall('/api/settings/clean-logs', 'POST');
        if (result) showToast(`已清理 ${result.deleted} 条旧记录`);
    }

    // Load on page load
    loadSettings();
</script>
{% endblock %}