{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("tasks-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    <!-- Sidebar -->
    {% call components::sidebar("tasks", lang) %}

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("tasks-title", lang), username, lang) %}

        <div class="p-8">
            {% if is_demo %}
            <!-- Feature Lock Overlay for Trial -->
            <div class="glass rounded-xl border border-white/10 p-12 text-center">
                <div class="flex flex-col items-center justify-center gap-4">
                    <div class="w-20 h-20 rounded-full bg-slate-700/50 flex items-center justify-center">
                        <svg class="w-10 h-10 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-slate-300">{{ crate::i18n::t("tasks-locked-title", lang) }}</h3>
                    <p class="text-slate-400 max-w-md">{{ crate::i18n::t("tasks-locked-desc", lang) }}</p>
                </div>
            </div>
            {% else %}
            <!-- Task List -->
            <div class="glass rounded-xl border border-white/10 p-6 mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold">{{ crate::i18n::t("tasks-registered", lang) }}</h3>
                    <button onclick="openTaskModal()"
                        class="px-4 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        {{ crate::i18n::t("tasks-new", lang) }}
                    </button>
                </div>

                <div id="task-list" class="space-y-3">
                    <div class="text-center text-slate-400 py-8" id="empty-state">
                        {{ crate::i18n::t("tasks-empty", lang) }}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </main>
</div>

