@extends('layouts.app')

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

@section('header-left')
    <div class="flex items-center gap-3">
        <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1>
        @if(in_array(auth()->user()->role, ['owner', 'admin']))
            <button
                type="button"
                @click="window.dispatchEvent(new CustomEvent('open-create-task-modal'))"
                class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700"
            >
                New Task
            </button>
        @endif
    </div>
@endsection

@section('content')
    @php
        $hour = (int) now()->format('G');
        $greeting = $hour < 12 ? 'morning' : ($hour < 17 ? 'afternoon' : 'evening');
    @endphp

    {{-- Welcome --}}
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
        <h2 class="text-lg font-semibold text-gray-900">Good {{ $greeting }}, {{ $user->name }}</h2>
        <p class="mt-1 text-sm text-gray-600">{{ now()->format('l, F j, Y') }}</p>
    </div>

    {{-- Stats cards --}}
    <div x-data x-on:task-created.window="window.location.reload()">
        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <a href="{{ route('my-tasks.index', ['date_range' => 'today']) }}" class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition hover:border-indigo-300 hover:shadow-md">
                <p class="text-sm font-medium text-gray-600">Tasks due today</p>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $tasksDueTodayCount }}</p>
            </a>
            <a href="{{ route('my-tasks.index', ['date_range' => 'overdue']) }}" class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition hover:border-red-300 hover:shadow-md">
                <p class="text-sm font-medium text-gray-600">Overdue tasks</p>
                <p class="mt-1 text-2xl font-semibold {{ $overdueCount > 0 ? 'text-red-600' : 'text-gray-900' }}">{{ $overdueCount }}</p>
            </a>
            <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
                <p class="text-sm font-medium text-gray-600">Completed this week</p>
                <p class="mt-1 text-2xl font-semibold text-green-600">{{ $completedThisWeekCount }}</p>
            </div>
            <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
                <p class="text-sm font-medium text-gray-600">Total active tasks</p>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $totalActiveCount }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {{-- Today's Tasks --}}
        <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-900">Today's Tasks</h3>
                <a href="{{ route('my-tasks.index', ['date_range' => 'today']) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
            </div>
            @if ($tasksDueToday->isEmpty())
                <p class="py-4 text-sm text-gray-500">No tasks due today.</p>
            @else
                <ul class="space-y-1">
                    @foreach ($tasksDueToday as $task)
                        @include('dashboard.partials.task-row', ['task' => $task])
                    @endforeach
                </ul>
            @endif
        </div>

        {{-- Overdue --}}
        <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-900">Overdue</h3>
                @if ($overdueTasks->isNotEmpty())
                    <a href="{{ route('my-tasks.index', ['date_range' => 'overdue']) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all</a>
                @endif
            </div>
            @if ($overdueTasks->isEmpty())
                <p class="py-4 text-sm text-gray-500">No overdue tasks.</p>
            @else
                <ul class="space-y-1">
                    @foreach ($overdueTasks as $task)
                        @php
                            $dueMoment = \Carbon\Carbon::parse($task->due_date);
                            if ($task->due_time) {
                                $dueMoment->setTimeFromTimeString(is_string($task->due_time) ? $task->due_time : $task->due_time->format('H:i'));
                            } else {
                                $dueMoment->endOfDay();
                            }
                            $hoursOverdue = (int) now()->diffInHours($dueMoment, false);
                            $days = (int) floor($hoursOverdue / 24);
                            $overdueLabel = $days >= 1 ? $days . ' ' . Str::plural('day', $days) . ' overdue' : $hoursOverdue . ' ' . Str::plural('hour', $hoursOverdue) . ' overdue';
                        @endphp
                        @include('dashboard.partials.task-row', ['task' => $task, 'overdueLabel' => $overdueLabel])
                    @endforeach
                </ul>
            @endif
        </div>
    </div>

    {{-- Recent Activity --}}
    <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
        <h3 class="mb-3 text-sm font-semibold text-gray-900">Recent Activity</h3>
        @if ($recentActivity->isEmpty())
            <p class="py-4 text-sm text-gray-500">No recent activity.</p>
        @else
            <ul class="space-y-3">
                @foreach ($recentActivity as $activity)
                    <li class="flex items-start gap-3 text-sm">
                        @if ($activity->user)
                            @if ($activity->user->avatar_url)
                                <img src="{{ $activity->user->avatar_url }}" alt="" class="h-8 w-8 shrink-0 rounded-full object-cover" />
                            @else
                                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-600 text-xs font-medium text-white">{{ Str::limit($activity->user->name, 1) }}</span>
                            @endif
                        @else
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-400 text-xs text-white">?</span>
                        @endif
                        <span class="text-gray-700">
                            <span class="font-medium text-gray-900">{{ $activity->user?->name ?? 'Someone' }}</span>
                            {{ str_replace('_', ' ', $activity->action) }}
                            @if ($activity->task)
                                on <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: '{{ $activity->task->id }}', projectId: '{{ $activity->task->project_id }}' } }))" class="font-medium text-indigo-600 hover:text-indigo-500">{{ $activity->task->title }}</button>
                                @if ($activity->task->project)
                                    in {{ $activity->task->project->name }}
                                @endif
                            @endif
                            — <span class="text-gray-500">{{ $activity->created_at->diffForHumans() }}</span>
                        </span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- Team Overview (supervisors) --}}
    @if (!empty($teamOverview))
        <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm" x-data="teamOverview()">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-900">Team Overview</h3>
                <a href="{{ route('team') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View Team Dashboard</a>
            </div>
            <ul class="space-y-2">
                @foreach ($teamOverview as $entry)
                    <li class="rounded-md border border-gray-200">
                        <button type="button" @click="toggle('{{ $entry['user']->id }}')" class="flex w-full items-center justify-between px-3 py-2 text-left hover:bg-gray-50">
                            <span class="font-medium text-gray-900">{{ $entry['user']->name }}</span>
                            <span class="flex items-center gap-2">
                                @if ($entry['overdue_count'] > 0)
                                    <span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">{{ $entry['overdue_count'] }} overdue</span>
                                @else
                                    <span class="text-sm text-gray-500">No overdue</span>
                                @endif
                                <svg class="h-4 w-4 text-gray-500 transition" :class="{ 'rotate-180': openId === '{{ $entry['user']->id }}' }" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </span>
                        </button>
                        <div x-show="openId === '{{ $entry['user']->id }}'" x-transition class="border-t border-gray-100">
                            @if ($entry['overdue_tasks']->isEmpty())
                                <p class="px-3 py-2 text-sm text-gray-500">No overdue tasks.</p>
                            @else
                                <ul class="space-y-1 px-3 py-2">
                                    @foreach ($entry['overdue_tasks'] as $task)
                                        @php
                                            $dueMoment = \Carbon\Carbon::parse($task->due_date);
                                            if ($task->due_time) {
                                                $dueMoment->setTimeFromTimeString(is_string($task->due_time) ? $task->due_time : $task->due_time->format('H:i'));
                                            } else {
                                                $dueMoment->endOfDay();
                                            }
                                            $hoursOverdue = (int) now()->diffInHours($dueMoment, false);
                                            $label = $hoursOverdue >= 24 ? (int) floor($hoursOverdue / 24) . 'd' : $hoursOverdue . 'h';
                                        @endphp
                                        <li class="flex items-center gap-2 rounded py-1.5 text-sm">
                                            <span class="shrink-0 rounded bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-800">{{ $label }} overdue</span>
                                            <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: '{{ $task->id }}', projectId: '{{ $task->project_id }}' } }))" class="min-w-0 flex-1 truncate text-left text-indigo-600 hover:text-indigo-500">{{ $task->title }}</button>
                                            @if ($task->project)
                                                <span class="shrink-0 text-xs text-gray-500">{{ $task->project->name }}</span>
                                            @endif
                                            <button type="button" @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: '{{ $task->id }}', projectId: '{{ $task->project_id }}' } }))" class="shrink-0 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:underline" title="View task details">View</button>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    @include('partials.task-panel', ['projectId' => null])
    @if(in_array(auth()->user()->role, ['owner', 'admin']))
        @include('partials.create-task-modal', [
            'apiBase' => url('/api/v1'),
            'csrf' => csrf_token(),
        ])
    @endif
@endsection

@push('scripts')
    @include('partials.task-panel-script')
    <script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('teamOverview', () => ({
            openId: null,
            toggle(id) {
                this.openId = this.openId === id ? null : id;
            },
        }));
    });
    </script>
@endpush