{% extends "base.html" %}
{% block content %}
<div class="p-4 md:p-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Scheduler</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage scheduled jobs — reminders, recurring tasks, and timed triggers</p>
        </div>
        <button onclick="openCreateModal()"
                class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            New Schedule
        </button>
    </div>

    <!-- Filter -->
    <div class="flex justify-between items-center gap-2 mb-4">
        <select id="filter-owner" onchange="loadSchedules()" class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 bg-white text-gray-700 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
            <option value="">All owners</option>
            <option value="agent">Agents</option>
            <option value="plugin">Plugins</option>
            <option value="user">User/Admin</option>
            <option value="system">System</option>
        </select>
        <button onclick="cleanupSchedules()" class="px-3 py-1.5 text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg hover:border-red-300 dark:hover:border-red-500 transition-colors flex items-center gap-1.5" title="Remove executed one-shot schedules">
            <svg class="w-4 h-4" 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>
            Clean up
        </button>
    </div>

    <!-- Table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm dark:text-gray-100">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-3 text-left">Name</th>
                        <th class="px-4 py-3 text-left">Owner</th>
                        <th class="px-4 py-3 text-left">Trigger</th>
                        <th class="px-4 py-3 text-left">Action</th>
                        <th class="px-4 py-3 text-left">Next Run</th>
                        <th class="px-4 py-3 text-left">Last Run</th>
                        <th class="px-4 py-3 text-center">Runs</th>
                        <th class="px-4 py-3 text-center">Status</th>
                        <th class="px-4 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody id="schedules-body" class="divide-y divide-gray-100 dark:divide-gray-700">
                </tbody>
            </table>
        </div>
    </div>

    <div id="empty-state" class="hidden text-center py-16 text-gray-400 dark:text-gray-500">
        <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <p class="text-lg font-medium">No schedules</p>
        <p class="text-sm mt-1">Create a schedule to get started</p>
    </div>
</div>

<!-- Create Modal -->
<div id="create-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/50" onclick="closeCreateModal()"></div>
    <div class="relative bg-white dark:bg-gray-800 rounded-xl w-[90%] max-w-[560px] shadow-xl max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">New Schedule</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
                    <input id="f-name" type="text" placeholder="e.g. Daily standup reminder" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Trigger Type</label>
                        <select id="f-trigger-type" onchange="onTriggerTypeChange()" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                            <option value="date">One-shot (Date)</option>
                            <option value="interval">Interval</option>
                            <option value="cron">Cron</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Action Type</label>
                        <select id="f-action-type" onchange="onActionTypeChange()" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                            <option value="static_message">Static Message</option>
                            <option value="agent_message">Agent Message (deprecated)</option>
                            <option value="session_prompt">Session Prompt</option>
                            <option value="emit_event">Emit Event</option>
                            <option value="webhook">Webhook</option>
                        </select>
                    </div>
                </div>

                <!-- Trigger Config -->
                <div id="trigger-date-fields">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Run Date</label>
                    <input id="f-run-date" type="datetime-local" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                </div>
                <div id="trigger-interval-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Interval</label>
                    <div class="grid grid-cols-2 gap-2">
                        <input id="f-interval-value" type="number" min="1" value="5" class="px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                        <select id="f-interval-unit" class="px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                            <option value="seconds">Seconds</option>
                            <option value="minutes" selected>Minutes</option>
                            <option value="hours">Hours</option>
                        </select>
                    </div>
                </div>
                <div id="trigger-cron-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cron Expression (JSON)</label>
                    <input id="f-cron" type="text" placeholder='{"hour": 9, "minute": 0, "day_of_week": "mon-fri"}' class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Keys: year, month, day, week, day_of_week, hour, minute, second</p>
                </div>

                <!-- Action Config -->
                <div id="action-agent-fields">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Agent ID</label>
                    <select id="f-agent-id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                    </select>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 mt-3">Message</label>
                    <textarea id="f-agent-msg" rows="3" placeholder="Message to send to the agent" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none resize-none"></textarea>
                </div>
                <div id="action-session-prompt-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Agent ID</label>
                    <select id="f-session-agent-id" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                    </select>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 mt-3">Prompt</label>
                    <textarea id="f-session-msg" rows="4" placeholder="Prompt to submit to the LLM session" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none resize-none"></textarea>
                </div>
                <div id="action-event-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Event Name</label>
                    <input id="f-event-name" type="text" placeholder="e.g. health_check" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 mt-3">Payload (JSON)</label>
                    <textarea id="f-event-payload" rows="2" placeholder="{}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none resize-none"></textarea>
                </div>
                <div id="action-webhook-fields" class="hidden">
                    <div class="grid grid-cols-4 gap-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Method</label>
                            <select id="f-wh-method" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                                <option>POST</option><option>GET</option><option>PUT</option>
                            </select>
                        </div>
                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">URL</label>
                            <input id="f-wh-url" type="text" placeholder="https://..." class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                        </div>
                    </div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 mt-3">Body (JSON)</label>
                    <textarea id="f-wh-body" rows="2" placeholder="{}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none resize-none"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Max Runs <span class="text-gray-400 font-normal">(optional, blank = unlimited)</span></label>
                    <input id="f-max-runs" type="number" min="1" placeholder="unlimited" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400 outline-none">
                </div>
            </div>
        </div>
        <div class="flex gap-3 justify-end px-6 pb-5">
            <button onclick="closeCreateModal()" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">Cancel</button>
            <button onclick="createSchedule()" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-md text-sm font-medium transition-colors">Create</button>
        </div>
    </div>
