@extends('layouts.base')
@section('content')
<div x-data="dummybotApp()" x-init="init()" class="min-h-screen flex flex-col">
        {{-- NAV --}}
        <nav class="border-b border-white/5 backdrop-blur-md sticky top-0 z-40">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
                <a href="{{ route('app') }}" class="flex items-center gap-2 text-lg font-bold shrink-0">
                    <span class="text-2xl">🤖</span>
                    <span class="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">DummyBot</span>
                </a>

                {{-- Buscador --}}
                <div class="hidden sm:flex flex-1 max-w-md mx-4">
                    <div class="relative w-full">
                        <input x-model="search" type="search" placeholder="Buscar... (pulsa /)"
                               class="input pl-9">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500">🔍</span>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <button @click="newTaskOpen = true" class="btn btn-primary text-sm" title="Nueva (n)">
                        <span>+</span> <span class="hidden sm:inline">Nueva</span>
                    </button>
                    <a href="{{ route('settings') }}" class="btn btn-ghost text-sm" title="Ajustes">⚙️</a>
                    <form method="POST" action="{{ route('logout') }}" class="inline">
                        @csrf
                        <button class="btn btn-ghost text-sm" title="Salir">↪</button>
                    </form>
                </div>
            </div>
        </nav>

        {{-- STATS --}}
        <div class="max-w-6xl mx-auto px-4 sm:px-6 pt-6 grid grid-cols-2 sm:grid-cols-4 gap-3">
            <template x-for="(s, i) in stats" :key="i">
                <div class="glass rounded-xl p-4">
                    <div class="text-xs text-zinc-500 uppercase tracking-wide" x-text="s.label"></div>
                    <div class="mt-1 text-2xl font-extrabold" :class="s.color" x-text="s.value"></div>
                </div>
            </template>
        </div>

        {{-- FILTROS --}}
        <div class="max-w-6xl mx-auto px-4 sm:px-6 pt-4 flex flex-wrap items-center gap-2">
            <button @click="filter = 'all'"
                    :class="filter === 'all' ? 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40' : 'btn-ghost'"
                    class="btn text-sm border border-white/5">Todas</button>
            <button @click="filter = 'pending'"
                    :class="filter === 'pending' ? 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40' : 'btn-ghost'"
                    class="btn text-sm border border-white/5">Pendientes</button>
            <button @click="filter = 'today'"
                    :class="filter === 'today' ? 'bg-purple-500/20 text-purple-300 border-purple-500/40' : 'btn-ghost'"
                    class="btn text-sm border border-white/5">Hoy</button>
            <button @click="filter = 'overdue'"
                    :class="filter === 'overdue' ? 'bg-red-500/20 text-red-300 border-red-500/40' : 'btn-ghost'"
                    class="btn text-sm border border-white/5">Vencidas</button>
            <button @click="filter = 'done'"
                    :class="filter === 'done' ? 'bg-green-500/20 text-green-300 border-green-500/40' : 'btn-ghost'"
                    class="btn text-sm border border-white/5">Hechas</button>

            <div class="ml-auto flex items-center gap-2">
                <select x-model="projectFilter" class="input text-sm py-1 w-auto">
                    <option value="">Todos los proyectos</option>
                    <template x-for="p in projects" :key="p.id">
                        <option :value="p.id" x-text="p.name"></option>
                    </template>
                </select>
            </div>
        </div>

        {{-- LISTA DE TAREAS --}}
        <main class="max-w-6xl mx-auto px-4 sm:px-6 py-6 flex-1 w-full">
            <template x-if="loading">
                <div class="text-center text-zinc-500 py-12">Cargando...</div>
            </template>
            <template x-if="!loading && filteredTasks.length === 0">
                <div class="text-center py-16 anim-in">
                    <div class="text-6xl mb-3">🎉</div>
                    <h2 class="text-xl font-bold mb-1">¡Nada que hacer!</h2>
                    <p class="text-zinc-500">Ponte a procrastinar con la conciencia tranquila.</p>
                </div>
            </template>

            <div class="space-y-2">
                <template x-for="t in filteredTasks" :key="t.id">
                    <div class="task-card anim-in flex items-start gap-3"
                         :class="t.done ? 'task-done' : ''">
                        <button @click="toggle(t)" class="shrink-0 mt-1 w-6 h-6 rounded-full border-2 transition flex items-center justify-center"
                                :class="t.done ? 'bg-green-500/80 border-green-500 text-white' : 'border-zinc-600 hover:border-indigo-400'">
                            <span x-show="t.done" class="text-xs">✓</span>
                        </button>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="font-semibold" x-text="t.title"></span>
                                <span class="chip" :class="'prio-' + t.priority" x-text="t.priority"></span>
                                <template x-if="t.project">
                                    <span class="chip" :style="'background:' + t.project.color + '20; color:' + t.project.color"
                                          x-text="t.project.name"></span>
                                </template>
                                <template x-for="tag in t.tags" :key="tag.id">
                                    <span class="chip text-xs" :style="'background:' + tag.color + '20; color:' + tag.color"
                                          x-text="'#' + tag.name"></span>
                                </template>
                            </div>
                            <p x-show="t.description" class="text-sm text-zinc-400 mt-1" x-text="t.description"></p>
                            <div class="flex items-center gap-3 text-xs text-zinc-500 mt-2">
                                <template x-if="t.estimate_min">
                                    <span>⏱ <span x-text="t.estimate_min"></span> min</span>
                                </template>
                                <template x-if="t.deadline">
                                    <span :class="isOverdue(t) ? 'text-red-400' : ''">📅 <span x-text="formatDate(t.deadline)"></span></span>
                                </template>
                                <template x-if="t.recurrence">
                                    <span>🔁 <span x-text="t.recurrence"></span></span>
                                </template>
                                <span x-show="t.done_at" class="text-green-400">✓ hecha <span x-text="ago(t.done_at)"></span></span>
                            </div>
                        </div>
                        <div class="flex items-center gap-1 shrink-0">
                            <button @click="snooze(t)" class="btn btn-ghost text-xs" title="Snooze 5 min (s)">💤</button>
                            <button @click="edit(t)" class="btn btn-ghost text-xs" title="Editar">✎</button>
                            <button @click="del(t)" class="btn btn-danger text-xs" title="Borrar">🗑</button>
                        </div>
                    </div>
                </template>
            </div>
        </main>

        {{-- MODAL NUEVA / EDITAR TAREA --}}
        <div x-show="newTaskOpen || editing" x-cloak
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
             @keydown.escape.window="closeModal()">
            <div class="glass rounded-2xl p-6 w-full max-w-lg anim-in" @click.outside="closeModal()">
                <h2 class="text-xl font-bold mb-4" x-text="editing ? 'Editar tarea' : 'Nueva tarea'"></h2>
                <form @submit.prevent="editing ? saveEdit() : create()" class="space-y-3">
                    <input x-model="form.title" type="text" placeholder="¿Qué tienes que hacer?" required maxlength="120" class="input" autofocus>

                    <textarea x-model="form.description" placeholder="Descripción (opcional)" class="input min-h-[80px]"></textarea>

                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="text-xs text-zinc-500">Prioridad</label>
                            <select x-model="form.priority" class="input">
                                <option value="low">Baja</option>
                                <option value="med" selected>Media</option>
                                <option value="high">Alta</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-xs text-zinc-500">Estimación (min)</label>
                            <input x-model.number="form.estimate_min" type="number" min="1" max="9999" class="input" placeholder="30">
                        </div>
                        <div>
                            <label class="text-xs text-zinc-500">Fecha límite</label>
                            <input x-model="form.deadline" type="datetime-local" class="input">
                        </div>
                        <div>
                            <label class="text-xs text-zinc-500">Repetir</label>
                            <select x-model="form.recurrence" class="input">
                                <option value="">Nunca</option>
                                <option value="daily">Diario</option>
                                <option value="weekly">Semanal</option>
                                <option value="monthly">Mensual</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label class="text-xs text-zinc-500">Proyecto</label>
                        <select x-model="form.project_id" class="input">
                            <option value="">Sin proyecto</option>
                            <template x-for="p in projects" :key="p.id">
                                <option :value="p.id" x-text="p.name"></option>
                            </template>
                        </select>
                    </div>

                    <div>
                        <label class="text-xs text-zinc-500">Tags (separados por coma)</label>
                        <input x-model="form.tagsInput" type="text" class="input" placeholder="cliente-x, urgente">
                    </div>

                    <div class="flex gap-2 pt-2">
                        <button type="submit" class="btn btn-primary flex-1 justify-center">
                            <span x-text="editing ? 'Guardar' : 'Crear'"></span>
                        </button>
                        <button type="button" @click="closeModal()" class="btn btn-ghost">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- TOAST --}}
        <div x-show="toast" x-cloak class="toast" x-text="toast"></div>
    </div>

    <style>[x-cloak]{display:none!important}</style>

    <script>
        function dummybotApp() {
            return {
                tasks: [],
                projects: [],
                search: '',
                filter: 'all',
                projectFilter: '',
                loading: true,
                newTaskOpen: false,
                editing: null,
                form: {},
                toast: '',
                csrf: document.querySelector('meta[name=csrf-token]').content,
                stats: [
                    {label: 'Pendientes', value: '—', color: 'text-yellow-300'},
                    {label: 'Hoy',        value: '—', color: 'text-indigo-300'},
                    {label: 'Hechas hoy', value: '—', color: 'text-green-300'},
                    {label: 'Vencidas',   value: '—', color: 'text-red-300'},
                ],

                async init() {
                    await this.loadAll();
                    this.bindKeys();
                    // Polling cada 15s
                    setInterval(() => this.loadAll(true), 15000);
                },

                bindKeys() {
                    document.addEventListener('keydown', (e) => {
                        if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
                        if (e.key === 'n') { this.newTaskOpen = true; this.resetForm(); }
                        if (e.key === '/') { e.preventDefault(); document.querySelector('input[type=search]')?.focus(); }
                        if (e.key === 'Escape') this.closeModal();
                        if (e.key === '1') this.filter = 'all';
                        if (e.key === '2') this.filter = 'pending';
                        if (e.key === '3') this.filter = 'today';
                        if (e.key === '4') this.filter = 'done';
                    });
                },

                async loadAll(silent = false) {
                    if (!silent) this.loading = true;
                    try {
                        const [t, p, s] = await Promise.all([
                            this.api('/api/tasks'),
                            this.api('/api/projects'),
                            this.api('/api/tasks/stats'),
                        ]);
                        this.tasks = t;
                        this.projects = p;
                        this.stats = [
                            {label: 'Pendientes', value: s.pending,    color: 'text-yellow-300'},
                            {label: 'Hoy',        value: s.today,      color: 'text-indigo-300'},
                            {label: 'Hechas hoy', value: s.done_today, color: 'text-green-300'},
                            {label: 'Vencidas',   value: s.overdue,    color: 'text-red-300'},
                        ];
                    } catch (err) {
                        this.flash('Error cargando: ' + err.message);
                    } finally {
                        this.loading = false;
                    }
                },

                get filteredTasks() {
                    let t = this.tasks;
                    if (this.search) {
                        const q = this.search.toLowerCase();
                        t = t.filter(x => x.title.toLowerCase().includes(q)
                            || (x.description || '').toLowerCase().includes(q)
                            || x.tags?.some(tag => tag.name.toLowerCase().includes(q)));
                    }
                    if (this.filter === 'pending') t = t.filter(x => !x.done && !this.isSnoozed(x));
                    if (this.filter === 'today')    t = t.filter(x => !x.done && this.isToday(x));
                    if (this.filter === 'overdue')  t = t.filter(x => !x.done && this.isOverdue(x));
                    if (this.filter === 'done')     t = t.filter(x => x.done);
                    if (this.projectFilter) t = t.filter(x => x.project_id == this.projectFilter);
                    return t;
                },

                isOverdue(t) { return t.deadline && new Date(t.deadline) < new Date() && !t.done; },
                isSnoozed(t) { return t.snooze_until && new Date(t.snooze_until) > new Date(); },
                isToday(t)   { return t.deadline && new Date(t.deadline).toDateString() === new Date().toDateString(); },

                formatDate(s) { return new Date(s).toLocaleString('es-ES', {day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit'}); },
                ago(s) {
                    const d = (Date.now() - new Date(s).getTime()) / 1000;
                    if (d < 60) return 'hace un momento';
                    if (d < 3600) return `hace ${Math.floor(d/60)} min`;
                    if (d < 86400) return `hace ${Math.floor(d/3600)} h`;
                    return `hace ${Math.floor(d/86400)} d`;
                },

                resetForm() {
                    this.form = {
                        title: '', description: '', priority: 'med',
                        estimate_min: null, deadline: '', project_id: '',
                        recurrence: '', tagsInput: '',
                    };
                    this.editing = null;
                },
                closeModal() { this.newTaskOpen = false; this.editing = null; },

                edit(t) {
                    this.editing = t;
                    this.form = {
                        title: t.title,
                        description: t.description || '',
                        priority: t.priority,
                        estimate_min: t.estimate_min,
                        deadline: t.deadline ? t.deadline.substring(0, 16) : '',
                        project_id: t.project_id || '',
                        recurrence: t.recurrence || '',
                        tagsInput: (t.tags || []).map(x => x.name).join(', '),
                    };
                },

                async create() {
                    try {
                        await this.api('/api/tasks', 'POST', this.payload());
                        this.flash('✓ Tarea creada');
                        this.closeModal();
                        this.resetForm();
                        await this.loadAll();
                    } catch (err) { this.flash('Error: ' + err.message); }
                },
                async saveEdit() {
                    try {
                        await this.api(`/api/tasks/${this.editing.id}`, 'PUT', this.payload());
                        this.flash('✓ Tarea actualizada');
                        this.closeModal();
                        await this.loadAll();
                    } catch (err) { this.flash('Error: ' + err.message); }
                },
                payload() {
                    return {
                        title: this.form.title,
                        description: this.form.description || null,
                        priority: this.form.priority,
                        estimate_min: this.form.estimate_min || null,
                        deadline: this.form.deadline ? new Date(this.form.deadline).toISOString() : null,
                        project_id: this.form.project_id || null,
                        recurrence: this.form.recurrence || null,
                        tags: this.form.tagsInput.split(',').map(s => s.trim()).filter(Boolean),
                    };
                },

                async toggle(t) {
                    if (t.done) {
                        await this.api(`/api/tasks/${t.id}/restore`, 'POST');
                    } else {
                        await this.api(`/api/tasks/${t.id}/done`, 'POST');
                        this.flash('✓ ¡Hecha!');
                    }
                    await this.loadAll();
                },
                async snooze(t) {
                    await this.api(`/api/tasks/${t.id}/snooze`, 'POST', {minutes: 5});
                    this.flash('💤 Pospuesta 5 min');
                    await this.loadAll();
                },
                async del(t) {
                    if (!confirm(`¿Borrar "${t.title}"?`)) return;
                    await this.api(`/api/tasks/${t.id}`, 'DELETE');
                    this.flash('🗑 Borrada');
                    await this.loadAll();
                },

                async api(url, method = 'GET', body = null) {
                    const opts = {
                        method,
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        credentials: 'same-origin',
                    };
                    if (body) {
                        opts.headers['Content-Type'] = 'application/json';
                        opts.body = JSON.stringify(body);
                    }
                    const r = await fetch(url, opts);
                    if (!r.ok) {
                        const txt = await r.text();
                        throw new Error(`${r.status}: ${txt.substring(0, 100)}`);
                    }
                    return r.json();
                },
                flash(msg) {
                    this.toast = msg;
                    setTimeout(() => this.toast = '', 2500);
                },
            };
        }
    </script>


@endsection