@extends('layouts.app')

@section('page_title', 'Tasks')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Back Button -->
    <div class="max-w-5xl mx-auto px-4 pt-6">
        <a href="{{ $task->project ? route('projects.show', $task->project) : route('tasks.index') }}" class="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 font-semibold mb-8 text-sm 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="M15 19l-7-7 7-7"></path>
            </svg>
            Back
        </a>
    </div>

    <div class="max-w-5xl mx-auto px-4 pb-12">
        <!-- Header Section -->
        <div class="mb-8">
            @if($task->project)
                <p class="text-gray-600 dark:text-gray-500 text-sm font-semibold mb-3">{{ $task->project->name }}</p>
            @endif
            <h1 class="text-5xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">{{ $task->title }}</h1>
            
            @if($task->description)
                <p class="text-gray-700 dark:text-gray-400 text-base leading-relaxed max-w-2xl">
                    {{ $task->description }}
                </p>
            @endif
        </div>

        <!-- Two Column Layout -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content (2 columns) -->
            <div class="lg:col-span-2 space-y-8">
                <!-- Details Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <h2 class="text-gray-900 dark:text-gray-200 font-semibold text-sm mb-6 uppercase tracking-wide">Details</h2>
                    
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <!-- Status -->
                        <div>
                            <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-2 uppercase tracking-wide">Status</p>
                            <div class="bg-gray-100 dark:bg-gray-700/50 rounded px-3 py-2 w-full block">
                                <span class="text-gray-900 dark:text-gray-200 font-semibold text-sm">
                                    @if($task->status === 'pending') 
                                        Pending
                                    @elseif($task->status === 'in_progress') 
                                        In Progress
                                    @elseif($task->status === 'completed') 
                                        Completed
                                    @else 
                                        Cancelled
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- Priority -->
                        <div>
                            <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-2 uppercase tracking-wide">Priority</p>
                            <div class="bg-gray-100 dark:bg-gray-700/50 rounded px-3 py-2 w-full block">
                                <span class="text-gray-900 dark:text-gray-200 font-semibold text-sm">
                                    @if($task->priority === 'high') 
                                        High
                                    @elseif($task->priority === 'medium') 
                                        Medium
                                    @else 
                                        Low
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- Created -->
                        <div>
                            <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-2 uppercase tracking-wide">Created</p>
                            <p class="text-gray-800 dark:text-gray-300 text-sm">{{ $task->created_at->format('M d, Y') }}</p>
                        </div>

                        <!-- Due Date -->
                        @if($task->due_date)
                            <div>
                                <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-2 uppercase tracking-wide">Due Date</p>
                                <div class="flex items-center gap-2">
                                    <p class="text-gray-800 dark:text-gray-300 text-sm">{{ $task->due_date->format('M d, Y') }}</p>
                                    @if($task->due_date->isPast() && !$task->isCompleted())
                                        <span class="text-gray-500 dark:text-gray-500 text-xs">— Overdue</span>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Time Tracker Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-purple-200 dark:border-purple-800 shadow-sm">
                    <h2 class="text-gray-900 dark:text-gray-200 font-semibold text-sm mb-6 uppercase tracking-wide flex items-center gap-2">
                        <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Time Tracker
                    </h2>
                    
                    <!-- Total Time Spent -->
                    <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
                        <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-2 uppercase tracking-wide">Total Time Spent</p>
                        <div class="text-3xl font-bold text-purple-600 dark:text-purple-400">
                            <span id="total-time">{{ $task->time_spent > 0 ? sprintf('%dh %dm', intval($task->time_spent), intval(($task->time_spent - intval($task->time_spent)) * 60)) : '0h 0m' }}</span>
                        </div>
                        @if($task->is_tracking)
                            <p class="text-sm text-amber-600 dark:text-amber-400 mt-2 flex items-center gap-1">
                                <span class="inline-block w-2 h-2 bg-amber-600 dark:bg-amber-400 rounded-full animate-pulse"></span>
                                Currently tracking...
                            </p>
                        @endif
                    </div>

                    <!-- Timer Controls -->
                    <div class="space-y-3 mb-6">
                        @if(!$task->is_tracking)
                            <button 
                                type="button"
                                onclick="startTracking()"
                                class="w-full px-4 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition flex items-center justify-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z" />
                                </svg>
                                Start Timer
                            </button>
                        @else
                            <button 
                                type="button"
                                onclick="stopTracking()"
                                class="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition flex items-center justify-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M6 4h12v12H6z" />
                                </svg>
                                Stop Timer
                            </button>
                        @endif
                    </div>

                    <!-- Manual Time Entry -->
                    <form onsubmit="addTime(event)" class="flex gap-2">
                        <input 
                            type="number" 
                            step="0.25" 
                            min="0.25"
                            placeholder="Hours" 
                            id="manual-hours"
                            class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                        >
                        <button 
                            type="submit"
                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition"
                        >
                            Add
                        </button>
                    </form>
                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-2">Minimum 15 minutes (0.25h)</p>
                </div>

                <!-- Status Change Card -->
                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <h2 class="text-gray-900 dark:text-gray-200 font-semibold text-sm mb-4 uppercase tracking-wide">Change Status</h2>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach(['pending' => 'Pending', 'in_progress' => 'In Progress', 'completed' => 'Completed', 'cancelled' => 'Cancelled'] as $status => $label)
                            <button 
                                type="button"
                                onclick="updateStatus('{{ $status }}')"
                                class="w-full px-4 py-3 rounded font-semibold text-sm transition {{ $task->status === $status ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 active:scale-95' }}"
                            >
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex gap-3 pt-4">
                    <a href="{{ route('tasks.edit', $task) }}" class="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-lg transition text-center">
                        Edit Task
                    </a>
                    <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="flex-1" onsubmit="return confirm('Delete this task?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-full px-6 py-3 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 font-semibold rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 transition">
                            Delete
                        </button>
                    </form>
                </div>
            </div>

            <!-- Sidebar (1 column) -->
            <div class="space-y-6">
                <!-- Quick Info -->
                <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm">
                    <h3 class="text-gray-900 dark:text-gray-200 font-semibold text-sm mb-4 uppercase tracking-wide">Quick Info</h3>
                    
                    <div class="space-y-4">
                        @if($task->project)
                            <div>
                                <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-1 uppercase">Project</p>
                                <a href="{{ route('projects.show', $task->project) }}" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm transition">
                                    {{ $task->project->name }}
                                </a>
                            </div>
                        @endif
                        
                        <div>
                            <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-1 uppercase">ID</p>
                            <p class="text-gray-700 dark:text-gray-400 text-sm font-mono">#{{ $task->id }}</p>
                        </div>

                        <div>
                            <p class="text-gray-600 dark:text-gray-500 text-xs font-semibold mb-1 uppercase">Time</p>
                            <p class="text-gray-700 dark:text-gray-400 text-sm">{{ $task->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateStatus(status) {
    const btn = event.target.closest('button');
    const originalText = btn.textContent;
    btn.disabled = true;

    fetch("{{ route('tasks.update-status', $task) }}", {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ status: status })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            setTimeout(() => {
                location.reload();
            }, 300);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        btn.disabled = false;
        btn.textContent = originalText;
        setTimeout(() => location.reload(), 2000);
    });
}

function startTracking() {
    const btn = event.target.closest('button');
    btn.disabled = true;

    fetch("{{ route('tasks.start-tracking', $task) }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            setTimeout(() => location.reload(), 300);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        btn.disabled = false;
    });
}

function stopTracking() {
    const btn = event.target.closest('button');
    btn.disabled = true;

    fetch("{{ route('tasks.stop-tracking', $task) }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            setTimeout(() => location.reload(), 300);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        btn.disabled = false;
    });
}

function addTime(event) {
    event.preventDefault();
    const input = document.getElementById('manual-hours');
    const hours = parseFloat(input.value);

    if (!hours || hours < 0.25) {
        alert('Please enter at least 0.25 hours (15 minutes)');
        return;
    }

    fetch("{{ route('tasks.add-time', $task) }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ hours: hours })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            input.value = '';
            setTimeout(() => location.reload(), 300);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error adding time');
    });
}
</script>
@endsection