@extends('layouts.app')
@section('title', 'Кабинет — Presaver')

@section('content')
<div class="flex items-center justify-between">
    <h1 class="text-xl font-bold">Ваши задания</h1>
    <a href="{{ route('campaigns.index') }}"
       class="text-sm rounded-lg bg-brand text-white px-3 py-2 font-medium hover:bg-brand-dark">
        Мои кампании
    </a>
</div>

<p class="mt-1 text-sm text-gray-600">
    Пресейвните эти треки, затем прикрепите скриншоты ниже — по одному или пачкой.
</p>

{{-- Список заданий --}}
<div class="mt-4 space-y-3">
    @forelse($tasks as $task)
        <div class="rounded-xl bg-white border border-gray-200 p-4 flex items-center gap-3">
            @if($task->campaign->cover_url)
                <img src="{{ $task->campaign->cover_url }}" alt="" class="w-12 h-12 rounded-lg object-cover bg-gray-100 shrink-0">
            @else
                <div class="w-12 h-12 rounded-lg bg-gray-100 shrink-0"></div>
            @endif
            <div class="min-w-0 flex-1">
                <p class="font-medium truncate">{{ $task->campaign->title ?? 'Трек' }}</p>
                <p class="text-sm text-gray-500 truncate">{{ $task->campaign->artist ?? $task->campaign->band_link_url }}</p>
                @if($task->status === 'proof_matched')
                    <span class="mt-1 inline-block text-xs text-amber-700 bg-amber-50 rounded px-2 py-0.5">На модерации</span>
                @elseif($task->status === 'visited')
                    <span class="mt-1 inline-block text-xs text-gray-500">Открыто · ждём скриншот</span>
                @endif
            </div>
            <a href="{{ route('task.go', $task) }}" target="_blank" rel="noopener"
               class="shrink-0 rounded-lg border border-brand text-brand px-3 py-2 text-sm font-medium hover:bg-indigo-50">
                Пресейв →
            </a>
        </div>
    @empty
        <div class="rounded-xl bg-white border border-gray-200 p-6 text-center text-gray-500 text-sm">
            Пока нет доступных заданий. Загляните позже — как только появятся новые кампании, они окажутся здесь.
        </div>
    @endforelse
</div>

{{-- Загрузка пруфов пачкой --}}
<form method="POST" action="{{ route('proofs.upload') }}" enctype="multipart/form-data" class="mt-6">
    @csrf
    <label for="proofs"
           class="block cursor-pointer rounded-xl border-2 border-dashed border-gray-300 bg-white p-6 text-center hover:border-brand transition">
        <svg class="mx-auto w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.9A5 5 0 1115.9 6.5 4.5 4.5 0 1117 16H7z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 12v6m0-6l-2 2m2-2l2 2"/>
        </svg>
        <p class="mt-2 text-sm font-medium">Перетащите скриншоты сюда или нажмите</p>
        <p class="text-xs text-gray-400">JPG / PNG / WEBP, до 10 файлов за раз</p>
        <input id="proofs" name="proofs[]" type="file" accept="image/*" multiple class="hidden"
               onchange="document.getElementById('proof-count').textContent = this.files.length + ' файл(ов) выбрано'; document.getElementById('submit-proofs').disabled = this.files.length === 0;">
    </label>
    <p id="proof-count" class="mt-2 text-xs text-gray-500 text-center"></p>
    <button id="submit-proofs" type="submit" disabled
            class="mt-3 w-full rounded-lg bg-brand text-white px-4 py-3 font-medium hover:bg-brand-dark disabled:opacity-40 disabled:cursor-not-allowed">
        Отправить на проверку
    </button>
</form>

{{-- История баллов --}}
@if($ledger->isNotEmpty())
    <div class="mt-8">
        <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">История баллов</h2>
        <div class="mt-2 rounded-xl bg-white border border-gray-200 divide-y divide-gray-100">
            @foreach($ledger as $entry)
                <div class="flex items-center justify-between px-4 py-2.5 text-sm">
                    <span class="text-gray-600">
                        {{ $entry->reason === 'presave_verified' ? 'Подтверждённый пресейв' : ($entry->reason === 'campaign_published' ? 'Публикация кампании' : $entry->reason) }}
                        <span class="text-gray-400">· {{ $entry->created_at->format('d.m H:i') }}</span>
                    </span>
                    <span class="font-medium {{ $entry->delta > 0 ? 'text-emerald-600' : 'text-red-600' }}">
                        {{ $entry->delta > 0 ? '+' : '' }}{{ $entry->delta }}
                    </span>
                </div>
            @endforeach
        </div>
    </div>
@endif
@endsection