@php
    use App\Models\Task;
    use App\Models\TaskSubmission;

    $bengaliDigits = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯'];
    $toBengali = static fn (int|string $value): string => strtr((string) $value, [
        '0' => '০', '1' => '১', '2' => '২', '3' => '৩', '4' => '৪',
        '5' => '৫', '6' => '৬', '7' => '৭', '8' => '৮', '9' => '৯',
    ]);

    $taskStatuses = [
        'all' => 'সব কাজ',
        'new' => 'নতুন',
        'running' => 'চলমান',
        'submitted' => 'জমা দেওয়া',
        'completed' => 'সম্পন্ন',
    ];

    $taskStatusFor = function (Task $task) use ($userSubmissions, $toBengali): array {
        $submission = $userSubmissions[$task->id] ?? null;

        if ($submission?->status === TaskSubmission::STATUS_APPROVED) {
            return ['label' => 'সম্পন্ন হয়েছে', 'class' => 'border-success/50 bg-success/10 text-success', 'action' => 'সম্পন্ন হয়েছে', 'disabled' => true];
        }

        if ($submission?->status === TaskSubmission::STATUS_PENDING) {
            return ['label' => 'পর্যালোচনায় আছে', 'class' => 'border-info/50 bg-info/10 text-info', 'action' => 'পর্যালোচনায় আছে', 'disabled' => true];
        }

        if ($submission?->status === TaskSubmission::STATUS_REJECTED) {
            return ['label' => 'বাতিল করা হয়েছে', 'class' => 'border-danger/50 bg-danger/10 text-danger', 'action' => 'আবার জমা দিন', 'disabled' => false];
        }

        return ['label' => 'উপলব্ধ', 'class' => 'border-success/50 bg-success/10 text-success', 'action' => 'কাজ শুরু করুন', 'disabled' => false];
    };
@endphp

