@extends('layouts.app')

@section('content')
<x-page-header title="Good Day, {{ auth()->user()->name }}" subtitle="Your productivity command center">
    <x-slot name="actions">
        <div class="flex items-center gap-4">
            <div id="live-clock" class="text-2xl font-mono font-bold text-[var(--accent-green)]">00:00:00</div>
            <x-badge color="info" text="Shift Active" />
        </div>
    </x-slot>
</x-page-header>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    <!-- Left Column: Timer & Stats -->
    <div class="lg:col-span-4 space-y-6">
        <!-- Live Timer Card -->
        <div class="bento-card p-6 bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-dark)] border-[var(--accent-green)]/30">
            <h3 class="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-6">Current Work Session</h3>
            
            <div class="text-center py-4">
                @if($runningTimer)
                    <div class="text-[var(--text-secondary)] text-xs mb-2">Tracking: <span class="text-[var(--text-primary)] font-semibold">{{ $runningTimer->task->title }}</span></div>
                    <div id="active-timer-display" class="text-5xl font-mono font-black text-[var(--text-primary)] mb-8" data-start="{{ $runningTimer->started_at->timestamp }}">00:00:00</div>
                    <div class="flex justify-center gap-4">
                        <button onclick="pauseTimer({{ $runningTimer->id }})" class="btn-modern bg-yellow-500/20 text-yellow-500 border border-yellow-500/30 w-full hover:bg-yellow-500 hover:text-black">
                            <i class="bi bi-pause-fill mr-2"></i> Pause
                        </button>
                        <button onclick="stopTimer({{ $runningTimer->id }})" class="btn-modern bg-red-500/20 text-red-500 border border-red-500/30 w-full hover:bg-red-500 hover:text-white">
                            <i class="bi bi-stop-fill mr-2"></i> Stop
                        </button>
                    </div>
                @else
                    <div class="text-[var(--text-secondary)] text-sm mb-8">No active timer. Select a task to start tracking.</div>
                    <i class="bi bi-play-circle text-6xl text-[var(--border-color)]"></i>
                @endif
            </div>
        </div>

        <!-- Personal Stats -->
        <div class="grid grid-cols-2 gap-4">
            <div class="bento-card p-4 text-center">
                <div class="text-2xl font-bold text-[var(--accent-green)]">{{ number_format($productivityScore) }}%</div>
                <div class="text-[10px] text-[var(--text-secondary)] uppercase">Productivity</div>
            </div>
            <div class="bento-card p-4 text-center">
                <div class="text-2xl font-bold text-[var(--text-primary)]">{{ $dailyLog ? round($dailyLog->total_tracked_seconds / 3600, 1) : 0 }}h</div>
                <div class="text-[10px] text-[var(--text-secondary)] uppercase">Hours Today</div>
            </div>
        </div>
    </div>

    <!-- Right Column: Active Tasks & Logs -->
    <div class="lg:col-span-8 space-y-6">
        <!-- Active Tasks -->
        <x-table-wrapper title="Assigned Tasks" icon="bi-list-check">
            <table class="w-full text-left table-modern">
                <thead>
                    <tr>
                        <th>Task Name</th>
                        <th>Project</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($activeTasks as $task)
                    <tr>
                        <td class="font-medium text-[var(--text-primary)]">{{ $task->title }}</td>
                        <td><span class="text-xs text-[var(--text-secondary)]">{{ $task->project->name }}</span></td>
                        <td><x-badge color="{{ $task->status->color }}" text="{{ $task->status->name }}" /></td>
                        <td class="text-right">
                            @if(!$runningTimer || $runningTimer->task_id != $task->id)
                                <button onclick="startTimer({{ $task->id }})" class="p-2 text-[var(--accent-green)] hover:bg-[var(--accent-green)]/10 rounded-lg transition-colors">
                                    <i class="bi bi-play-fill text-xl"></i>
                                </button>
                            @else
                                <span class="text-[var(--accent-green)] text-[10px] font-bold animate-pulse">TRACKING...</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-8">
                            <x-empty-state title="No active tasks" subtitle="Enjoy your free time or request a new task" icon="bi-check2-circle" />
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </x-table-wrapper>

        <!-- Recent Work History -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bento-card p-6">
                <h3 class="font-bold text-sm mb-4">Work Summary (Last 5 Days)</h3>
                <div class="space-y-3">
                    @foreach($recentLogs as $log)
                    <div class="flex items-center justify-between py-2 border-b border-[var(--border-color)] last:border-0">
                        <div class="text-xs text-[var(--text-secondary)]">{{ Carbon\Carbon::parse($log->work_date)->format('M d, Y') }}</div>
                        <div class="flex items-center gap-4">
                            <div class="text-xs font-bold">{{ round($log->total_tracked_seconds / 3600, 1) }}h</div>
                            <div class="w-16 h-1.5 bg-[var(--input-bg)] rounded-full overflow-hidden">
                                <div class="h-full bg-[var(--accent-green)]" style="width: {{ $log->productivity_score }}%"></div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="bento-card p-6">
                <h3 class="font-bold text-sm mb-4">Latest Notifications</h3>
                <div class="space-y-4">
                    @foreach($notifications as $notif)
                    <div class="flex gap-3">
                        <div class="w-8 h-8 rounded-lg bg-info/10 flex items-center justify-center text-info shrink-0">
                            <i class="bi bi-info-circle"></i>
                        </div>
                        <div>
                            <div class="text-xs font-medium text-[var(--text-primary)]">{{ $notif->title }}</div>
                            <div class="text-[10px] text-[var(--text-secondary)]">{{ $notif->created_at->diffForHumans() }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Live Clock
    setInterval(() => {
        const now = new Date();
        document.getElementById('live-clock').textContent = now.toLocaleTimeString();
    }, 1000);

    // Active Timer
    const timerDisplay = document.getElementById('active-timer-display');
    if (timerDisplay) {
        const startTime = parseInt(timerDisplay.dataset.start);
        setInterval(() => {
            const now = Math.floor(Date.now() / 1000);
            const diff = now - startTime;
            const h = Math.floor(diff / 3600).toString().padStart(2, '0');
            const m = Math.floor((diff % 3600) / 60).toString().padStart(2, '0');
            const s = Math.floor(diff % 60).toString().padStart(2, '0');
            timerDisplay.textContent = `${h}:${m}:${s}`;
        }, 1000);
    }

    function startTimer(taskId) {
        fetch(`{{ route('time-tracking.start') }}`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ task_id: taskId })
        }).then(() => window.location.reload());
    }

    function pauseTimer(logId) {
        fetch(`/time-tracking/${logId}/pause`, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(() => window.location.reload());
    }

    function stopTimer(logId) {
        fetch(`/time-tracking/${logId}/stop`, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(() => window.location.reload());
    }
</script>
@endpush
@endsection