@extends('layouts.app')

@section('content')
<div class="mb-8">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">Monthly Progress</h1>
        <a href="{{ route('templates.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
            Manage Templates
        </a>
    </div>
    
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-8">
        <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-100 relative">
            <div class="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500"></div>
            <div class="px-5 py-6">
                <dt class="text-sm font-bold text-gray-500 uppercase tracking-wider">Total Tasks</dt>
                <dd class="mt-2 text-4xl font-extrabold text-gray-900">{{ $totalTasks }}</dd>
            </div>
        </div>
        <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-100 relative">
            <div class="absolute left-0 top-0 bottom-0 w-1 bg-green-500"></div>
            <div class="px-5 py-6">
                <dt class="text-sm font-bold text-gray-500 uppercase tracking-wider">Completed Tasks</dt>
                <dd class="mt-2 text-4xl font-extrabold text-gray-900">{{ $completedTasks }}</dd>
            </div>
        </div>
        <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-100 relative">
            @php $progressColor = $progress >= 80 ? 'bg-green-500' : ($progress >= 50 ? 'bg-yellow-500' : 'bg-red-500'); @endphp
            <div class="absolute left-0 top-0 bottom-0 w-1 {{ $progressColor }}"></div>
            <div class="px-5 py-6">
                <dt class="text-sm font-bold text-gray-500 uppercase tracking-wider flex justify-between">
                    <span>Overall Progress</span>
                    <span class="text-indigo-600">{{ $progress }}%</span>
                </dt>
                <dd class="mt-4">
                    <div class="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
                      <div class="h-3 rounded-full transition-all duration-1000 bg-indigo-600" style="width: {{ $progress }}%"></div>
                    </div>
                </dd>
            </div>
        </div>
    </div>

    <!-- Calendar Legend -->
    <div class="flex flex-wrap gap-4 mb-4 text-xs font-semibold items-center justify-end text-gray-600 uppercase tracking-wide">
        <span class="flex items-center"><span class="w-3 h-3 rounded-full bg-green-300 mr-2 shadow-sm"></span> 100%</span>
        <span class="flex items-center"><span class="w-3 h-3 rounded-full bg-yellow-300 mr-2 shadow-sm"></span> 80-99%</span>
        <span class="flex items-center"><span class="w-3 h-3 rounded-full bg-orange-400 mr-2 shadow-sm"></span> 50-79%</span>
        <span class="flex items-center"><span class="w-3 h-3 rounded-full bg-red-400 mr-2 shadow-sm"></span> 20-49%</span>
        <span class="flex items-center"><span class="w-3 h-3 rounded-full bg-red-800 mr-2 shadow-sm"></span> 0-19%</span>
    </div>

    <div class="bg-white shadow-xl shadow-gray-200/50 rounded-2xl overflow-hidden border border-gray-100">
        <div class="px-6 py-5 bg-gradient-to-r from-gray-50 to-white border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-xl font-bold text-gray-800 capitalize">
                {{ $startOfMonth->format('F Y') }}
            </h3>
            <span class="px-3 py-1 bg-white border border-gray-200 text-gray-600 rounded-full text-xs font-bold shadow-sm">
                {{ $startOfMonth->daysInMonth }} Days
            </span>
        </div>
        
        <div class="p-6 bg-gray-50/30">
            <!-- Days of Week Header -->
            <div class="grid grid-cols-7 gap-1 sm:gap-3 mb-3 text-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-gray-500">
                <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div class="hidden sm:block">Sat</div><div class="sm:hidden">Sa</div><div class="hidden sm:block">Sun</div><div class="sm:hidden">Su</div>
            </div>
            
            <div class="grid grid-cols-7 gap-1 sm:gap-3">
                @php $firstDay = $startOfMonth->dayOfWeekIso; @endphp
                @for ($i = 1; $i < $firstDay; $i++)
                    <div class="rounded-xl bg-transparent min-h-[120px]"></div>
                @endfor
                
                @foreach ($calendar as $day)
                    @php 
                        $isClickable = $day['total'] > 0;
                    @endphp
                    <div @if($isClickable) onclick="openDayTasksModal(this)" data-tasks="{{ $day['tasks'] ?? '[]' }}" data-date="{{ \Carbon\Carbon::parse($day['full_date'])->format('F j, Y') }}" role="button" tabindex="0" @endif class="rounded-lg sm:rounded-xl shadow-sm flex flex-col justify-between overflow-hidden relative transition-all duration-300 {{ $day['color'] }} min-h-[70px] sm:min-h-[120px] ring-1 ring-black/5 {{ $isClickable ? 'cursor-pointer hover:-translate-y-1 hover:shadow-md hover:ring-2 hover:ring-indigo-400' : 'cursor-default' }}">
                        <div class="p-1 sm:p-3 flex justify-between items-start pointer-events-none">
                            <span class="text-[9px] sm:text-xs font-bold uppercase tracking-wider opacity-70 {{ str_contains($day['color'], 'text-white') ? 'text-gray-300' : 'text-gray-600' }} hidden sm:inline">Day</span>
                            <span class="text-sm sm:text-lg font-black {{ str_contains($day['color'], 'text-white') ? 'text-white' : (str_contains($day['color'], 'text-indigo-900') ? 'text-indigo-900' : 'text-gray-900') }}">{{ $day['date'] }}</span>
                        </div>
                        @if($day['total'] > 0)
                        <div class="px-1 sm:px-3 pb-2 sm:pb-4 text-center flex flex-col items-center justify-end">
                            <div class="inline-block px-1 sm:px-3 py-0.5 sm:py-1 rounded-full bg-black/5 backdrop-blur-sm mb-1 sm:mb-2">
                                <span class="text-xs sm:text-xl font-black {{ str_contains($day['color'], 'text-white') ? 'text-white' : (str_contains($day['color'], 'text-indigo-900') ? 'text-indigo-900' : 'text-gray-900') }}">
                                    @if(isset($day['is_future']) && $day['is_future'])
                                        {{ $day['total'] }}<span class="hidden xl:inline"> Tasks</span><span class="xl:hidden block text-[8px] uppercase tracking-tighter opacity-70 leading-none">Due</span>
                                    @else
                                        {{ $day['percentage'] }}%
                                    @endif
                                </span>
                            </div>
                            @if(!(isset($day['is_future']) && $day['is_future']))
                            <p class="text-[9px] sm:text-[11px] font-bold uppercase tracking-wider {{ str_contains($day['color'], 'text-white') ? 'text-gray-300' : 'text-gray-700/80' }} hidden sm:block">{{ $day['completed'] }} of {{ $day['total'] }}</p>
                            @else
                            <p class="text-[9px] sm:text-[11px] font-bold uppercase tracking-wider {{ str_contains($day['color'], 'text-white') ? 'text-gray-300' : 'text-indigo-700/80' }} hidden sm:block">Planned</p>
                            @endif
                        </div>
                        @else
                        <div class="p-1 sm:p-3 flex-1 flex items-center justify-center">
                            <span class="text-[10px] sm:text-xs font-medium text-gray-400/80 hidden sm:inline">Rest</span>
                        </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Day Tasks Modal -->
