@php
    use App\Models\TaskSubmission;

    $submissionMeta = [
        TaskSubmission::STATUS_PENDING => ['label' => 'পর্যালোচনায় আছে', 'class' => 'border-info/50 bg-info/10 text-info'],
        TaskSubmission::STATUS_APPROVED => ['label' => 'সম্পন্ন হয়েছে', 'class' => 'border-success/50 bg-success/10 text-success'],
        TaskSubmission::STATUS_REJECTED => ['label' => 'বাতিল হয়েছে', 'class' => 'border-danger/50 bg-danger/10 text-danger'],
    ];
    $meta = $submission !== null ? ($submissionMeta[$submission->status] ?? null) : null;
@endphp

<x-layouts.app title="কাজের বিবরণ">
    <a href="{{ route('tasks.index') }}" class="inline-flex items-center gap-1 text-sm font-semibold text-info hover:underline">
        <x-icon name="arrow-left" class="h-4 w-4"/> কাজের তালিকায় ফিরুন
    </a>

    <article class="card mt-3" aria-labelledby="task-title">
        <div class="flex items-start justify-between gap-3">
            <h1 id="task-title" class="text-lg font-bold leading-snug">{{ $task->title }}</h1>
            @if ($meta !== null)
                <span class="badge shrink-0 {{ $meta['class'] }}">{{ $meta['label'] }}</span>
            @else
                <span class="badge shrink-0 border-success/50 bg-success/10 text-success">উপলব্ধ</span>
            @endif
        </div>

        <div class="mt-3 grid grid-cols-2 gap-3 text-sm">
            <div class="rounded-xl border border-line bg-surface-raised px-3 py-2">
                <p class="text-xs text-ink-muted">রিওয়ার্ড</p>
                <p class="mt-0.5 font-bold text-gold">৳ {{ number_format((float) $task->reward_amount, 2) }}</p>
            </div>
            <div class="rounded-xl border border-line bg-surface-raised px-3 py-2">
                <p class="text-xs text-ink-muted">সময় (আনুমানিক)</p>
                <p class="mt-0.5 font-semibold">{{ $task->estimated_minutes !== null ? 'প্রায় '.$task->estimated_minutes.' মিনিট' : '—' }}</p>
            </div>
        </div>

        @if ($task->description)
            <div class="mt-4">
                <h2 class="text-sm font-semibold text-ink-muted">কাজের বিবরণ</h2>
                <p class="mt-1 text-sm leading-relaxed">{{ $task->description }}</p>
            </div>
        @endif

        @if ($task->instructions)
            <div class="mt-4">
                <h2 class="text-sm font-semibold text-ink-muted">নির্দেশনা</h2>
                <p class="mt-1 whitespace-pre-line text-sm leading-relaxed">{{ $task->instructions }}</p>
            </div>
        @endif

        @if ($task->link_url)
            <div class="mt-4">
                <h2 class="text-sm font-semibold text-ink-muted">কাজের লিংক</h2>
                <a href="{{ $task->link_url }}" target="_blank" rel="noopener noreferrer"
                   class="mt-1 inline-flex items-center gap-2 rounded-xl border border-line bg-surface-raised px-3 py-2 text-sm font-semibold text-gold transition-colors hover:border-gold-deep">
                    <x-icon :name="$task->linkPlatform() ?? 'link'" class="h-5 w-5"/>
                    {{ $task->linkLabel() }} খুলুন
                    <x-icon name="arrow-right" class="h-4 w-4"/>
                </a>
            </div>
        @endif

        <p class="mt-4 rounded-xl border border-line bg-surface-raised px-3 py-2 text-xs leading-relaxed text-ink-muted">
            কাজ জমা দেওয়ার পর এটি পর্যালোচনার জন্য অপেক্ষা করবে। অনুমোদিত হলে রিওয়ার্ড আপনার ওয়ালেটে যোগ হবে।
        </p>

        <div class="mt-4">
            @if ($submission === null)
                <form method="POST" action="{{ route('tasks.submit', $task) }}" onsubmit="return confirm('আপনি কি নির্দেশনা অনুযায়ী কাজটি সম্পন্ন করেছেন?');">
                    @csrf

                    <button type="submit" class="btn-primary w-full">কাজ জমা দিন</button>
                </form>
            @elseif ($submission->status === TaskSubmission::STATUS_PENDING)
                <p class="rounded-xl border border-info/40 bg-info/10 px-3 py-2.5 text-sm leading-relaxed text-info">
                    আপনার কাজ জমা হয়েছে ({{ $submission->submitted_at->format('d/m/Y, h:i a') }})। পর্যালোচনা শেষ হলে এখানে ফলাফল দেখতে পাবেন।
                </p>
            @elseif ($submission->status === TaskSubmission::STATUS_APPROVED)
                <p class="rounded-xl border border-success/40 bg-success/10 px-3 py-2.5 text-sm leading-relaxed text-success">
                    কাজটি অনুমোদিত হয়েছে। ৳ {{ number_format((float) $submission->reward_amount, 2) }} রিওয়ার্ড আপনার ওয়ালেটে যোগ হয়েছে।
                </p>
            @else
                <div class="rounded-xl border border-danger/40 bg-danger/10 px-3 py-2.5 text-sm leading-relaxed">
                    <p class="font-semibold text-danger">কাজটি বাতিল করা হয়েছে।</p>
                    <p class="mt-1 text-ink-muted">কারণ: {{ $submission->rejection_reason ?? 'উল্লেখ করা হয়নি' }}</p>
                </div>
            @endif
        </div>
    </article>
</x-layouts.app>