{% if !is_demo %}
<!-- Task Create/Edit Modal -->
<div id="task-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl p-8 border border-white/10 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-semibold" id="modal-title">{{ crate::i18n::t("tasks-new", lang) }}</h3>
            <div class="flex items-center gap-3">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="task-enabled" class="sr-only peer" checked>
                    <div
                        class="w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600">
                    </div>
                </label>
                <span class="text-sm text-slate-300">{{ crate::i18n::t("common-enabled", lang) }}</span>
            </div>
        </div>

        <form id="task-form" class="space-y-4">
            <input type="hidden" id="task-id" value="">

            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-name", lang)
                    }}</label>
                <input type="text" id="task-name" required
                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm"
                    placeholder='{{ crate::i18n::t("tasks-name-placeholder", lang) }}'>
            </div>

            <!-- コマンド - カスタムドロップダウン -->
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-command", lang)
                    }}</label>
                <div class="relative" id="command-dropdown">
                    <input type="hidden" id="task-command" value="wol">
                    <button type="button" onclick="toggleDropdown('command')"
                        class="flex items-center justify-between gap-2 w-full px-4 py-2 bg-slate-800/80 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                        <span id="command-label" class="truncate">{{ crate::i18n::t("tasks-command-wol", lang) }}</span>
                        <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                            </path>
                        </svg>
                    </button>
                    <div id="command-menu"
                        class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20">
                        <button type="button" onclick="selectCommand('wol', i18n.commandWol)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-command-wol", lang) }}</button>
                        <button type="button" onclick="selectCommand('shutdown', i18n.commandShutdown)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-command-shutdown", lang) }}</button>
                        <button type="button" onclick="selectCommand('restart', i18n.commandRestart)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-command-restart", lang) }}</button>
                        <button type="button" onclick="selectCommand('autologin', i18n.commandAutologin)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-command-autologin", lang) }}</button>
                    </div>
                </div>
            </div>

            <!-- 対象グループ - カスタムドロップダウン -->
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-target-group",
                    lang) }}</label>
                <div class="relative" id="target-dropdown">
                    <input type="hidden" id="task-target"
                        value="{% if !groups.is_empty() %}{{ groups[0].id }}{% endif %}">
                    <button type="button" onclick="toggleDropdown('target')"
                        class="flex items-center justify-between gap-2 w-full px-4 py-2 bg-slate-800/80 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                        <span id="target-label" class="truncate">{% if !groups.is_empty() %}{{ groups[0].name }}{% else
                            %}{{ crate::i18n::t("tasks-no-group", lang) }}{% endif %}</span>
                        <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                            </path>
                        </svg>
                    </button>
                    <div id="target-menu"
                        class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20 max-h-60 overflow-y-auto">
                        {% for group in groups %}
                        <button type="button" onclick="selectTarget('{{ group.id }}', '{{ group.name }}')"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200 truncate">{{
                            group.name }}</button>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- スケジュール種別 - カスタムドロップダウン -->
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-schedule-type",
                    lang) }}</label>
                <div class="relative" id="schedule-type-dropdown">
                    <input type="hidden" id="task-schedule-type" value="weekly">
                    <button type="button" onclick="toggleDropdown('schedule-type')"
                        class="flex items-center justify-between gap-2 w-full px-4 py-2 bg-slate-800/80 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                        <span id="schedule-type-label" class="truncate">{{ crate::i18n::t("tasks-schedule-weekly", lang)
                            }}</span>
                        <svg class="w-4 h-4 text-slate-400 flex-shrink-0" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
                            </path>
                        </svg>
                    </button>
                    <div id="schedule-type-menu"
                        class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20">
                        <button type="button" onclick="selectScheduleType('weekly', i18n.scheduleWeekly)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-schedule-weekly", lang) }}</button>
                        <button type="button" onclick="selectScheduleType('oneshot', i18n.scheduleOneshot)"
                            class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">{{
                            crate::i18n::t("tasks-schedule-oneshot", lang) }}</button>
                    </div>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-time", lang)
                    }}</label>
                <input type="time" id="task-time" required
                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
            </div>

            <div id="weekly-fields">
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-days", lang)
                    }}</label>
                <div class="flex flex-wrap gap-2">
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="1" checked class="rounded"> {{
                        crate::i18n::t("tasks-day-mon", lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="2" checked class="rounded"> {{
                        crate::i18n::t("tasks-day-tue", lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="3" checked class="rounded"> {{
                        crate::i18n::t("tasks-day-wed", lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="4" checked class="rounded"> {{
                        crate::i18n::t("tasks-day-thu", lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="5" checked class="rounded"> {{
                        crate::i18n::t("tasks-day-fri", lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="6" class="rounded"> {{ crate::i18n::t("tasks-day-sat",
                        lang) }}
                    </label>
                    <label
                        class="flex items-center gap-2 bg-slate-700/50 px-3 py-1 rounded cursor-pointer hover:bg-slate-600/50 transition">
                        <input type="checkbox" name="days" value="7" class="rounded"> {{ crate::i18n::t("tasks-day-sun",
                        lang) }}
                    </label>
                </div>
            </div>

            <div id="oneshot-fields" class="hidden">
                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("tasks-date", lang)
                    }}</label>
                <input type="date" id="task-date"
                    class="w-full px-4 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
            </div>


            <div class="flex gap-4 pt-4">
                <button type="button" onclick="closeTaskModal()"
                    class="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                    {{ crate::i18n::t("common-cancel", lang) }}
                </button>
                <button type="submit"
                    class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                    {{ crate::i18n::t("common-save", lang) }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Confirm Delete Modal -->
<div id="confirm-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div
        class="relative bg-slate-900 border border-white/10 rounded-2xl p-6 w-full max-w-sm shadow-2xl transform transition-all duration-200">
        <h3 class="text-xl font-bold text-white mb-2">{{ crate::i18n::t("common-confirm", lang) }}</h3>
        <p class="text-slate-300 mb-6" id="confirm-message">{{ crate::i18n::t("tasks-delete-confirm", lang) }}</p>

        <div class="flex gap-3">
            <button onclick="closeConfirmModal()"
                class="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-slate-200 font-medium transition-colors">
                {{ crate::i18n::t("common-cancel", lang) }}
            </button>
            <button onclick="executeDelete()"
                class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-500 rounded-lg text-white font-medium transition-colors shadow-lg shadow-red-500/20">
                {{ crate::i18n::t("common-confirm", lang) }}
            </button>
        </div>
    </div>
</div>

<script>
    // i18n strings from server
    const i18n = {
        dayMon: '{{ crate::i18n::t("tasks-day-mon", lang) }}',
        dayTue: '{{ crate::i18n::t("tasks-day-tue", lang) }}',
        dayWed: '{{ crate::i18n::t("tasks-day-wed", lang) }}',
        dayThu: '{{ crate::i18n::t("tasks-day-thu", lang) }}',
        dayFri: '{{ crate::i18n::t("tasks-day-fri", lang) }}',
        daySat: '{{ crate::i18n::t("tasks-day-sat", lang) }}',
        daySun: '{{ crate::i18n::t("tasks-day-sun", lang) }}',
        commandWol: '{{ crate::i18n::t("tasks-command-wol", lang) }}',
        commandShutdown: '{{ crate::i18n::t("tasks-command-shutdown", lang) }}',
        commandRestart: '{{ crate::i18n::t("tasks-command-restart", lang) }}',
        commandAutologin: '{{ crate::i18n::t("tasks-command-autologin", lang) }}',
        scheduleWeekly: '{{ crate::i18n::t("tasks-schedule-weekly", lang) }}',
        scheduleOneshot: '{{ crate::i18n::t("tasks-schedule-oneshot", lang) }}',
        enabled: '{{ crate::i18n::t("tasks-enabled", lang) }}',
        disabled: '{{ crate::i18n::t("tasks-disabled", lang) }}',
        target: '{{ crate::i18n::t("tasks-target", lang) }}',
        created: '{{ crate::i18n::t("tasks-created", lang) }}',
        updated: '{{ crate::i18n::t("tasks-updated", lang) }}',
        deleted: '{{ crate::i18n::t("tasks-deleted", lang) }}',
        createFailed: '{{ crate::i18n::t("tasks-create-failed", lang) }}',
        updateFailed: '{{ crate::i18n::t("tasks-update-failed", lang) }}',
        deleteFailed: '{{ crate::i18n::t("tasks-delete-failed", lang) }}',
        deleteConfirm: '{{ crate::i18n::t("tasks-delete-confirm", lang) }}',
        newTask: '{{ crate::i18n::t("tasks-new", lang) }}',
        editTask: '{{ crate::i18n::t("tasks-edit", lang) }}',
        empty: '{{ crate::i18n::t("tasks-empty", lang) }}'
    };

    const dayNames = ['', i18n.dayMon, i18n.dayTue, i18n.dayWed, i18n.dayThu, i18n.dayFri, i18n.daySat, i18n.daySun];
    const commandNames = {
        'wol': i18n.commandWol,
        'shutdown': i18n.commandShutdown,
        'restart': i18n.commandRestart,
        'autologin': i18n.commandAutologin
    };
    const scheduleTypeNames = {
        'weekly': i18n.scheduleWeekly,
        'oneshot': i18n.scheduleOneshot
    };

    // Group data from server
    const groups = [
        {% for group in groups %}
    { id: '{{ group.id }}', name: '{{ group.name }}' },
    {% endfor %}
    ];

    let currentEditId = null;

    // Dropdown management
    function toggleDropdown(name) {
        const menu = document.getElementById(`${name}-menu`);
        document.querySelectorAll('[id$="-menu"]').forEach(m => {
            if (m.id !== `${name}-menu`) m.classList.add('hidden');
        });
        menu.classList.toggle('hidden');
    }

    function selectCommand(value, label) {
        document.getElementById('task-command').value = value;
        document.getElementById('command-label').textContent = label;
        document.getElementById('command-menu').classList.add('hidden');
    }

    function selectTarget(value, label) {
        document.getElementById('task-target').value = value;
        document.getElementById('target-label').textContent = label;
        document.getElementById('target-menu').classList.add('hidden');
    }

    function selectScheduleType(value, label) {
        document.getElementById('task-schedule-type').value = value;
        document.getElementById('schedule-type-label').textContent = label;
        document.getElementById('schedule-type-menu').classList.add('hidden');
        toggleScheduleFields();
    }

    document.addEventListener('click', function (e) {
        if (!e.target.closest('[id$="-dropdown"]')) {
            document.querySelectorAll('[id$="-menu"]').forEach(m => m.classList.add('hidden'));
        }
    });

    async function loadTasks() {
        try {
            const response = await fetch('/admin/api/tasks');
            const data = await response.json();
            const container = document.getElementById('task-list');

            if (data.ok && data.tasks && data.tasks.length > 0) {
                renderTasks(data.tasks);
            } else {
                container.innerHTML = `<div class="text-center text-slate-400 py-8" id="empty-state">${i18n.empty}</div>`;
            }
        } catch (error) {
            console.error('Failed to load tasks:', error);
        }
    }

    function renderTasks(tasks) {
        const container = document.getElementById('task-list');
        let html = '';

        for (const task of tasks) {
            const enabledClass = task.enabled ? 'bg-green-500/20 text-green-400' : 'bg-slate-600/50 text-slate-400';
            const enabledText = task.enabled ? i18n.enabled : i18n.disabled;
            const daysStr = task.schedule_type === 'weekly'
                ? (task.schedule_days || []).map(d => dayNames[d]).join('・')
                : task.schedule_date || '';
            const groupName = groups.find(g => g.id === task.target_id)?.name || task.target_id;
            const cmdDisplay = (commandNames[task.command] || task.command).replace(' (Wake-on-LAN)', '');

            html += `
            <div class="flex items-center justify-between p-4 rounded-lg bg-white/5 hover:bg-white/10 transition">
                <div class="flex items-center gap-4 cursor-pointer flex-1" onclick="editTask('${task.id}')">
                    <div class="w-10 h-10 rounded-lg bg-slate-700/50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">${task.name}</div>
                        <div class="text-sm text-slate-400">
                            ${cmdDisplay} | ${task.schedule_time?.substring(0, 5) || ''} | ${daysStr}
                        </div>
                        <div class="text-xs text-slate-500">${i18n.target}: ${groupName}</div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <label class="relative inline-flex items-center cursor-pointer" onclick="event.stopPropagation()">
                        <input type="checkbox" class="sr-only peer task-toggle" data-task-id="${task.id}" ${task.enabled ? 'checked' : ''} onchange="toggleTask('${task.id}')">
                        <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                    </label>
                    <button onclick="event.stopPropagation(); editTask('${task.id}')" class="text-slate-400 hover:text-cyan-400 p-2 transition" title="${i18n.editTask}">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                    </button>

                    <button onclick="event.stopPropagation(); deleteTask('${task.id}')" class="text-slate-400 hover:text-red-400 p-2 transition">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
            `;
        }

        container.innerHTML = html;
    }

    function openTaskModal() {
        currentEditId = null;
        document.getElementById('modal-title').textContent = i18n.newTask;
        document.getElementById('task-id').value = '';
        document.getElementById('task-name').value = '';
        document.getElementById('task-time').value = '';
        document.getElementById('task-date').value = '';
        document.getElementById('task-enabled').checked = true;

        selectCommand('wol', i18n.commandWol);
        if (groups.length > 0) {
            selectTarget(groups[0].id, groups[0].name);
        }
        selectScheduleType('weekly', i18n.scheduleWeekly);

        document.querySelectorAll('input[name="days"]').forEach((cb, i) => {
            cb.checked = i < 5;
        });

        document.getElementById('task-modal').classList.remove('hidden');
    }

    async function editTask(id) {
        try {
            const response = await fetch('/admin/api/tasks');
            const data = await response.json();
            const task = data.tasks?.find(t => t.id === id);
            if (!task) return;

            currentEditId = id;
            document.getElementById('modal-title').textContent = i18n.editTask;
            document.getElementById('task-id').value = id;
            document.getElementById('task-name').value = task.name;
            document.getElementById('task-time').value = task.schedule_time?.substring(0, 5) || '';
            document.getElementById('task-date').value = task.schedule_date || '';

            selectCommand(task.command, commandNames[task.command] || task.command);
            const targetGroup = groups.find(g => g.id === task.target_id);
            if (targetGroup) {
                selectTarget(targetGroup.id, targetGroup.name);
            }
            selectScheduleType(task.schedule_type, scheduleTypeNames[task.schedule_type] || task.schedule_type);

            const taskDays = task.schedule_days || [];
            document.querySelectorAll('input[name="days"]').forEach(cb => {
                cb.checked = taskDays.includes(parseInt(cb.value));
            });

            document.getElementById('task-enabled').checked = task.enabled;

            document.getElementById('task-modal').classList.remove('hidden');
        } catch (error) {
            console.error('Failed to load task for editing:', error);
        }
    }

    function closeTaskModal() {
        document.getElementById('task-modal').classList.add('hidden');
        currentEditId = null;
    }

    function toggleScheduleFields() {
        const type = document.getElementById('task-schedule-type').value;
        document.getElementById('weekly-fields').classList.toggle('hidden', type !== 'weekly');
        document.getElementById('oneshot-fields').classList.toggle('hidden', type !== 'oneshot');
    }

    document.getElementById('task-form').addEventListener('submit', async function (e) {
        e.preventDefault();

        const days = Array.from(document.querySelectorAll('input[name="days"]:checked')).map(cb => parseInt(cb.value));
        const isEditing = !!currentEditId;

        const payload = {
            name: document.getElementById('task-name').value,
            command: document.getElementById('task-command').value,
            target_type: 'group',
            target_id: document.getElementById('task-target').value,
            schedule_type: document.getElementById('task-schedule-type').value,
            schedule_time: document.getElementById('task-time').value,
            schedule_days: days.length > 0 ? days : null,
            schedule_date: document.getElementById('task-date').value || null,
            enabled: document.getElementById('task-enabled').checked
        };

        try {
            let url = '/admin/api/tasks';
            let method = 'POST';

            if (isEditing) {
                url = `/admin/api/tasks/${currentEditId}`;
                method = 'PUT';
            }

            const response = await fetch(url, {
                method: method,
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const result = await response.json();

            if (result.ok) {
                // If creating new task and disabled, we need to explicitly disable it
                // because create API defaults to enabled and doesn't accept enabled field
                if (!isEditing && !document.getElementById('task-enabled').checked && result.task) {
                    await fetch(`/admin/api/tasks/${result.task.id}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ enabled: false })
                    });
                }
                // If editing, use normal update logic which already includes enabled field if we added it?
                // Wait, the payload below didn't include 'enabled'. Let's fix that.

                closeTaskModal();
                await loadTasks();
                showNotification(isEditing ? i18n.updated : i18n.created, 'success');
            } else {
                showNotification((isEditing ? i18n.updateFailed : i18n.createFailed) + ': ' + (result.message || ''), 'error');
            }
        } catch (error) {
            showNotification(isEditing ? i18n.updateFailed : i18n.createFailed, 'error');
        }
    });

    async function toggleTask(id) {
        try {
            const response = await fetch(`/admin/api/tasks/${id}/toggle`, { method: 'POST' });
            const result = await response.json();
            if (result.ok) {
                await loadTasks();
            }
        } catch (error) {
            console.error('Failed to toggle task:', error);
        }
    }

    async function deleteTask(id) {
        showConfirmModal(id);
    }

    let pendingDeleteId = null;

    function showConfirmModal(id) {
        pendingDeleteId = id;
        document.getElementById('confirm-modal').classList.remove('hidden');
    }

    function closeConfirmModal() {
        pendingDeleteId = null;
        document.getElementById('confirm-modal').classList.add('hidden');
    }

    async function executeDelete() {
        if (!pendingDeleteId) return;
        const id = pendingDeleteId;

        // Hide modal but keep ID until finished
        document.getElementById('confirm-modal').classList.add('hidden');

        try {
            const response = await fetch(`/admin/api/tasks/${id}`, { method: 'DELETE' });
            const result = await response.json();
            if (result.ok) {
                await loadTasks();
                showNotification(i18n.deleted, 'success');
            } else {
                showNotification(i18n.deleteFailed, 'error');
            }
        } catch (error) {
            showNotification(i18n.deleteFailed, 'error');
        }

        pendingDeleteId = null;
    }

    document.addEventListener('DOMContentLoaded', loadTasks);
</script>
{% endif %}
{% endblock %}