{{-- ============================================================
     resources/views/user/tasks/index.blade.php
     ============================================================ --}}
@extends('layouts.app')
@section('title','Tasks')

@section('content')
<div class="page-header"><h2>📋 Tasks</h2><p>Complete tasks to earn points</p></div>

{{-- Task Filters --}}
<div class="section">
    <div style="display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;">
        @php $types = ['all'=>'All','video'=>'📹 Video','visit'=>'🌐 Visit','daily'=>'📅 Daily','game'=>'🎮 Game','offer'=>'🎫 Offer','custom'=>'⭐ Custom']; @endphp
        @foreach($types as $key => $label)
        <a href="{{ route('tasks.index').'?type='.($key==='all'?'':$key) }}"
           style="white-space:nowrap;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;flex-shrink:0;{{ request('type')===$key || ($key==='all'&&!request('type')) ? 'background:var(--primary);color:#fff;' : 'background:var(--surface);color:var(--text-muted);border:1px solid var(--border);' }}">
            {{ $label }}
        </a>
        @endforeach
    </div>
</div>

<div class="section">
    @php $filtered = request('type') ? $tasks->filter(fn($t)=>$t->type===request('type')) : $tasks; @endphp
    @forelse($filtered as $task)
    <div class="task-card" id="task-{{ $task->id }}">
        <div class="task-icon" style="{{ $task->type==='video'?'background:#FEE2E2;color:#DC2626;':'' }}{{ $task->type==='visit'?'background:#DCFCE7;color:#16A34A;':'' }}{{ $task->type==='game'?'background:#EDE9FE;color:#7C3AED;':'' }}">
            {{ match($task->type){ 'video'=>'▶','visit'=>'🌐','daily'=>'📅','game'=>'🎮','quiz'=>'🧩','offer'=>'🎫',default=>'⭐' } }}
        </div>
        <div style="flex:1;">
            <div style="font-weight:700;font-size:14px;">{{ $task->title }}</div>
            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ Str::limit($task->description,60) }}</div>
            <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
                <span style="font-size:11px;background:var(--primary-light);color:var(--primary);padding:2px 8px;border-radius:10px;font-weight:600;">{{ ucfirst($task->type) }}</span>
                <span style="font-size:11px;color:var(--text-muted);">{{ $task->completed_today }}/{{ $task->daily_limit }} today</span>
            </div>
        </div>
        <div style="text-align:right;flex-shrink:0;">
            <div class="task-points">+{{ $task->points }}</div>
            <div style="font-size:10px;color:var(--text-muted);margin-bottom:6px;">pts</div>
            @if($task->can_do)
                @if($task->type === 'visit' && $task->url)
                    <button class="btn btn-primary btn-sm" onclick="doVisitTask({{ $task->id }},'{{ $task->url }}',{{ $task->duration_seconds ?? 15 }})">Start</button>
                @elseif($task->requires_proof)
                    <label class="btn btn-primary btn-sm" style="cursor:pointer;">
                        Upload <input type="file" accept="image/*" style="display:none;" onchange="uploadProof({{ $task->id }},this)">
                    </label>
                @else
                    <button class="btn btn-primary btn-sm" onclick="completeTask({{ $task->id }},this)">Do Task</button>
                @endif
            @else
                <button class="btn btn-sm" style="background:#f1f5f9;color:#94a3b8;" disabled>Done ✓</button>
            @endif
        </div>
    </div>
    @empty
    <div class="card card-body text-center text-muted" style="padding:40px;">
        <i class="fa fa-list-check" style="font-size:36px;color:#CBD5E1;margin-bottom:12px;display:block;"></i>
        No tasks available right now. Check back later!
    </div>
    @endforelse
</div>

{{-- Visit Timer Modal --}}
<div id="visit-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:20px;padding:32px;text-align:center;max-width:280px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);">
        <div style="font-size:48px;margin-bottom:12px;">⏱</div>
        <div style="font-size:18px;font-weight:700;margin-bottom:8px;">Visiting Site...</div>
        <div id="visit-timer" style="font-size:48px;font-weight:800;color:var(--primary);margin:16px 0;">15</div>
        <div style="font-size:13px;color:var(--text-muted);">Keep this page open to earn your points</div>
        <div style="width:100%;height:6px;background:#E2E8F0;border-radius:3px;margin-top:16px;overflow:hidden;">
            <div id="visit-progress" style="height:100%;background:var(--primary);border-radius:3px;transition:width 1s linear;width:0%;"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let visitTaskId = null;

async function completeTask(id, btn){
    btn.disabled = true; btn.textContent = '...';
    const r = await post(`/tasks/${id}`);
    if(r.success){ toast(`+${r.points} points earned! 🎉`,'success'); document.querySelector(`#task-${id} .btn`).outerHTML='<button class="btn btn-sm" style="background:#f1f5f9;color:#94a3b8;" disabled>Done ✓</button>'; }
    else toast(r.error,'error');
}

function doVisitTask(id, url, duration){
    visitTaskId = id;
    window.open(url, '_blank');
    document.getElementById('visit-modal').style.display='flex';
    let remaining = duration;
    const progress = document.getElementById('visit-progress');
    const timer = document.getElementById('visit-timer');
    const interval = setInterval(async ()=>{
        remaining--;
        timer.textContent = remaining;
        progress.style.width = ((duration-remaining)/duration*100)+'%';
        if(remaining <= 0){
            clearInterval(interval);
            document.getElementById('visit-modal').style.display='none';
            const r = await post(`/tasks/${id}`);
            if(r.success) toast(`+${r.points} points earned!`,'success');
        }
    },1000);
}

async function uploadProof(id, input){
    const file = input.files[0]; if(!file) return;
    const form = new FormData(); form.append('proof', file); form.append('_token', CSRF);
    const res = await fetch(`/tasks/${id}`, {method:'POST', headers:{'Accept':'application/json'}, body:form});
    const r = await res.json();
    if(r.success) toast(r.pending ? 'Submitted for review!' : `+${r.points} points!`, 'success');
    else toast(r.error,'error');
}
</script>
@endpush