<!--
  Mudabbir Dashboard - Intentions Modal

  Changes (2026-02-03):
  - Extracted from monolithic index.html
  - Proactive task scheduling with cron presets
  - Create, toggle, run, delete intentions
-->
<!-- Intentions Modal -->
<div
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4"
x-show="showIntentions"
x-transition.opacity
@click.self="showIntentions = false"
>
<div class="w-full max-w-[700px] flex flex-col bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] max-h-[85vh] overflow-hidden" @click.stop>
    <div class="flex items-center justify-between px-6 py-5 border-b border-[var(--glass-border)] shrink-0">
    <h2 class="text-[17px] font-semibold">Intentions</h2>
    <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showIntentions = false"><i data-lucide="x" class="w-5 h-5"></i></button>
    </div>
    <div class="p-6 overflow-y-auto">
    <div class="flex flex-col gap-6">
        <!-- Add Intention Form -->
        <div class="bg-black/30 p-5 rounded-xl border border-[var(--glass-border)]">
        <h3 class="text-sm font-semibold mb-4 text-[var(--text-secondary)] uppercase tracking-wider">New Intention</h3>
        <div class="flex flex-col gap-3">
            <input
            type="text"
            class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40"
            x-model="intentionForm.name"
            placeholder="Name (e.g., Morning Standup)"
            />
            <textarea
            class="w-full bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40 min-h-[80px] resize-y"
            x-model="intentionForm.prompt"
            placeholder="Prompt (e.g., Good morning! What are your priorities today?)"
            ></textarea>
            <div class="flex flex-col md:flex-row gap-3">
                <div class="relative flex-1">
                    <select class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all" x-model="intentionForm.schedulePreset">
                    <option value="">Select schedule...</option>
                    <option value="every_minute">Every minute (testing)</option>
                    <option value="every_5_minutes">Every 5 minutes</option>
                    <option value="every_15_minutes">Every 15 minutes</option>
                    <option value="every_hour">Every hour</option>
                    <option value="every_morning_8am">Daily at 8am</option>
                    <option value="every_morning_9am">Daily at 9am</option>
                    <option value="weekday_morning_8am">Weekdays at 8am</option>
                    <option value="weekday_morning_9am">Weekdays at 9am</option>
                    <option value="daily_noon">Daily at noon</option>
                    <option value="every_evening_6pm">Daily at 6pm</option>
                    <option value="custom">Custom cron...</option>
                    </select>
                    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
                        <i data-lucide="chevron-down" class="w-4 h-4 text-white"></i>
                    </div>
                </div>
            <input
                x-show="intentionForm.schedulePreset === 'custom'"
                type="text"
                class="flex-1 bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/40"
                x-model="intentionForm.customCron"
                placeholder="0 9 * * 1-5"
            />
            </div>
            <div class="flex items-center gap-2 mt-1">
            <input type="checkbox" id="includeSystemStatus" x-model="intentionForm.includeSystemStatus" class="accent-[var(--accent-color)] w-4 h-4 cursor-pointer" />
            <label for="includeSystemStatus" class="text-sm text-white/60 cursor-pointer select-none">Include system status in prompt</label>
            </div>
            <button
            class="bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white py-3 rounded-[10px] text-[14px] font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
            @click="createIntention()"
            :disabled="!intentionForm.name.trim() || !intentionForm.prompt.trim() || !intentionForm.schedulePreset"
            >
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Add Intention</span>
            </button>
        </div>
        </div>

        <!-- Loading State -->
        <template x-if="intentionLoading && intentions.length === 0">
        <div class="p-8 text-center text-white/60 flex flex-col items-center gap-3">
            <i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i>
            <span>Loading...</span>
        </div>
        </template>

        <!-- Intentions List -->
        <template x-if="!intentionLoading || intentions.length > 0">
        <div class="flex flex-col border border-[var(--glass-border)] rounded-xl bg-black/20 overflow-hidden">
            <template x-for="intention in intentions" :key="intention.id">
            <div class="flex items-start gap-4 p-4 border-b border-[var(--glass-border)] hover:bg-white/5 transition-colors last:border-b-0" :class="{ 'opacity-50': !intention.enabled }">
                <button
                class="mt-1 transition-transform hover:scale-110 active:scale-95 shrink-0"
                @click="toggleIntention(intention.id)"
                :title="intention.enabled ? 'Disable' : 'Enable'"
                >
                <i x-show="intention.enabled" data-lucide="toggle-right" class="w-6 h-6 text-[var(--success-color)]"></i>
                <i x-show="!intention.enabled" data-lucide="toggle-left" class="w-6 h-6 text-white/30"></i>
                </button>
                <div class="flex-1 min-w-0">
                <p class="font-medium text-[15px] text-white" x-text="intention.name"></p>
                <p class="text-xs text-white/50 truncate mt-0.5" x-text="intention.prompt"></p>
                <div class="flex flex-wrap items-center gap-3 mt-2">
                    <span class="text-xs text-white/40 flex items-center gap-1.5 bg-white/5 px-2 py-0.5 rounded-md">
                    <i data-lucide="clock" class="w-3 h-3"></i>
                    <span x-text="intention.trigger?.schedule || 'No schedule'"></span>
                    </span>
                    <span x-show="intention.next_run" class="text-xs text-[var(--accent-color)] font-medium">
                    Next: <span x-text="formatNextRun(intention.next_run)"></span>
                    </span>
                </div>
                </div>
                <div class="flex items-center gap-1 shrink-0">
                <button
                    class="p-2 rounded-lg text-white/30 hover:text-[var(--success-color)] hover:bg-white/10 transition-colors"
                    @click="runIntention(intention.id)"
                    title="Run now"
                >
                    <i data-lucide="play" class="w-4 h-4"></i>
                </button>
                <button
                    class="p-2 rounded-lg text-white/30 hover:text-[var(--danger-color)] hover:bg-white/10 transition-colors"
                    @click="deleteIntention(intention.id)"
                    title="Delete"
                >
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                </button>
                </div>
            </div>
            </template>

            <!-- Empty State -->
            <template x-if="intentions.length === 0">
            <div class="p-12 text-center text-white/40 flex flex-col items-center gap-3">
                <i data-lucide="target" class="w-10 h-10 opacity-50"></i>
                <span class="font-medium">No intentions set</span>
                <span class="text-xs">Create one above to make Mudabbir proactive</span>
            </div>
            </template>
        </div>
        </template>
    </div>
    </div>
</div>
</div>
