@extends('layouts.app')

@section('title', 'My Tasks - ' . config('app.name'))

@section('header-left')
    <div class="flex items-center gap-4">
        <h1 class="text-lg font-semibold text-gray-900">My Tasks</h1>
        <div x-data="todayTimeSummary({{ Js::from(['apiBase' => url('/api/v1')]) }})" x-init="fetchSummary()" class="text-sm text-gray-600">
            <span x-show="!loading">Today: <span x-text="formatMins(totalMinutes)"></span> logged</span>
        </div>
    </div>
@endsection

@section('content')
    @php
        $apiUrl = url('/api/v1/tasks/my') . ($_GET ? '?' . http_build_query(request()->query()) : '');
    @endphp

    <x-task-filter-bar
        :base-url="route('my-tasks.index')"
        :show-assignee="false"
        :workspace-users="collect()"
        :workspace-tags="$workspaceTags"
        :filter-params="$filterParams"
    />

    <div class="mb-3 flex flex-wrap items-center gap-2">
        <x-save-filter-button :route="'my-tasks'" :filters="request()->query()" />
    </div>
    {{-- View toggle: List | Calendar --}}
    <div class="mb-3 flex gap-1 rounded-lg border border-gray-200 bg-gray-100 p-1">
        <a href="{{ route('my-tasks.index', array_merge(request()->query(), ['view' => 'list'])) }}" class="rounded-md px-3 py-1.5 text-sm font-medium {{ ($currentView ?? 'list') === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900' }}">List</a>
        <a href="{{ route('my-tasks.index', array_merge(request()->query(), ['view' => 'calendar'])) }}" class="rounded-md px-3 py-1.5 text-sm font-medium {{ ($currentView ?? 'list') === 'calendar' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900' }}">Calendar</a>
    </div>

    @if (($currentView ?? 'list') === 'list')
    <div
        class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
        x-data="myTasksManager({{ Js::from([
            'apiUrl' => $apiUrl,
            'apiBase' => url('/api/v1'),
            'csrf' => csrf_token(),
        ]) }})"
        x-init="fetchTasks()"
    >
        <div x-show="loading" class="py-8 text-center text-gray-500">Loading tasks…</div>
        <template x-if="!loading && grouped">
            <div class="space-y-6">
                <template x-for="(tasks, sectionKey) in grouped" :key="sectionKey">
                    <div x-show="tasks.length">
                        <h3
                            class="mb-2 text-sm font-semibold rounded px-2 py-1"
                            :class="{
                                'bg-red-100 text-red-800': sectionKey === 'overdue',
                                'bg-yellow-100 text-yellow-800': sectionKey === 'today',
                                'bg-blue-100 text-blue-800': sectionKey === 'this_week',
                                'bg-gray-100 text-gray-800': sectionKey === 'upcoming',
                                'bg-gray-100 text-gray-600': sectionKey === 'no_due_date',
                            }"
                            x-text="sectionLabels[sectionKey]"
                        ></h3>
                        <ul class="space-y-1">
                            <template x-for="task in tasks" :key="task.id">
                                <li class="flex items-center gap-2 rounded py-1.5 px-2 hover:bg-gray-100/80 group">
                                    <div class="relative shrink-0" x-data="{ statusOpen: false }">
                                        <button type="button" @click="statusOpen = !statusOpen" class="flex h-6 w-6 items-center justify-center rounded-full border-2 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" :class="task.status === 'done' ? 'border-green-500 bg-green-500 text-white' : 'border-gray-300 text-gray-400 hover:border-gray-400'" :title="'Status: ' + (task.status || 'todo').replace('_',' ')">
                                            <svg x-show="task.status === 'done'" class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                            <span x-show="task.status !== 'done'" class="block h-2 w-2 rounded-full bg-current"></span>
                                        </button>
                                        <div x-show="statusOpen" x-cloak @click.outside="statusOpen = false" class="absolute left-0 top-full z-20 mt-1 min-w-[10rem] rounded-md border border-gray-200 bg-white py-1 shadow-lg">
                                            <button type="button" @click="setTaskStatus(task, 'todo'); statusOpen = false" class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-gray-50" :class="task.status === 'todo' ? 'bg-indigo-50 text-indigo-700' : 'text-gray-700'">
                                                <span class="flex h-4 w-4 items-center justify-center rounded-full border-2" :class="task.status === 'todo' ? 'border-indigo-600 bg-indigo-600' : 'border-gray-300'"><svg x-show="task.status === 'todo'" class="h-2.5 w-2.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></span>
                                                To do
                                            </button>
                                            <button type="button" @click="setTaskStatus(task, 'in_progress'); statusOpen = false" class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-gray-50" :class="task.status === 'in_progress' ? 'bg-indigo-50 text-indigo-700' : 'text-gray-700'">
                                                <span class="flex h-4 w-4 items-center justify-center rounded-full border-2" :class="task.status === 'in_progress' ? 'border-indigo-600 bg-indigo-600' : 'border-gray-300'"><svg x-show="task.status === 'in_progress'" class="h-2.5 w-2.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></span>
                                                In progress
                                            </button>
                                            <button type="button" @click="setTaskStatus(task, 'review'); statusOpen = false" class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-gray-50" :class="task.status === 'review' ? 'bg-indigo-50 text-indigo-700' : 'text-gray-700'">
                                                <span class="flex h-4 w-4 items-center justify-center rounded-full border-2" :class="task.status === 'review' ? 'border-indigo-600 bg-indigo-600' : 'border-gray-300'"><svg x-show="task.status === 'review'" class="h-2.5 w-2.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></span>
                                                Review
                                            </button>
                                            <button type="button" @click="setTaskStatus(task, 'done'); statusOpen = false" class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-gray-50" :class="task.status === 'done' ? 'bg-indigo-50 text-indigo-700' : 'text-gray-700'">
                                                <span class="flex h-4 w-4 items-center justify-center rounded-full border-2" :class="task.status === 'done' ? 'border-indigo-600 bg-indigo-600' : 'border-gray-300'"><svg x-show="task.status === 'done'" class="h-2.5 w-2.5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></span>
                                                Done
                                            </button>
                                        </div>
                                    </div>
                                    <span class="shrink-0 h-2 w-2 rounded-full" :class="{ 'bg-gray-400': task.priority === 'low', 'bg-blue-500': task.priority === 'medium', 'bg-orange-500': task.priority === 'high', 'bg-red-500': task.priority === 'urgent' }"></span>
                                    <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: task.project?.id ?? null } }))" class="flex-1 min-w-0 text-left text-sm truncate" :class="task.status === 'done' ? 'text-gray-500 line-through' : 'text-gray-900'">
                                        <span x-text="task.title"></span>
                                    </button>
                                    <span x-show="task.project?.name" class="shrink-0 text-xs rounded px-1.5 py-0.5 bg-gray-100 text-gray-700" x-text="task.project?.name"></span>
                                    <div class="flex shrink-0 items-center gap-1">
                                        <template x-for="a in (task.assignees || [])" :key="a.user_id">
                                            <img x-show="a.user?.avatar_url" :src="a.user.avatar_url" :alt="a.user?.name" class="h-6 w-6 rounded-full object-cover" />
                                            <span x-show="!a.user?.avatar_url" class="h-6 w-6 rounded-full bg-gray-600 flex items-center justify-center text-white text-xs shrink-0" :title="a.user?.name" x-text="(a.user?.name || '').charAt(0).toUpperCase()"></span>
                                        </template>
                                        <span class="text-xs rounded px-1.5 py-0.5" x-show="task.due_date"
                                            :class="{'bg-red-100 text-red-800': task.due_date && new Date(task.due_date) < new Date(new Date().toDateString()) && task.status !== 'done', 'bg-yellow-100 text-yellow-800': task.due_date && new Date(task.due_date).toDateString() === new Date().toDateString() && task.status !== 'done', 'bg-gray-100 text-gray-600': !task.due_date || new Date(task.due_date) > new Date() || task.status === 'done'}"
                                            x-text="task.due_date ? new Date(task.due_date).toLocaleDateString() : ''"></span>
                                        <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: task.project?.id ?? null } }))" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline" title="View task details">View</button>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </div>
                </template>
                <p x-show="!loading && totalTasks === 0" class="text-sm text-gray-500 py-4">No tasks match your filters.</p>
            </div>
        </template>
    </div>
    @else
    <x-task-calendar
        :api-base="url('/api/v1')"
        :csrf="csrf_token()"
        :filter-params="$filterParams ?? []"
    />
    @endif

    @include('partials.task-panel', ['projectId' => null])

    @push('scripts')
        @include('partials.task-panel-script')
        <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('todayTimeSummary', (config) => ({
                apiBase: config.apiBase,
                totalMinutes: 0,
                loading: true,
                async fetchSummary() {
                    try {
                        const r = await fetch(this.apiBase + '/time/summary/today', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                        if (r.ok) { const d = await r.json(); this.totalMinutes = d.total_minutes ?? 0; }
                    } finally {
                        this.loading = false;
                    }
                },
                formatMins(mins) {
                    if (mins == null || mins === 0) return '0m';
                    const h = Math.floor(mins / 60);
                    const m = mins % 60;
                    return h ? (h + 'h ' + (m ? m + 'm' : '')) : (m + 'm');
                },
            }));
            Alpine.data('myTasksManager', (config) => ({
                apiUrl: config.apiUrl,
                apiBase: config.apiBase,
                csrf: config.csrf,
                loading: true,
                tasks: [],
                grouped: {},
                sectionLabels: {
                    overdue: 'Overdue',
                    today: 'Today',
                    this_week: 'This Week',
                    upcoming: 'Upcoming',
                    no_due_date: 'No Due Date',
                },
                get totalTasks() {
                    return this.tasks.length;
                },
                async fetchTasks() {
                    this.loading = true;
                    try {
                        const r = await fetch(this.apiUrl, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                        const data = await r.json();
                        const list = data.data ?? data;
                        this.tasks = Array.isArray(list) ? list : [];
                        this.grouped = this.groupTasksBySection(this.tasks);
                    } finally {
                        this.loading = false;
                    }
                },
                groupTasksBySection(tasks) {
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);
                    const todayStr = today.toISOString().slice(0, 10);
                    const endOfWeek = new Date(today);
                    endOfWeek.setDate(today.getDate() + (7 - today.getDay()) % 7);
                    endOfWeek.setHours(23, 59, 59, 999);
                    const endOfWeekStr = endOfWeek.toISOString().slice(0, 10);
                    const sections = { overdue: [], today: [], this_week: [], upcoming: [], no_due_date: [] };
                    tasks.forEach(task => {
                        const due = task.due_date || null;
                        if (!due) {
                            sections.no_due_date.push(task);
                            return;
                        }
                        const dueDate = new Date(due);
                        dueDate.setHours(0, 0, 0, 0);
                        const dueStr = dueDate.toISOString().slice(0, 10);
                        if (task.status === 'done') {
                            sections.upcoming.push(task);
                            return;
                        }
                        if (dueStr < todayStr) sections.overdue.push(task);
                        else if (dueStr === todayStr) sections.today.push(task);
                        else if (dueStr <= endOfWeekStr) sections.this_week.push(task);
                        else sections.upcoming.push(task);
                    });
                    return sections;
                },
                async setTaskStatus(task, status) {
                    const res = await fetch(`${this.apiBase}/tasks/${task.id}/status`, {
                        method: 'PATCH',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                        body: JSON.stringify({ status }),
                        credentials: 'same-origin',
                    });
                    if (res.ok) {
                        task.status = status;
                        task.completed_at = status === 'done' ? new Date().toISOString() : null;
                    }
                },
            }));
        });
        </script>
    @endpush
@endsection