<x-layouts.app title="প্রিমিয়াম ইনকাম">
    <section class="text-center" aria-labelledby="premium-heading">
        <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-full border border-gold-deep/60 bg-gold/10 text-gold" aria-hidden="true">
            <x-icon name="crown" class="h-6 w-6"/>
        </span>
        <h1 id="premium-heading" class="mt-3 text-2xl font-extrabold text-gold">প্রিমিয়াম ইনকাম</h1>
        <p class="mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ink-muted">
            নিচের বাটনে ক্লিক করে কাজগুলো একে একে সম্পন্ন করুন। কাজ সফল হলে রিওয়ার্ড পাবেন।
        </p>
    </section>

    <section class="mt-5 card" aria-labelledby="earnings-summary-heading">
        <h2 id="earnings-summary-heading" class="sr-only">আয়ের সারসংক্ষেপ</h2>
        <div class="grid grid-cols-2 gap-3 text-sm">
            <div class="rounded-xl border border-line bg-surface-raised px-3 py-3">
                <p class="text-xs text-ink-muted">উত্তোলনযোগ্য ব্যালেন্স</p>
                <p class="mt-0.5 font-bold text-gold">৳ {{ number_format((float) $wallet->available_balance, 2) }}</p>
            </div>
            <div class="rounded-xl border border-line bg-surface-raised px-3 py-3">
                <p class="text-xs text-ink-muted">অপেক্ষমাণ রিওয়ার্ড</p>
                <p class="mt-0.5 font-bold text-warning">৳ {{ number_format((float) $wallet->pending_balance, 2) }}</p>
            </div>
        </div>
    </section>

    <section class="mt-5" aria-labelledby="task-filters-heading">
        <h2 id="task-filters-heading" class="sr-only">টাস্ক ফিল্টার</h2>

        <form method="GET" action="{{ route('tasks.index') }}" class="mb-3">
            <div class="relative">
                <x-icon name="search" class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-muted/50" aria-hidden="true"/>
                <input type="text" name="search" value="{{ $currentSearch }}" placeholder="কাজ খুঁজুন..."
                    class="w-full rounded-xl border border-line bg-surface-raised pl-10 pr-4 py-2.5 text-sm focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"/>
                @if ($currentSearch)
                    <button type="button" onclick="this.closest('form').reset()" class="absolute right-3 top-1/2 -translate-y-1/2 text-ink-muted/50 hover:text-ink">
                        <x-icon name="x" class="h-4 w-4"/>
                    </button>
                @endif
            </div>
        </form>

        <div class="flex gap-2 overflow-x-auto pb-1 mb-3 scrollbar-hide" role="group" aria-label="ক্যাটাগরি ফিল্টার">
            <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}"
                class="shrink-0 inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors
                {{ $currentCategory === null ? 'border-gold bg-gold/10 text-gold' : 'border-line text-ink-muted hover:border-gold-deep' }}">
                সব
            </a>
            @foreach ($categories as $cat)
                <a href="{{ request()->fullUrlWithQuery(['category' => $cat]) }}"
                    class="shrink-0 inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors
                    {{ $currentCategory === $cat ? 'border-gold bg-gold/10 text-gold' : 'border-line text-ink-muted hover:border-gold-deep' }}">
                    {{ Task::categories()[$cat] ?? $cat }}
                </a>
            @endforeach
        </div>

        <div class="flex gap-2 overflow-x-auto pb-1 mb-3 scrollbar-hide" role="group" aria-label="স্ট্যাটাস ফিল্টার">
            @foreach ($taskStatuses as $key => $label)
                <a href="{{ request()->fullUrlWithQuery(['status' => $key === 'all' ? null : $key]) }}"
                    class="shrink-0 inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors
                    {{ $currentStatus === ($key === 'all' ? null : $key) || ($key === 'all' && $currentStatus === null) ? 'border-gold bg-gold/10 text-gold' : 'border-line text-ink-muted hover:border-gold-deep' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
    </section>

    @if ($tasks->isEmpty())
        {{-- <div class="mt-5">
            <x-empty-state icon="tasks" title="এখনো কোনো কাজ উপলব্ধ নেই" message="নতুন কাজ যোগ হলে এখানে দেখতে পাবেন।"/>
        </div> --}}
    @else
        {{-- <div class="mt-5 space-y-3">
            @foreach ($tasks as $task)
                @php
                    $status = $taskStatusFor($task);
                    $claimed = (int) ($claimedToday[$task->id] ?? 0);
                    $limit = max(1, (int) $task->daily_limit);
                    $completed = $claimed >= $limit;
                @endphp

                <article class="card" aria-labelledby="task-{{ $task->id }}-title">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <h3 id="task-{{ $task->id }}-title" class="font-bold text-ink leading-snug">{{ $task->title }}</h3>
                            <span class="inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold
                                {{ $status['class'] }}">{{ $status['label'] }}</span>
                        </div>
                        <span class="font-bold text-gold">৳ {{ number_format((float) $task->reward_amount, 2) }}</span>
                    </div>

                    @if ($task->description)
                        <p class="mt-2 text-xs leading-relaxed text-ink-muted/80">{{ $task->description }}</p>
                    @endif

                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                        <div class="flex items-center gap-1 text-ink-muted">
                            <x-icon name="tag" class="h-3 w-3"/>
                            <span>{{ Task::categories()[$task->category] ?? $task->category }}</span>
                        </div>
                        @if ($task->estimated_minutes)
                            <div class="flex items-center gap-1 text-ink-muted">
                                <x-icon name="clock" class="h-3 w-3"/>
                                <span>{{$task->estimated_minutes}} মিনিট</span>
                            </div>
                        @endif
                    </div>

                    <div class="mt-4 flex items-center justify-between">
                        @if (! $status['disabled'] && ! $completed)
                            <a href="{{ route('tasks.show', $task) }}"
                                class="btn-primary flex-1">{{ $status['action'] }}</a>
                        @else
                            <span class="btn-secondary-sm {{ $completed ? 'opacity-50 cursor-not-allowed' : '' }}" {{ $completed ? 'disabled' : '' }}>
                                {{ $status['action'] }}
                            </span>
                        @endif
                        @if ($claimed > 0)
                            <span class="text-xs font-semibold text-gold">
                                আজ {{ $toBengali($claimed) }} / {{ $toBengali($limit) }}
                            </span>
                        @endif
                    </div>
                </article>
            @endforeach
        </div> --}}

        <div class="mt-4">
            {{ $tasks->links() }}
        </div>
    @endif

    @if ($slots->isNotEmpty())
        <section class="mt-8 card" aria-labelledby="ad-slots-heading">
            <h2 id="ad-slots-heading" class="text-sm font-semibold text-ink-muted">দৈনিক বিজ্ঞাপন স্লট</h2>
            <div class="mt-3 grid grid-cols-2 gap-3 sm:gap-4">
                @foreach ($slots as $index => $task)
                    @php
                        $claimed = (int) ($claimedToday[$task->id] ?? 0);
                        $limit = max(1, (int) $task->daily_limit);
                        $completed = $claimed >= $limit;
                        $slotNumber = $index + 1;
                    @endphp

                    <article
                        data-ad-slot
                        data-task-id="{{ $task->id }}"
                        data-daily-limit="{{ $limit }}"
                        data-claimed="{{ $claimed }}"
                        data-completed="{{ $completed ? '1' : '0' }}"
                        data-start-url="{{ route('tasks.ad.start', $task) }}"
                        data-claim-url="{{ route('tasks.ad.claim', $task) }}"
                        class="flex flex-col rounded-2xl border border-sky-200 bg-sky-50 p-3 shadow-sm"
                        aria-labelledby="ad-{{ $task->id }}-title"
                    >
                        <div class="flex items-center justify-between gap-2">
                            @if ($task->category === \App\Models\Task::CATEGORY_ADS)
                                <x-lottie-icon
                                    src="https://lottie.host/d547e2ac-1749-4f4d-b66d-edc3a6d7abcd/KQkKOego0O.lottie"
                                    size="h-9 w-9"
                                    fallback-icon="ads"
                                    fallback-size="h-5 w-5"
                                    class="rounded-xl bg-sky-100 text-sky-600"
                                    aria-hidden="true"
                                />
                            @else
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-sky-100 text-sky-600" aria-hidden="true">
                                    <x-icon :name="$task->categoryIcon()" class="h-5 w-5"/>
                                </span>
                            @endif
                            <span class="inline-flex items-center rounded-full bg-orange-500 px-2 py-0.5 text-[10px] font-bold text-white">
                                এখানে চাপ দিন
                            </span>
                        </div>

                        <a
                            href="{{ $task->link_url }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            data-ad-play
                            aria-label="{{ $task->title }} — বিজ্ঞাপন খুলুন"
                            class="mt-3 flex h-16 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                        >
                            <x-icon name="play" class="h-8 w-8"/>
                        </a>

                        <h2 id="ad-{{ $task->id }}-title" class="mt-3 text-sm font-bold leading-snug text-slate-900">{{ $task->title }}</h2>
                        <p class="mt-1 text-xs leading-relaxed text-slate-500">{{ $task->description }}</p>

                        <div class="mt-auto pt-3">
                            <span class="inline-flex items-center gap-1 rounded-full bg-sky-100 px-2.5 py-1 text-xs font-bold text-sky-700">
                                <x-icon name="play" class="h-3 w-3" aria-hidden="true"/>
                                আজ {{ $toBengali($slotNumber) }}:
                                <span data-ad-count>{{ $toBengali($claimed) }}</span> / {{ $toBengali($limit) }}
                            </span>
                            <p data-ad-status class="mt-2 text-xs font-semibold text-slate-500" aria-live="polite">
                                {{ $completed ? 'আজকের সীমা শেষ' : '' }}
                            </p>
                        </div>
                    </article>
                @endforeach
            </div>
        </section>
    @endif

    <div
        data-ad-modal
        class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 p-4"
        role="dialog"
        aria-modal="true"
        aria-labelledby="ad-modal-title"
    >
        <div class="w-full max-w-sm rounded-2xl border border-line bg-surface p-5 text-center">
            <h2 id="ad-modal-title" class="text-lg font-bold">বিজ্ঞাপন দেখা হচ্ছে</h2>
            <p data-ad-modal-text class="mt-2 text-sm leading-relaxed text-ink-muted">
                বিজ্ঞাপনটি দেখুন। রিওয়ার্ড নিতে ১০ সেকেন্ড অপেক্ষা করুন।
            </p>
            <p data-ad-countdown class="mt-4 text-4xl font-extrabold text-gold" aria-live="polite">১০</p>
            <p data-ad-modal-message class="mt-3 text-sm font-semibold text-danger" role="alert"></p>
            <button type="button" data-ad-claim class="btn-primary mt-4 hidden">রিওয়ার্ড গ্রহণ করুন</button>
            <button type="button" data-ad-close class="btn-secondary mt-2">বন্ধ করুন</button>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
                const digits = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯'];
                const toBn = (value) => String(value).replace(/[0-9]/g, (d) => digits[Number(d)]);

                const modal = document.querySelector('[data-ad-modal]');
                const modalText = modal?.querySelector('[data-ad-modal-text]');
                const countdownEl = modal?.querySelector('[data-ad-countdown]');
                const claimBtn = modal?.querySelector('[data-ad-claim]');
                const closeBtn = modal?.querySelector('[data-ad-close]');
                const messageEl = modal?.querySelector('[data-ad-modal-message]');

                if (!modal) {
                    return;
                }

                let active = null;
                let ticker = null;

                const openModal = () => {
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                };

                const closeModal = () => {
                    if (ticker) {
                        clearInterval(ticker);
                        ticker = null;
                    }
                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                    active = null;
                };

                const post = async (url, body) => {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrf,
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(body ?? {}),
                    });
                    const data = await response.json().catch(() => ({}));

                    return { ok: response.ok, data };
                };

                const setStatus = (card, message) => {
                    const status = card.querySelector('[data-ad-status]');
                    if (status) {
                        status.textContent = message ?? '';
                    }
                };

                const markCompleted = (card) => {
                    card.dataset.completed = '1';
                    setStatus(card, 'আজকের সীমা শেষ');
                };

                const revealClaim = () => {
                    countdownEl.textContent = toBn(0);
                    modalText.textContent = 'সময় শেষ। এখন রিওয়ার্ড গ্রহণ করুন।';
                    claimBtn.classList.remove('hidden');
                    claimBtn.disabled = false;
                    claimBtn.focus?.();
                };

                const startCountdown = (seconds) => {
                    let remaining = Math.max(0, Number(seconds) || 0);

                    claimBtn.classList.add('hidden');
                    claimBtn.disabled = false;
                    messageEl.textContent = '';
                    modalText.textContent = 'বিজ্ঞাপনটি দেখুন। রিওয়ার্ড নিতে ১০ সেকেন্ড অপেক্ষা করুন।';
                    countdownEl.textContent = toBn(remaining);

                    if (ticker) {
                        clearInterval(ticker);
                        ticker = null;
                    }

                    if (remaining <= 0) {
                        revealClaim();
                        return;
                    }

                    ticker = setInterval(() => {
                        remaining -= 1;
                        countdownEl.textContent = toBn(Math.max(0, remaining));

                        if (remaining <= 0) {
                            clearInterval(ticker);
                            ticker = null;
                            revealClaim();
                        }
                    }, 1000);
                };

                const startSession = async (card) => {
                    const response = await post(card.dataset.startUrl, {});

                    if (!response.ok || !response.data.ok) {
                        setStatus(card, response.data.message ?? 'কিছু ভুল হয়েছে। আবার চেষ্টা করুন।');
                        return;
                    }

                    active = { card, reference: response.data.reference };
                    openModal();
                    startCountdown(response.data.countdown);
                };

                document.querySelectorAll('[data-ad-slot]').forEach((card) => {
                    const play = card.querySelector('[data-ad-play]');

                    play?.addEventListener('click', (event) => {
                        if (card.dataset.completed === '1') {
                            event.preventDefault();
                            setStatus(card, 'আজকের সীমা শেষ');
                            return;
                        }

                        startSession(card);
                    });
                });

                claimBtn?.addEventListener('click', async () => {
                    if (!active) {
                        return;
                    }

                    claimBtn.disabled = true;
                    const response = await post(active.card.dataset.claimUrl, { reference: active.reference });

                    if (!response.ok || !response.data.ok) {
                        claimBtn.disabled = false;
                        messageEl.textContent = response.data.message ?? 'রিওয়ার্ড গ্রহণ করা যায়নি। আবার চেষ্টা করুন।';
                        return;
                    }

                    const card = active.card;
                    const claimed = Number(response.data.claimed) || 0;
                    const limit = Number(card.dataset.dailyLimit) || 1;

                    card.dataset.claimed = String(claimed);
                    const countEl = card.querySelector('[data-ad-count]');
                    if (countEl) {
                        countEl.textContent = toBn(claimed);
                    }

                    modalText.textContent = 'অভিনন্দন! আপনার রিওয়ার্ড যোগ হয়েছে। আপনি পেয়েছেন ৳' + toBn(response.data.reward);
                    countdownEl.textContent = '✓';
                    messageEl.textContent = '';
                    claimBtn.classList.add('hidden');

                    if (claimed >= limit) {
                        markCompleted(card);
                    } else {
                        setStatus(card, 'রিওয়ার্ড যোগ হয়েছে।');
                    }
                });

                closeBtn?.addEventListener('click', closeModal);

                document.addEventListener('keydown', (event) => {
                    if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
                        closeModal();
                    }
                });
            });
        </script>
    @endpush
</x-layouts.app>