@extends('layouts.app')

@section('page_title', !$activeProject ? 'All Tasks' : $activeProject->name)

@section('content')
<div class="bg-gray-50 dark:bg-gray-900 min-h-screen rounded-lg">
    <div class="w-full">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Sidebar - Projects -->
            <div class="lg:col-span-1">
                <div class="sticky top-8">
                    <!-- Projects Header -->
                    <div class="flex justify-between items-center mb-6 px-4 lg:px-0">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Projects</h3>
                        <a href="{{ route('projects.create') }}" 
                           class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                        </a>
                    </div>

                    <!-- Projects List -->
                    <div class="space-y-2 max-h-[70vh] overflow-y-auto">
                        <!-- All Projects Option -->
                        <a 
                            href="{{ route('tasks.index') }}"
                            class="block px-4 py-3 rounded-lg border transition {{ !$activeProject ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-400 dark:border-blue-500 text-blue-900 dark:text-blue-200' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-300' }}"
                        >
                            <div class="flex items-center gap-3">
                                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"></path>
                                </svg>
                                <div class="flex-1 min-w-0">
                                    <p class="truncate font-semibold text-sm">All Projects</p>
                                    <p class="text-xs opacity-75">{{ $tasks->count() }} tasks</p>
                                </div>
                            </div>
                        </a>

                        @if($projects->isEmpty())
                            <div class="bg-white dark:bg-gray-800 text-center py-8 rounded-lg border border-gray-200 dark:border-gray-700">
                                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">No projects yet</p>
                                <a href="{{ route('projects.create') }}" class="inline-block px-4 py-2 bg-blue-600 text-white font-semibold text-sm rounded-lg hover:bg-blue-700 transition">
                                    Create First Project
                                </a>
                            </div>
                        @else
                            @foreach($projects as $project)
                                <a 
                                    href="{{ route('tasks.index', ['project_id' => $project->id]) }}"
                                    class="block px-4 py-3 rounded-lg border transition {{ $activeProject?->id === $project->id ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-400 dark:border-blue-500 text-blue-900 dark:text-blue-200' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-300' }}"
                                >
                                    <div class="flex items-center gap-3">
                                        <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $project->color }}"></span>
                                        <div class="flex-1 min-w-0">
                                            <p class="truncate font-semibold text-sm">{{ $project->name }}</p>
                                            <p class="text-xs opacity-75">{{ $project->tasks_count }} tasks</p>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="lg:col-span-3">
                <!-- Header -->
                <div class="flex justify-between items-start gap-4 mb-8 px-4 lg:px-0">
                    <div>
                        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                            @if($activeProject)
                                {{ $activeProject->name }}
                            @else
                                All Tasks
                            @endif
                        </h1>
                        @if($activeProject && $activeProject->description)
                            <p class="text-gray-600 dark:text-gray-400 text-base max-w-xl">{{ $activeProject->description }}</p>
                        @elseif(!$activeProject)
                            <p class="text-gray-600 dark:text-gray-400 text-base">View and manage all your tasks across all projects</p>
                        @endif
                    </div>
                    <div class="flex gap-2 flex-col sm:flex-row">
                        <a href="{{ $activeProject ? route('tasks.create', ['project_id' => $activeProject->id]) : route('tasks.create') }}" 
                           class="px-4 py-2 bg-blue-600 text-white font-semibold text-sm rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 transition text-center">
                            + Add Task
                        </a>
                        @if($activeProject)
                            <a href="{{ route('projects.edit', $activeProject) }}" 
                               class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold text-sm rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition text-center">
                                Edit
                            </a>
                            <form action="{{ route('projects.destroy', $activeProject) }}" method="POST" class="inline" onsubmit="return confirm('Delete project?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="px-4 py-2 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 font-semibold text-sm rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 transition">
                                    Delete
                                </button>
                            </form>
                        @endif
                    </div>
                </div>

                <!-- Statistics -->
                <div class="grid grid-cols-3 gap-4 mb-8 px-4 lg:px-0">
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <p class="text-gray-600 dark:text-gray-400 text-xs font-semibold mb-2 uppercase">Total Tasks</p>
                        <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ collect($groupedTasks)->flatten()->count() }}</p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <p class="text-gray-600 dark:text-gray-400 text-xs font-semibold mb-2 uppercase">Pending</p>
                        <p class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $groupedTasks['pending']->count() }}</p>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                        <p class="text-gray-600 dark:text-gray-400 text-xs font-semibold mb-2 uppercase">Completed</p>
                        <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $groupedTasks['completed']->count() }}</p>
                    </div>
                </div>

                <!-- Tasks by Status -->
                @if($tasks->isEmpty())
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-12 text-center px-4 lg:px-12">
                        <p class="text-gray-600 dark:text-gray-400 text-lg mb-4">
                            @if($activeProject)
                                No tasks yet in this project
                            @else
                                No tasks yet
                            @endif
                        </p>
                        <a href="{{ $activeProject ? route('tasks.create', ['project_id' => $activeProject->id]) : route('tasks.create') }}" 
                           class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold">
                            Create the first task →
                        </a>
                    </div>
                @else
                    <div class="space-y-6 px-4 lg:px-0">
                        @foreach(['pending' => 'To Do', 'in_progress' => 'In Progress', 'completed' => 'Completed'] as $statusKey => $statusLabel)
                            @php
                                $statusTasks = $groupedTasks[$statusKey] ?? collect();
                                $taskCount = $statusTasks->count();
                                $statusColors = [
                                    'pending' => 'blue',
                                    'in_progress' => 'amber',
                                    'completed' => 'green'
                                ];
                                $color = $statusColors[$statusKey] ?? 'gray';
                            @endphp
                            
                            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                                <!-- Section Header -->
                                <button onclick="toggleSection(this)" class="w-full px-6 py-4 flex items-center justify-between bg-gradient-to-r from-gray-50 dark:from-gray-700/50 to-white dark:to-gray-800 hover:from-gray-100 dark:hover:from-gray-700 transition cursor-pointer border-b border-gray-200 dark:border-gray-700">
                                    <div class="flex items-center gap-3">
                                        <svg class="w-5 h-5 text-{{ $color }}-600 dark:text-{{ $color }}-400 transition transform toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                                        </svg>
                                        <span class="text-gray-900 dark:text-gray-100 font-semibold text-sm">{{ $statusLabel }}</span>
                                    </div>
                                    <span class="bg-{{ $color }}-100 dark:bg-{{ $color }}-900/30 text-{{ $color }}-700 dark:text-{{ $color }}-400 px-3 py-1 rounded-full text-sm font-medium">{{ $taskCount }}</span>
                                </button>

                                <!-- Section Content -->
                                <div class="section-content">
                                    @if($taskCount > 0)
                                        <div class="w-full overflow-x-auto">
                                            <table class="w-full">
                                                <thead>
                                                    <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Name</th>
                                                        @if(!$activeProject)
                                                            <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Project</th>
                                                        @endif
                                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Priority</th>
                                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Start</th>
                                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Due Date</th>
                                                        <th class="px-6 py-3 text-center text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Time Spent</th>
                                                        <th class="px-6 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Status</th>
                                                        <th class="px-6 py-3 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                                    @foreach($statusTasks as $task)
                                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition {{ $statusKey === 'completed' ? 'opacity-75' : '' }}">
                                                            <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">
                                                                <a href="{{ route('tasks.show', $task) }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition line-clamp-1">
                                                                    {{ $task->title }}
                                                                </a>
                                                            </td>
                                                            @if(!$activeProject)
                                                                <td class="px-6 py-4 text-sm">
                                                                    @if($task->project)
                                                                        <a href="{{ route('tasks.index', ['project_id' => $task->project->id]) }}" class="inline-flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400 transition">
                                                                            <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $task->project->color }}"></span>
                                                                            <span class="font-medium">{{ $task->project->name }}</span>
                                                                        </a>
                                                                    @else
                                                                        <span class="text-gray-400 dark:text-gray-600 text-xs">No Project</span>
                                                                    @endif
                                                                </td>
                                                            @endif
                                                            <td class="px-6 py-4 text-sm">
                                                                @php
                                                                    $priorityClasses = [
                                                                        'high' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
                                                                        'medium' => 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300',
                                                                        'low' => 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
                                                                    ];
                                                                    $priorityClass = $priorityClasses[$task->priority] ?? 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300';
                                                                @endphp
                                                                <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $priorityClass }}">
                                                                    {{ ucfirst($task->priority) }}
                                                                </span>
                                                            </td>
                                                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                                                {{ $task->created_at ? $task->created_at->format('M d, Y') : '-' }}
                                                            </td>
                                                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                                                @if($task->due_date)
                                                                    <span class="font-medium">{{ $task->due_date->format('M d, Y') }}</span>
                                                                @else
                                                                    <span class="text-gray-400 dark:text-gray-600">-</span>
                                                                @endif
                                                            </td>
                                                            <td class="px-6 py-4 text-sm text-center">
                                                                @php
                                                                    $hours = intval($task->time_spent);
                                                                    $minutes = intval(($task->time_spent - $hours) * 60);
                                                                    $totalMinutes = round($task->time_spent * 60);
                                                                @endphp
                                                                @if($task->time_spent > 0)
                                                                    <div class="flex flex-col items-center">
                                                                        <span class="font-semibold text-sm text-purple-600 dark:text-purple-400">
                                                                            @if($hours > 0)
                                                                                {{ $hours }}h {{ $minutes }}m
                                                                            @else
                                                                                {{ $minutes }}m
                                                                            @endif
                                                                        </span>
                                                                        @if($task->is_tracking)
                                                                            <span class="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1 mt-1">
                                                                                <span class="inline-block w-1.5 h-1.5 bg-amber-600 dark:bg-amber-400 rounded-full animate-pulse"></span>
                                                                                tracking
                                                                            </span>
                                                                        @endif
                                                                    </div>
                                                                @else
                                                                    <span class="text-gray-400 dark:text-gray-600 text-xs">-</span>
                                                                @endif
                                                            </td>
                                                            <td class="px-6 py-4 text-sm">
                                                                <select class="status-select px-3 py-1 rounded-lg text-xs font-semibold border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition"
                                                                        data-task-id="{{ $task->id }}"
                                                                        data-current-status="{{ $task->status }}">
                                                                    <option value="pending" {{ $task->status === 'pending' ? 'selected' : '' }}>To Do</option>
                                                                    <option value="in_progress" {{ $task->status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                                                    <option value="completed" {{ $task->status === 'completed' ? 'selected' : '' }}>Completed</option>
                                                                </select>
                                                            </td>
                                                            <td class="px-6 py-4 text-sm text-right">
                                                                <a href="{{ route('tasks.show', $task) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold transition">
                                                                    View →
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                                            <p class="text-sm">No tasks in this section</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <script>
                        function toggleSection(button) {
                            const content = button.nextElementSibling;
                            const icon = button.querySelector('.toggle-icon');
                            
                            content.classList.toggle('hidden');
                            icon.classList.toggle('rotate-180');
                        }

                        // Handle status change
                        document.querySelectorAll('.status-select').forEach(select => {
                            select.addEventListener('change', function(e) {
                                const taskId = this.getAttribute('data-task-id');
                                const newStatus = this.value;
                                const previousStatus = this.getAttribute('data-current-status');
                                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

                                console.log('Updating task', taskId, 'to status', newStatus);

                                // Optimistic update - change color immediately
                                this.setAttribute('data-current-status', newStatus);

                                // Send request to update status
                                fetch(`/tasks/${taskId}/status`, {
                                    method: 'PATCH',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken,
                                    },
                                    body: JSON.stringify({
                                        status: newStatus
                                    })
                                })
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error(`HTTP error! status: ${response.status}`);
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    console.log('Status updated successfully:', data);
                                    showNotification('Status updated successfully', 'success');
                                })
                                .catch(error => {
                                    console.error('Error updating status:', error);
                                    // Revert to previous status if error
                                    this.value = previousStatus;
                                    this.setAttribute('data-current-status', previousStatus);
                                    showNotification('Failed to update status: ' + error.message, 'error');
                                });
                            });
                        });

                        // Simple notification function
                        function showNotification(message, type = 'info') {
                            const notification = document.createElement('div');
                            notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white font-semibold text-sm z-50 ${
                                type === 'success' ? 'bg-green-600' : type === 'error' ? 'bg-red-600' : 'bg-blue-600'
                            }`;
                            notification.textContent = message;
                            document.body.appendChild(notification);
                            
                            setTimeout(() => notification.remove(), 3000);
                        }
                    </script>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection