@extends('layouts.dashboard')

@section('title', 'Earn')

@push('css')
    <style>
        .user-home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
        .user-home-heading h1 { margin:0; color:var(--user-text,#f7f8fc); font-size:clamp(1.75rem,3vw,2.5rem); font-weight:850; letter-spacing:-.035em; }
        .user-home-heading p { max-width:680px; margin:6px 0 0; color:var(--user-muted,#aab2c5); }
        .user-home-eyebrow { display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; color:var(--user-cyan,#22c55e); font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
        .user-home-eyebrow svg { width:16px; height:16px; }
        .user-home-command { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(300px,.58fr); gap:14px; margin-bottom:14px; }
        .user-home-banner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.72fr); min-height:330px; overflow:hidden; border:1px solid rgba(72,189,244,.3); border-radius:20px; background:radial-gradient(circle at 76% 16%,rgba(72,189,244,.15),transparent 30%),linear-gradient(135deg,#0c2138 0%,#10182c 58%,#151332 100%); }
        .user-home-banner-copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4.4vw,54px); padding-right:8px; }
        .user-home-banner h2 { max-width:650px; margin:0 0 12px; color:#fff; font-size:clamp(2rem,3.5vw,3.35rem); line-height:1.03; letter-spacing:-.045em; }
        .user-home-banner p { max-width:590px; margin:0; color:#c5cede; line-height:1.65; }
        .user-home-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
        .user-home-actions .btn { min-height:46px; padding-inline:18px; }
        .user-home-illustration { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:22px 22px 22px 0; }
        .user-home-illustration img { width:min(100%,360px); height:auto; filter:drop-shadow(0 22px 36px rgba(0,0,0,.24)); }
        .user-home-account { display:flex; min-width:0; flex-direction:column; padding:22px; background:linear-gradient(160deg,#121d31,#0d1527); border:1px solid var(--user-border,#263149); border-radius:20px; }
        .user-home-account-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--user-border,#263149); }
        .user-home-account-head small,.user-home-stat span { color:var(--user-muted,#aab2c5); font-size:.74rem; }
        .user-home-account-balance { display:block; margin-top:4px; color:#fff; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:850; letter-spacing:-.04em; }
        .user-home-account-icon { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; color:var(--user-cyan,#22c55e); background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.22); border-radius:12px; }
        .user-home-account-icon svg { width:20px; height:20px; }
        .user-home-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:12px -10px 0; background:var(--user-border,#263149); }
        .user-home-stat { min-width:0; padding:18px 10px; background:#10192b; }
        .user-home-stat strong,.user-home-stat span { display:block; }
        .user-home-stat strong { margin-bottom:3px; color:var(--user-text,#f7f8fc); font-size:1.18rem; }
        .user-home-account-action { display:flex; align-items:center; justify-content:space-between; min-height:48px; margin-top:auto; padding:0 13px; color:#dfeafa; background:#18243a; border:1px solid #2d3b56; border-radius:10px; font-weight:750; }
        .user-home-account-action:hover { color:#fff; border-color:rgba(72,189,244,.52); }
        .user-home-account-action svg { width:17px; height:17px; color:var(--user-cyan,#22c55e); }
        .user-home-tools { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:14px; margin-bottom:20px; }
        .user-home-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0; }
        .user-home-shortcut { position:relative; display:flex; min-width:0; min-height:112px; padding:17px; align-items:flex-start; gap:13px; overflow:hidden; color:var(--user-text,#f7f8fc); background:var(--user-surface,#11192a); border:1px solid var(--user-border,#263149); border-radius:14px; }
        .user-home-shortcut::after { content:""; position:absolute; inset:auto -30px -42px auto; width:96px; height:96px; background:var(--shortcut-glow,rgba(72,189,244,.09)); border-radius:50%; }
        .user-home-shortcut:hover { color:var(--user-text,#f7f8fc); background:var(--user-surface-raised,#162034); border-color:rgba(72,189,244,.48); transform:translateY(-2px); }
        .user-home-shortcut-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; color:var(--user-cyan,#22c55e); background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); border-radius:11px; }
        .user-home-shortcut-icon svg { width:19px; height:19px; }
        .user-home-shortcut-copy { min-width:0; padding-top:2px; }
        .user-home-shortcut strong,.user-home-shortcut-copy > span { display:block; }
        .user-home-shortcut strong { margin-bottom:4px; }
        .user-home-shortcut-copy > span { color:var(--user-muted,#aab2c5); font-size:.74rem; line-height:1.45; }
        .loot-redeem-card { display:flex; min-height:112px; margin:0!important; padding:18px!important; background:linear-gradient(135deg,rgba(72,189,244,.16),rgba(66,51,137,.13))!important; border:1px solid rgba(72,189,244,.3)!important; border-radius:14px!important; }
        .loot-redeem-inner { display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; }
        .loot-redeem-copy { min-width:0; }
        .loot-redeem-copy h3 { font-size:1rem; }
        .loot-redeem-copy p { margin-top:5px!important; font-size:.74rem; line-height:1.45; }
        .loot-redeem-card .btn { min-width:46px; min-height:46px; padding:0 14px; }
        .user-home-content-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:30px 0 12px; }
        .user-home-content-head h2 { margin:0; color:var(--user-text,#f7f8fc); font-size:1.3rem; }
        .user-home-content-head p { margin:3px 0 0; color:var(--user-muted,#aab2c5); font-size:.82rem; }
        @media (max-width: 991px) {
            .user-home-command { grid-template-columns:1fr; }
            .user-home-account { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(300px,1.3fr); gap:16px; }
            .user-home-account-head { border:0; padding:0; }
            .user-home-stats { margin:0; }
            .user-home-account-action { grid-column:1/-1; margin-top:0; }
            .user-home-tools { grid-template-columns:1fr; }
        }
        @media (max-width: 767px) {
            .user-home-heading { align-items:flex-start; flex-direction:column; }
            .user-home-heading .btn { width:100%; justify-content:center; }
            .user-home-banner { grid-template-columns:1fr; }
            .user-home-banner-copy { padding:28px 22px 8px; }
            .user-home-illustration { max-height:220px; padding:0 26px 16px; overflow:hidden; }
            .user-home-illustration img { width:min(100%,310px); }
            .user-home-account { display:flex; }
            .user-home-shortcuts { grid-template-columns:1fr; }
            .user-home-shortcut { min-height:88px; align-items:center; }
        }
        @media (max-width: 575px) {
            .user-home-command { gap:10px; }
            .user-home-banner,.user-home-account { border-radius:16px; }
            .user-home-banner h2 { font-size:2.15rem; }
            .user-home-actions .btn { width:100%; justify-content:center; }
            .loot-redeem-inner { align-items:flex-start; }
            .loot-redeem-card .btn span { display:none; }
        }
        @media (prefers-reduced-motion:reduce) { .user-home-shortcut { transition:none!important; } }
    </style>
@endpush

@section('content')
    @php
        $user = auth()->user();
        $hotOffers = $stats['hot_offers'];
        $featuredOffers = $stats['featured_offers'] ?? collect();
        $offerReward = fn ($offerwall) => number_format((float) preg_replace('/[^0-9.]/', '', (string) $offerwall->rate) ?: 5);
    @endphp

    @if(session('success'))
        <div class="alert alert-success"><div class="alert-body">{{ session('success') }}</div></div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger"><div class="alert-body">{{ session('error') }}</div></div>
    @endif

    <header class="user-home-heading">
        <div>
            <span class="user-home-eyebrow"><i data-feather="zap" aria-hidden="true"></i> Basketloot rewards</span>
            <h1>Welcome back, {{ $user->username }}</h1>
            <p>Pick a featured task, explore trusted offer partners, or continue where you left off.</p>
        </div>
        <a class="btn btn-outline-light" href="{{ route('user.history') }}">
            <i data-feather="clock" class="me-50" aria-hidden="true"></i>My activity
        </a>
    </header>

    <section class="user-home-command" aria-labelledby="homeEarnTitle">
        <div class="user-home-banner">
            <div class="user-home-banner-copy">
                <span class="user-home-eyebrow"><i data-feather="star" aria-hidden="true"></i> Earn your way</span>
                <h2 id="homeEarnTitle">Complete tasks. Collect coins. Choose your reward.</h2>
                <p>Discover offers selected for your device and region, with clear rewards before you start.</p>
                <div class="user-home-actions">
                    <a class="btn btn-loot" href="{{ route('user.earn') }}"><i data-feather="play" class="me-50" aria-hidden="true"></i>Explore tasks</a>
                    <a class="btn btn-outline-light" href="{{ route('user.earn') }}?type=surveys">Browse surveys</a>
                </div>
            </div>
            <div class="user-home-illustration">
                <img src="{{ asset('assets/images/dashboard-journey.svg') }}" alt="Tasks flowing into a Basketloot reward wallet">
            </div>
        </div>
        <aside class="user-home-account" aria-label="Account overview">
            <div class="user-home-account-head">
                <div><small>Ready to cash out</small><strong class="user-home-account-balance">{{ $user->formattedBalance($user->balanceDisplayMode()) }}</strong></div>
                <span class="user-home-account-icon"><i data-feather="credit-card" aria-hidden="true"></i></span>
            </div>
            <div class="user-home-stats">
                <div class="user-home-stat"><strong>{{ number_format($stats['completed_offers']) }}</strong><span>Completed offers</span></div>
                <div class="user-home-stat"><strong>{{ format_coins_as_usd($stats['total_cashout']) }}</strong><span>Total cashout</span></div>
                <div class="user-home-stat"><strong>{{ format_coins_as_usd($stats['lifetime_income']) }}</strong><span>Lifetime income</span></div>
                <div class="user-home-stat"><strong>#{{ number_format($stats['rank']) }}</strong><span>Leaderboard rank</span></div>
            </div>
            <a class="user-home-account-action" href="{{ route('user.shop') }}"><span>Open cashout center</span><i data-feather="arrow-up-right" aria-hidden="true"></i></a>
        </aside>
    </section>

    <section class="user-home-tools" aria-label="Dashboard actions">
        <nav class="user-home-shortcuts" aria-label="Earning shortcuts">
            <a class="user-home-shortcut" href="{{ route('user.earn') }}">
                <span class="user-home-shortcut-icon"><i data-feather="database" aria-hidden="true"></i></span>
                <span class="user-home-shortcut-copy"><strong>Explore all tasks</strong><span>Compare rewards from every active provider.</span></span>
            </a>
            <a class="user-home-shortcut" href="{{ route('user.earn') }}?type=surveys" style="--shortcut-glow:rgba(138,112,255,.12)">
                <span class="user-home-shortcut-icon"><i data-feather="clipboard" aria-hidden="true"></i></span>
                <span class="user-home-shortcut-copy"><strong>Answer surveys</strong><span>Share opinions through available research partners.</span></span>
            </a>
            <a class="user-home-shortcut" href="{{ route('user.history') }}" style="--shortcut-glow:rgba(249,200,74,.1)">
                <span class="user-home-shortcut-icon"><i data-feather="activity" aria-hidden="true"></i></span>
                <span class="user-home-shortcut-copy"><strong>Track progress</strong><span>Review started, pending and approved activity.</span></span>
            </a>
        </nav>

        <div class="user-page-card loot-redeem-card">
            <div class="loot-redeem-inner">
                <div class="loot-redeem-copy">
                    <h3 class="loot-section-title mb-0"><i data-feather="gift" class="me-50" aria-hidden="true"></i>Bonus code</h3>
                    <p class="loot-muted mb-0">Add eligible bonus coins to your balance.</p>
                </div>
                <button type="button" class="btn btn-loot" data-bs-toggle="modal" data-bs-target="#redeemModal" aria-label="Redeem a bonus code">
                    <i data-feather="tag" class="me-50" aria-hidden="true"></i><span>Redeem</span>
                </button>
            </div>
        </div>
    </section>

    <div class="modal fade" id="redeemModal" tabindex="-1" aria-labelledby="redeemModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('user.home.redeem') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title loot-section-title" id="redeemModalTitle">Redeem bonus code</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label class="form-label" for="redeem-code">Enter your coupon / bonus code</label>
                        <input type="text" class="form-control form-control-lg text-center text-uppercase" id="redeem-code"
                               name="code" placeholder="E.g. WELCOME50" autocomplete="off" required
                               style="letter-spacing:2px; font-weight:800;">
                        <p class="loot-muted mt-1 mb-0">Codes are case-insensitive and can each be redeemed once per account.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-loot"><i data-feather="check" class="me-50"></i>Redeem now</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="user-home-content-head"><div><span class="user-home-eyebrow">Recommended now</span><h2>Find your next reward</h2><p>Live opportunities selected from active providers.</p></div></div>

    <div class="user-page-card mb-2">
        <div class="loot-shelf-head">
                <div><h3 class="loot-section-title mb-0"><i data-feather="trending-up" class="me-50"></i>Featured Tasks</h3><p class="loot-muted mb-0">Popular tasks with strong rewards</p></div>
            <a href="{{ route('user.earn') }}" class="btn btn-sm btn-outline-light">View All</a>
        </div>
        @if($hotOffers->count())
            <div class="loot-offer-shelf loot-hot-shelf" aria-label="Hot offers">
                @foreach($hotOffers as $offer)
                    @include('user.partials.direct-offer-card', ['offer' => $offer, 'variant' => 'hot'])
                @endforeach
            </div>
        @else
            <div class="text-center py-4">
                <i data-feather="archive" style="width: 54px; height: 54px;"></i>
                <p class="loot-muted mt-1 mb-0">No offers available at the moment</p>
            </div>
        @endif
    </div>

    @if($featuredOffers->count())
        <div class="user-page-card mb-2">
            <div class="loot-shelf-head">
                <h3 class="loot-section-title mb-0"><i data-feather="target" class="me-50"></i>Featured Offers</h3>
                <a href="{{ route('user.earn') }}" class="btn btn-sm btn-outline-light">Start earning</a>
            </div>
            <div class="loot-offer-shelf" aria-label="Featured offers">
                @foreach($featuredOffers as $offer)
                    @include('user.partials.direct-offer-card', ['offer' => $offer, 'variant' => 'featured'])
                @endforeach
            </div>
        </div>
    @endif

    <div class="user-page-card mb-2">
        <div class="loot-shelf-head">
            <h3 class="loot-section-title mb-0"><i data-feather="star" class="me-50"></i>Offers Partners</h3>
            <a href="{{ route('user.earn') }}" class="btn btn-sm btn-outline-light">View All</a>
        </div>
        <div class="loot-offer-shelf loot-partner-shelf" aria-label="Offer partners">
            @forelse($stats['providers'] as $provider)
                <button class="loot-partner-card" type="button" style="--offer-bg: {{ $provider->background_color ?? '#202637' }}"
                        data-bs-toggle="modal" data-bs-target="#offerwallModal"
                        data-open-url="{{ route('user.offerwalls.open', $provider) }}"
                        data-offer-name="{{ $provider->name }}"
                        onclick="openTrackedOfferwall(this)">
                    <span class="loot-partner-media">
                        <img src="{{ Storage::url($provider->photo_path) }}" alt="{{ $provider->name }}">
                    </span>
                    <span class="loot-partner-name">{{ Str::limit($provider->name, 18) }}</span>
                    <span class="loot-rating">★★★★★</span>
                    <span class="loot-partner-badge">{{ $offerReward($provider) }} coins</span>
                </button>
            @empty
                <p class="loot-muted mb-0">No offer partners yet.</p>
            @endforelse
        </div>
    </div>

    <div class="user-page-card">
        <div class="loot-shelf-head">
            <h3 class="loot-section-title mb-0"><i data-feather="edit" class="me-50"></i>Survey Partners</h3>
            <a href="{{ route('user.earn') }}" class="btn btn-sm btn-outline-light">View All</a>
        </div>
        <div class="loot-offer-shelf loot-partner-shelf" aria-label="Survey partners">
            @forelse($stats['surveys'] as $provider)
                <button class="loot-partner-card" type="button" style="--offer-bg: {{ $provider->background_color ?? '#202637' }}"
                        data-bs-toggle="modal" data-bs-target="#offerwallModal"
                        data-open-url="{{ route('user.offerwalls.open', $provider) }}"
                        data-offer-name="{{ $provider->name }}"
                        onclick="openTrackedOfferwall(this)">
                    <span class="loot-partner-media">
                        <img src="{{ Storage::url($provider->photo_path) }}" alt="{{ $provider->name }}">
                    </span>
                    <span class="loot-partner-name">{{ Str::limit($provider->name, 18) }}</span>
                    <span class="loot-rating">★★★★★</span>
                    <span class="loot-partner-badge">Survey</span>
                </button>
            @empty
                <p class="loot-muted mb-0">No survey partners yet.</p>
            @endforelse
        </div>
    </div>
    @include('user.partials.offerwall-modal')
@endsection