<div id="dayTasksModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <!-- Background overlay -->
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeDayTasksModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        
        <!-- Modal panel -->
        <div class="inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-gray-100">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl leading-6 font-extrabold text-gray-900" id="modal-date-title">Date</h3>
                    <button type="button" onclick="closeDayTasksModal()" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <span class="sr-only">Close</span>
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="mt-2">
                    <ul id="modal-tasks-list" class="space-y-3 max-h-96 overflow-y-auto pr-2">
                        <!-- Tasks will be injected here via JS -->
                    </ul>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t border-gray-200">
                <button type="button" onclick="closeDayTasksModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let dashboardNeedsReload = false;

    function openDayTasksModal(element) {
        dashboardNeedsReload = false;
        const rawTasks = element.getAttribute('data-tasks');
        if (!rawTasks) return;
        
        const tasks = JSON.parse(rawTasks);
        const dateStr = element.getAttribute('data-date');
        
        document.getElementById('modal-date-title').textContent = dateStr + ' Tasks';
        
        const listContainer = document.getElementById('modal-tasks-list');
        listContainer.innerHTML = '';
        
        if (tasks.length === 0) {
            listContainer.innerHTML = '<li class="text-sm text-gray-500 text-center py-4">No tasks found for this day.</li>';
        } else {
            tasks.forEach(task => {
                let statusBadge = '';
                if (task.status === 'planned') {
                    statusBadge = '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 border border-indigo-200">Planned Template</span>';
                } else {
                    const isTodo = task.status === 'todo' ? 'selected' : '';
                    const isDoing = task.status === 'doing' ? 'selected' : '';
                    const isDone = task.status === 'done' ? 'selected' : '';
                    const isTomorrow = task.status === 'tomorrow' ? 'selected' : '';
                    
                    statusBadge = `
                        <select onchange="updateDashboardTaskStatus(${task.id}, this.value, this)" class="text-xs font-bold bg-white border border-gray-200 text-gray-700 py-1.5 pl-3 pr-8 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 hover:bg-gray-50 transition-colors appearance-none cursor-pointer relative" style="background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239CA3AF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right .5rem top 50%; background-size: .65em auto;">
                            <option value="todo" ${isTodo}>To Do</option>
                            <option value="doing" ${isDoing}>Doing</option>
                            <option value="done" ${isDone}>Done</option>
                            <option value="tomorrow" ${isTomorrow}>Tomorrow</option>
                        </select>
                    `;
                }
                
                listContainer.innerHTML += `
                    <li class="bg-white border text-left border-gray-200 shadow-sm rounded-lg p-3 flex justify-between items-center hover:bg-gray-50 transition-colors">
                        <span class="text-sm font-bold text-gray-900">${task.title}</span>
                        ${statusBadge}
                    </li>
                `;
            });
        }
        
        document.getElementById('dayTasksModal').classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function closeDayTasksModal() {
        if (dashboardNeedsReload) {
            window.location.reload();
            return;
        }
        document.getElementById('dayTasksModal').classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }

    function updateDashboardTaskStatus(taskId, newStatus, selectElement) {
        selectElement.disabled = true;
        selectElement.classList.add('opacity-50');
        
        fetch('{{ url("/tasks") }}/' + taskId + '/status', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: JSON.stringify({ status: newStatus })
        }).then(res => res.json())
          .then(data => {
              if (data.success) {
                  dashboardNeedsReload = true;
              }
          })
          .catch(err => {
              console.error('Failed to update task status:', err);
          }).finally(() => {
              selectElement.disabled = false;
              selectElement.classList.remove('opacity-50');
          });
    }
</script>
@endpush