</div>

<script>
function esc(s) { const d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }

function fmtDate(iso) {
    if (!iso) return '<span class="text-gray-300 dark:text-gray-500">-</span>';
    try {
        const d = new Date(iso);
        return d.toLocaleString('id-ID', {day:'2-digit',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'});
    } catch { return esc(iso); }
}

function triggerLabel(s) {
    const c = s.trigger_config;
    if (s.trigger_type === 'date') return `Once @ ${fmtDate(c.run_date)}`;
    if (s.trigger_type === 'interval') {
        const parts = [];
        if (c.hours) parts.push(c.hours + 'h');
        if (c.minutes) parts.push(c.minutes + 'm');
        if (c.seconds) parts.push(c.seconds + 's');
        return `Every ${parts.join(' ') || JSON.stringify(c)}`;
    }
    if (s.trigger_type === 'cron') {
        const parts = [];
        if (c.day_of_week) parts.push(c.day_of_week);
        if (c.hour !== undefined) parts.push(String(c.hour).padStart(2,'0') + ':' + String(c.minute||0).padStart(2,'0'));
        return parts.length ? `Cron: ${parts.join(' ')}` : `Cron: ${JSON.stringify(c)}`;
    }
    return s.trigger_type;
}

function actionLabel(s) {
    if (s.action_type === 'agent_message' || s.action_type === 'static_message') return `Msg -> ${esc(s.action_config.agent_id || '?')}`;
    if (s.action_type === 'session_prompt') return `Session -> ${esc(s.action_config.agent_id || '?')}`;
    if (s.action_type === 'emit_event') return `Event: ${esc(s.action_config.event_name || '?')}`;
    if (s.action_type === 'webhook') return `${s.action_config.method||'POST'} ${esc((s.action_config.url||'').substring(0,30))}`;
    return s.action_type;
}

function runsLabel(s) {
    if (s.max_runs) return `${s.run_count}/${s.max_runs}`;
    return String(s.run_count);
}

async function loadSchedules() {
    const ownerType = document.getElementById('filter-owner').value;
    let url = '/api/schedules';
    if (ownerType) url += `?owner_type=${ownerType}`;
    const res = await fetch(url);
    const data = await res.json();
    const items = data.schedules || [];
    const tbody = document.getElementById('schedules-body');
    const empty = document.getElementById('empty-state');

    if (!items.length) {
        tbody.innerHTML = '';
        empty.classList.remove('hidden');
        return;
    }
    empty.classList.add('hidden');

    tbody.innerHTML = items.map(s => `
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${!s.enabled ? 'opacity-50' : ''}">
            <td class="px-4 py-3 font-medium text-gray-800 dark:text-gray-100">
                <button onclick="openDetailModal('${s.id}','${esc(s.name)}')" class="hover:text-indigo-600 hover:underline text-left">${esc(s.name)}</button>
            </td>
            <td class="px-4 py-3">
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${s.owner_type==='agent'?'bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300':s.owner_type==='plugin'?'bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300':'bg-gray-50 text-gray-700 dark:bg-gray-700 dark:text-gray-200'}">
                    ${esc(s.owner_type)}:${esc(s.owner_id)}
                </span>
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">${triggerLabel(s)}</td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">${actionLabel(s)}</td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">${fmtDate(s.next_run_at)}</td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">${fmtDate(s.last_run_at)}</td>
            <td class="px-4 py-3 text-center text-gray-500 dark:text-gray-400 text-xs">${runsLabel(s)}</td>
            <td class="px-4 py-3 text-center">
                <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${s.enabled?'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300':'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}">
                    ${s.enabled ? 'Active' : 'Disabled'}
                </span>
            </td>
            <td class="px-4 py-3 text-right whitespace-nowrap">
                <button onclick="toggleSchedule('${s.id}')" class="text-gray-400 hover:text-indigo-600 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition" title="${s.enabled?'Pause':'Resume'}">
                    ${s.enabled ? '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>' : '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'}
                </button>
                <button onclick="runNow('${s.id}')" class="text-gray-400 hover:text-green-600 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition" title="Run now">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </button>
                <button onclick="cancelSchedule('${s.id}','${esc(s.name)}')" class="text-gray-400 hover:text-red-600 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition" title="Delete">
                    <svg class="w-4 h-4" 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>
            </td>
        </tr>
    `).join('');
}

async function toggleSchedule(id) {
    await fetch(`/api/schedules/${id}/toggle`, {method:'POST'});
    loadSchedules();
}

async function runNow(id) {
    try {
        const res = await fetch(`/api/schedules/${id}/run-now`, {method:'POST'});
        const data = await res.json();
        if (data.error) {
            toast.show(data.error, 'error');
        } else {
            toast.show('Schedule triggered successfully', 'success');
            loadSchedules();
        }
    } catch (e) {
        toast.show('Failed to trigger schedule: ' + e.message, 'error');
    }
}

async function cancelSchedule(id, name) {
    const ok = await showConfirm({title:'Delete Schedule', message:`Delete "${name}"? This cannot be undone.`, confirmText:'Delete', danger:true});
    if (!ok) return;
    await fetch(`/api/schedules/${id}/cancel`, {method:'POST'});
    loadSchedules();
}

async function cleanupSchedules() {
    const ok = await showConfirm({title:'Clean Up Schedules', message:'Remove all executed one-shot schedules? This cannot be undone.', confirmText:'Clean up', danger:true});
    if (!ok) return;
    try {
        const res = await fetch('/api/schedules/cleanup', {method:'POST'});
        const data = await res.json();
        if (data.error) {
            toast.show(data.error, 'error');
        } else {
            toast.show(`Cleaned up ${data.cleaned} schedule(s)`, 'success');
            loadSchedules();
        }
    } catch (e) {
        toast.show('Cleanup failed: ' + e.message, 'error');
    }
}

// === Create Modal ===
function openCreateModal() {
    document.getElementById('create-modal').classList.remove('hidden');
    loadAgents();
    onTriggerTypeChange();
    onActionTypeChange();
}
function closeCreateModal() { document.getElementById('create-modal').classList.add('hidden'); }

function onTriggerTypeChange() {
    const t = document.getElementById('f-trigger-type').value;
    document.getElementById('trigger-date-fields').classList.toggle('hidden', t !== 'date');
    document.getElementById('trigger-interval-fields').classList.toggle('hidden', t !== 'interval');
    document.getElementById('trigger-cron-fields').classList.toggle('hidden', t !== 'cron');
}

function onActionTypeChange() {
    const a = document.getElementById('f-action-type').value;
    document.getElementById('action-agent-fields').classList.toggle('hidden', a !== 'agent_message' && a !== 'static_message');
    document.getElementById('action-session-prompt-fields').classList.toggle('hidden', a !== 'session_prompt');
    document.getElementById('action-event-fields').classList.toggle('hidden', a !== 'emit_event');
    document.getElementById('action-webhook-fields').classList.toggle('hidden', a !== 'webhook');
}

async function loadAgents() {
    const sel = document.getElementById('f-agent-id');
    if (sel.options.length > 1) return;
    try {
        const res = await fetch('/api/agents');
        const data = await res.json();
        const options = (data.agents || []).map(a =>
            `<option value="${esc(a.id)}">${esc(a.name || a.id)}</option>`
        ).join('');
        sel.innerHTML = options;
        const sel2 = document.getElementById('f-session-agent-id');
        if (sel2) sel2.innerHTML = options;
    } catch {}
}

async function createSchedule() {
    const name = document.getElementById('f-name').value.trim();
    if (!name) return alert('Name is required');

    const triggerType = document.getElementById('f-trigger-type').value;
    let triggerConfig = {};
    if (triggerType === 'date') {
        const v = document.getElementById('f-run-date').value;
        if (!v) return alert('Run date is required');
        triggerConfig = {run_date: v.replace('T', 'T')};
    } else if (triggerType === 'interval') {
        const val = parseInt(document.getElementById('f-interval-value').value);
        const unit = document.getElementById('f-interval-unit').value;
        if (!val || val < 1) return alert('Interval value must be >= 1');
        triggerConfig = {[unit]: val};
    } else if (triggerType === 'cron') {
        try { triggerConfig = JSON.parse(document.getElementById('f-cron').value); }
        catch { return alert('Invalid JSON for cron config'); }
    }

    const actionType = document.getElementById('f-action-type').value;
    let actionConfig = {};
    if (actionType === 'agent_message' || actionType === 'static_message') {
        actionConfig = {
            agent_id: document.getElementById('f-agent-id').value,
            message: document.getElementById('f-agent-msg').value.trim(),
        };
        if (!actionConfig.message) return alert('Message is required');
    } else if (actionType === 'session_prompt') {
        actionConfig = {
            agent_id: document.getElementById('f-session-agent-id').value,
            message: document.getElementById('f-session-msg').value.trim(),
        };
        if (!actionConfig.message) return alert('Prompt is required');
    } else if (actionType === 'emit_event') {
        actionConfig = {
            event_name: document.getElementById('f-event-name').value.trim(),
            payload: {},
        };
        try {
            const p = document.getElementById('f-event-payload').value.trim();
            if (p) actionConfig.payload = JSON.parse(p);
        } catch { return alert('Invalid JSON for payload'); }
        if (!actionConfig.event_name) return alert('Event name is required');
    } else if (actionType === 'webhook') {
        actionConfig = {
            method: document.getElementById('f-wh-method').value,
            url: document.getElementById('f-wh-url').value.trim(),
        };
        try {
            const b = document.getElementById('f-wh-body').value.trim();
            if (b) actionConfig.body = JSON.parse(b);
        } catch { return alert('Invalid JSON for body'); }
        if (!actionConfig.url) return alert('URL is required');
    }

    const maxRuns = document.getElementById('f-max-runs').value;

    const body = {
        name, trigger_type: triggerType, trigger_config: triggerConfig,
        action_type: actionType, action_config: actionConfig,
        owner_type: 'user', owner_id: 'admin',
    };
    if (maxRuns) body.max_runs = parseInt(maxRuns);

    const res = await fetch('/api/schedules', {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify(body),
    });
    const data = await res.json();
    if (data.error) return alert(data.error);
    closeCreateModal();
    loadSchedules();
}

loadSchedules();

// === Detail Modal ===
let _detailScheduleId = null;
let _detailScheduleData = null;
let _logsOffset = 0;
const _logsLimit = 50;

function openDetailModal(id, name) {
    _detailScheduleId = id;
    _detailScheduleData = null;
    _logsOffset = 0;
    document.getElementById('detail-modal-title').textContent = name;
    document.getElementById('detail-modal').classList.remove('hidden');
    switchDetailTab('details');
    loadScheduleDetail();
}

function closeDetailModal() {
    document.getElementById('detail-modal').classList.add('hidden');
    _detailScheduleId = null;
    _detailScheduleData = null;
}

function switchDetailTab(tab) {
    document.querySelectorAll('#detail-modal .tab-btn').forEach(b => {
        const active = b.dataset.tab === tab;
        b.classList.toggle('border-indigo-500', active);
        b.classList.toggle('text-indigo-600', active);
        b.classList.toggle('dark:text-indigo-400', active);
        b.classList.toggle('border-transparent', !active);
        b.classList.toggle('text-gray-500', !active);
        b.classList.toggle('dark:text-gray-400', !active);
        b.classList.toggle('hover:text-gray-700', !active);
        b.classList.toggle('dark:hover:text-gray-300', !active);
    });
    document.getElementById('detail-tab-details').classList.toggle('hidden', tab !== 'details');
    document.getElementById('detail-tab-logs').classList.toggle('hidden', tab !== 'logs');
    document.getElementById('detail-logs-footer').classList.toggle('hidden', tab !== 'logs');
    if (tab === 'logs' && _detailScheduleId) {
        loadLogs(true);
    }
}

async function loadScheduleDetail() {
    if (!_detailScheduleId) return;
    try {
        const res = await fetch(`/api/schedules/${_detailScheduleId}`);
        const data = await res.json();
        const s = data.schedule;
        if (!s) return;
        _detailScheduleData = s;
        renderScheduleDetail(s);
    } catch (e) {
        document.getElementById('detail-body').innerHTML = '<p class="text-red-500 p-4">Failed to load schedule details</p>';
    }
}

function renderScheduleDetail(s) {
    const container = document.getElementById('detail-body');

    // Trigger config human-readable
    let triggerInfo = '';
    if (s.trigger_type === 'date') {
        triggerInfo = `<span class="text-gray-700 dark:text-gray-300 font-medium">One-shot</span><div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Run at ${fmtDate(s.trigger_config.run_date)}</div>`;
    } else if (s.trigger_type === 'interval') {
        const parts = [];
        if (s.trigger_config.hours) parts.push(s.trigger_config.hours + ' hours');
        if (s.trigger_config.minutes) parts.push(s.trigger_config.minutes + ' minutes');
        if (s.trigger_config.seconds) parts.push(s.trigger_config.seconds + ' seconds');
        triggerInfo = `<span class="text-gray-700 dark:text-gray-300 font-medium">Interval</span><div class="mt-1 text-xs text-gray-500 dark:text-gray-400">Every ${parts.join(', ') || JSON.stringify(s.trigger_config)}</div>`;
    } else if (s.trigger_type === 'cron') {
        const c = s.trigger_config;
        const parts = [];
        if (c.day_of_week) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Days:</span> <span class="text-gray-700 dark:text-gray-300">${esc(c.day_of_week)}</span></div>`);
        if (c.day) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Day:</span> <span class="text-gray-700 dark:text-gray-300">${c.day}</span></div>`);
        if (c.hour !== undefined) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Time:</span> <span class="text-gray-700 dark:text-gray-300">${String(c.hour).padStart(2,'0')}:${String(c.minute||0).padStart(2,'0')}</span></div>`);
        if (c.month) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Month:</span> <span class="text-gray-700 dark:text-gray-300">${c.month}</span></div>`);
        if (c.year) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Year:</span> <span class="text-gray-700 dark:text-gray-300">${c.year}</span></div>`);
        if (c.week) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Week:</span> <span class="text-gray-700 dark:text-gray-300">${c.week}</span></div>`);
        if (c.second !== undefined) parts.push(`<div class="text-xs"><span class="text-gray-400 dark:text-gray-500 w-16 inline-block">Second:</span> <span class="text-gray-700 dark:text-gray-300">${c.second}</span></div>`);
        triggerInfo = `<span class="text-gray-700 dark:text-gray-300 font-medium">Cron</span>
            <div class="mt-1 text-xs font-mono text-gray-400 dark:text-gray-500 mb-2">${esc(JSON.stringify(s.trigger_config))}</div>
            ${parts.length ? '<div class="space-y-0.5">' + parts.join('') + '</div>' : ''}`;
    } else {
        triggerInfo = `<span class="text-gray-700 dark:text-gray-300">${esc(s.trigger_type)}</span>`;
    }

    // Action config human-readable
    let actionInfo = '';
    if (s.action_type === 'agent_message' || s.action_type === 'static_message') {
        const badgeLabel = s.action_type === 'static_message' ? 'Static Message' : 'Agent Message';
        actionInfo = `
            <div class="flex items-center gap-2 mb-2">
                <span class="text-xs px-2 py-0.5 rounded-full font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">${badgeLabel}</span>
            </div>
            <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Agent:</span> <span class="text-gray-700 dark:text-gray-300">${esc(s.action_config.agent_id || '?')}</span></div>
                <div class="mt-2"><span class="text-gray-400 dark:text-gray-500 font-medium">Message text:</span></div>
                <pre class="text-xs bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words mt-1 max-h-48 overflow-y-auto">${esc(s.action_config.message || '-')}</pre>
            </div>`;
    } else if (s.action_type === 'session_prompt') {
        actionInfo = `
            <div class="flex items-center gap-2 mb-2">
                <span class="text-xs px-2 py-0.5 rounded-full font-medium bg-indigo-50 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">Session Prompt</span>
            </div>
            <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Agent:</span> <span class="text-gray-700 dark:text-gray-300">${esc(s.action_config.agent_id || '?')}</span></div>
                <div class="mt-2"><span class="text-gray-400 dark:text-gray-500 font-medium">Prompt submitted to LLM:</span></div>
                <pre class="text-xs bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words mt-1 max-h-48 overflow-y-auto">${esc(s.action_config.message || '-')}</pre>
            </div>`;
    } else if (s.action_type === 'emit_event') {
        actionInfo = `
            <div class="flex items-center gap-2 mb-2">
                <span class="text-xs px-2 py-0.5 rounded-full font-medium bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">Emit Event</span>
            </div>
            <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Event:</span> <span class="text-gray-700 dark:text-gray-300">${esc(s.action_config.event_name || '?')}</span></div>
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Payload:</span> <code class="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-gray-700 dark:text-gray-300">${esc(JSON.stringify(s.action_config.payload || {}))}</code></div>
            </div>`;
    } else if (s.action_type === 'webhook') {
        actionInfo = `
            <div class="flex items-center gap-2 mb-2">
                <span class="text-xs px-2 py-0.5 rounded-full font-medium bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300">Webhook</span>
            </div>
            <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Method:</span> <code class="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-gray-700 dark:text-gray-300">${esc(s.action_config.method || 'POST')}</code></div>
                <div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">URL:</span> <span class="text-gray-700 dark:text-gray-300 break-all">${esc(s.action_config.url || '?')}</span></div>
                ${s.action_config.body ? `<div><span class="text-gray-400 dark:text-gray-500 w-12 inline-block">Body:</span> <code class="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-gray-700 dark:text-gray-300">${esc(JSON.stringify(s.action_config.body))}</code></div>` : ''}
            </div>`;
    } else {
        actionInfo = `<span class="text-gray-700 dark:text-gray-300">${esc(s.action_type)}</span>`;
    }

    container.innerHTML = `
        <div class="space-y-5">
            <!-- Owner & Status -->
            <div class="flex items-center gap-3 flex-wrap">
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${s.owner_type==='agent'?'bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300':s.owner_type==='plugin'?'bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300':'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200'}">
                    ${esc(s.owner_type)}:${esc(s.owner_id)}
                </span>
                <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${s.enabled?'bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300':'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}">
                    ${s.enabled ? 'Active' : 'Disabled'}
                </span>
            </div>

            <!-- Trigger -->
            <div>
                <h4 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Trigger</h4>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">${triggerInfo}</div>
            </div>

            <!-- Action -->
            <div>
                <h4 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Action</h4>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">${actionInfo}</div>
            </div>

            <!-- Schedule Info -->
            <div>
                <h4 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Schedule Info</h4>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
                    <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
                        <div><span class="text-gray-400 dark:text-gray-500">Max Runs:</span> <span class="text-gray-700 dark:text-gray-300 ml-1">${s.max_runs || 'Unlimited'}</span></div>
                        <div><span class="text-gray-400 dark:text-gray-500">Run Count:</span> <span class="text-gray-700 dark:text-gray-300 ml-1">${s.run_count}</span></div>
                        <div><span class="text-gray-400 dark:text-gray-500">Next Run:</span> <span class="text-gray-700 dark:text-gray-300 ml-1">${fmtDate(s.next_run_at)}</span></div>
                        <div><span class="text-gray-400 dark:text-gray-500">Last Run:</span> <span class="text-gray-700 dark:text-gray-300 ml-1">${fmtDate(s.last_run_at)}</span></div>
                        <div class="col-span-2"><span class="text-gray-400 dark:text-gray-500">Created:</span> <span class="text-gray-700 dark:text-gray-300 ml-1">${fmtDate(s.created_at)}</span></div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

async function loadLogs(reset) {
    if (!_detailScheduleId) return;
    if (reset) _logsOffset = 0;
    const res = await fetch(`/api/schedules/${_detailScheduleId}/logs?limit=${_logsLimit}&offset=${_logsOffset}`);
    const data = await res.json();
    const logs = data.logs || [];
    const tbody = document.getElementById('logs-tbody');
    const empty = document.getElementById('logs-empty');
    const loadMore = document.getElementById('logs-load-more');

    if (reset) tbody.innerHTML = '';

    if (!logs.length && reset) {
        empty.classList.remove('hidden');
        loadMore.classList.add('hidden');
        return;
    }
    empty.classList.add('hidden');

    logs.forEach(l => {
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-gray-50 dark:hover:bg-gray-700/50 border-t border-gray-100 dark:border-gray-700';
        const statusBadge = l.status === 'success'
            ? '<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 dark:bg-green-900/40 dark:text-green-300">success</span>'
            : '<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700 dark:bg-red-900/40 dark:text-red-300">error</span>';
        const durationTxt = l.duration_ms != null ? `${l.duration_ms}ms` : '-';
        const summaryTxt = esc(l.action_summary || '-');
        const errorRow = l.error_message
            ? `<tr class="bg-red-50 dark:bg-red-900/30 border-t border-red-100 dark:border-red-800"><td colspan="4" class="px-4 py-2 text-xs text-red-700 font-mono">${esc(l.error_message)}</td></tr>`
            : '';
        tr.innerHTML = `
            <td class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 font-mono whitespace-nowrap">${fmtDate(l.executed_at)}</td>
            <td class="px-4 py-2 text-center">${statusBadge}</td>
            <td class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 text-right">${durationTxt}</td>
            <td class="px-4 py-2 text-xs text-gray-600 dark:text-gray-300">${summaryTxt}</td>
        `;
        tbody.appendChild(tr);
        if (errorRow) {
            const errTr = document.createElement('tr');
            errTr.className = 'bg-red-50 dark:bg-red-900/30 border-t border-red-100 dark:border-red-800';
            errTr.innerHTML = `<td colspan="4" class="px-4 py-2 text-xs text-red-700 font-mono break-all">${esc(l.error_message)}</td>`;
            tbody.appendChild(errTr);
        }
    });

    _logsOffset += logs.length;
    loadMore.classList.toggle('hidden', logs.length < _logsLimit);
}

async function clearLogs() {
    if (!_detailScheduleId) return;
    const ok = await showConfirm({title:'Clear Logs', message:'Clear all execution logs for this schedule?', confirmText:'Clear', danger:true});
    if (!ok) return;
    await fetch(`/api/schedules/${_detailScheduleId}/logs`, {method:'DELETE'});
    _logsOffset = 0;
    document.getElementById('logs-tbody').innerHTML = '';
    document.getElementById('logs-empty').classList.remove('hidden');
    document.getElementById('logs-load-more').classList.add('hidden');
}
</script>

<!-- Detail Modal -->
<div id="detail-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/50" onclick="closeDetailModal()"></div>
    <div class="relative bg-white dark:bg-gray-800 rounded-xl w-[95%] max-w-[760px] shadow-xl max-h-[85vh] flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-700">
            <div>
                <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" id="detail-modal-title">Schedule Detail</h3>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Configuration and execution history</p>
            </div>
            <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-300 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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <!-- Tab Bar -->
        <div class="flex border-b border-gray-100 dark:border-gray-700 px-6">
            <button class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 border-indigo-500 text-indigo-600 dark:text-indigo-400 transition-colors" data-tab="details" onclick="switchDetailTab('details')">Details</button>
            <button class="tab-btn px-4 py-2.5 text-sm font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" data-tab="logs" onclick="switchDetailTab('logs')">Logs</button>
        </div>

        <!-- Tab: Details -->
        <div id="detail-tab-details" class="overflow-y-auto flex-1 p-6">
            <div id="detail-body" class="text-sm text-gray-500 dark:text-gray-400">
                <div class="flex items-center justify-center py-12">
                    <svg class="animate-spin w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                </div>
            </div>
        </div>

        <!-- Tab: Logs -->
        <div id="detail-tab-logs" class="hidden overflow-y-auto flex-1">
            <table class="w-full text-sm dark:text-gray-100">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider sticky top-0 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-4 py-2 text-left">Time</th>
                        <th class="px-4 py-2 text-center">Status</th>
                        <th class="px-4 py-2 text-right">Duration</th>
                        <th class="px-4 py-2 text-left">Summary</th>
                    </tr>
                </thead>
                <tbody id="logs-tbody"></tbody>
            </table>
            <div id="logs-empty" class="hidden text-center py-12 text-gray-400 dark:text-gray-500">
                <svg class="w-12 h-12 mx-auto mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                <p class="text-sm font-medium">No execution logs yet</p>
                <p class="text-xs mt-1">Logs will appear after the schedule runs</p>
            </div>
        </div>

        <!-- Footer (Logs tab actions) -->
        <div id="detail-logs-footer" class="hidden px-6 py-3 border-t border-gray-100 dark:border-gray-700 flex justify-between items-center">
            <button onclick="clearLogs()" class="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 transition">Clear logs</button>
            <button id="logs-load-more" onclick="loadLogs(false)" class="hidden text-sm text-indigo-600 hover:text-indigo-800 font-medium">Load more</button>
        </div>
    </div>
</div>
{% endblock %}