@extends('frontend.main_master')
@section('body-class', 'panel-page panel-scrollable')
@section('title', t('balance') . ' - ' . t('site-title'))

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/profile-balance.css') }}">
@endpush

@section('content')
    <div class="container py-4 py-lg-5">
        <div class="balance-hero p-3 p-lg-4 mb-3 text-white">
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-3">
                <div>
                    <div class="small text-white-50 mb-1">{{ t('balance-hero-title') }}</div>
                    <h1 class="h4 fw-bold mb-1">{{ t('hi') }} {{ $user->name ?? 'Miembro' }}
                        {{ t('balance-hero-subtitle') }}</h1>
                    <div class="small text-white-50">{{ t('balance-hero-description') }}</div>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('package.checkout') }}" class="btn btn-light rounded-pill px-3 fw-semibold">
                        <i class="fa-solid fa-plus me-1"></i> {{ t('buy-package') }}
                    </a>
                    @if ($isSubscriber)
                    @else
                        <a href="{{ route('subscription.checkout') }}"
                            class="btn btn-outline-light rounded-pill px-3 fw-semibold">
                            <i class="fa-solid fa-crown me-1"></i>
                            {{ t('subscribe') }}
                        </a>
                    @endif

                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-6 col-xl-3">
                <div class="balance-stat-card p-3 p-lg-4 h-100">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="balance-label">{{ t('token') }}</span>
                        <i class="fa-solid fa-coins text-warning"></i>
                    </div>
                    <div class="balance-value h3 mb-1">{{ number_format($chatWordsRemaining) }}</div>
                    <div class="small text-muted">{{ t('remaining-tokens') }}</div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="balance-stat-card p-3 p-lg-4 h-100">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="balance-label">{{ t('report-limit-modal-title') }}</span>
                        <i class="fa-solid fa-file-lines text-danger"></i>
                    </div>
                    <div class="balance-value h3 mb-1">{{ $reportCreditsRemaining }}</div>
                    <div class="small text-muted">{{ t('remaining-report-credits') }}</div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="balance-stat-card p-3 p-lg-4 h-100">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="balance-label">{{ t('map-credit') }}</span>
                        <i class="fa-solid fa-map text-success"></i>
                    </div>
                    <div class="balance-value h3 mb-1">{{ $mapCreditsRemaining }}</div>
                    <div class="small text-muted">{{ t('remaining-map-credits') }}</div>
                </div>
            </div>

            <div class="col-6 col-xl-3">
                <div class="balance-stat-card p-3 p-lg-4 h-100">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="balance-label">{{ t('daily-free') }}</span>
                        <i class="fa-solid fa-gift text-primary"></i>
                    </div>
                    @if ($isSubscriber)
                        <div class="balance-value h3 mb-1">&infin;</div>
                        <div class="small text-muted">{{ t('unlimited-reports') }}</div>
                    @elseif ($hasDailyFreeReport)
                        <div class="balance-value h3 mb-1">1</div>
                        <div class="small text-muted">{{ t('daily-free-report-available') }}</div>
                    @else
                        <div class="balance-value h3 mb-1">0</div>
                        <div class="small text-muted">{{ t('daily-free-report-used') }}</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="balance-section-card p-3 mb-3" id="subscription-status">
            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-between gap-2">
                <div class="d-flex align-items-center gap-2">
                    <span
                        class="d-inline-flex align-items-center justify-content-center rounded-circle bg-light p-2 flex-shrink-0">
                        <i class="fa-solid fa-crown text-warning"></i>
                    </span>
                    <div>
                        <div class="d-flex align-items-center gap-2 mb-0">
                            <span class="fw-bold text-dark">{{ t('subscription-status') }}</span>
                            @if ($isSubscriber)
                                <span class="badge rounded-pill text-bg-success px-2">{{ t('active') }}</span>
                            @else
                                <span class="badge rounded-pill text-bg-secondary px-2">{{ t('inactive') }}</span>
                            @endif
                        </div>
                        @if ($activeSubscription)
                            <span class="small text-muted">
                                {{ optional($activeSubscription->starts_at)->format('d.m.Y') }} -
                                {{ optional($activeSubscription->ends_at)->format('d.m.Y') }}
                                @if (!is_null($subscriptionDaysLeft))
                                    ·
                                    @if ($subscriptionDaysLeft >= 0)
                                        @php $daysLeftInt = (int) floor($subscriptionDaysLeft); @endphp
                                        <span class="fw-semibold text-success">
                                            @if ($daysLeftInt === 0)
                                                {{ t('expires-today') }}
                                            @elseif ($daysLeftInt === 1)
                                                {{ t('expires-tomorrow') }}
                                            @else
                                                {{ $daysLeftInt }} {{ t('expires-in-days') }}
                                            @endif
                                        </span>
                                    @else
                                        <span class="fw-semibold text-danger">{{ t('subscription-expired') }}</span>
                                    @endif
                                @endif
                            </span>
                        @else
                            <span class="small text-muted">
                                {{ t('no-active-subscription') }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12 col-lg-5">
                <div class="balance-section-card p-3 h-100">
                    <h2 class="small fw-bold mb-2 text-dark">
                        <i class="fa-solid fa-chart-line text-success me-1"></i>{{ t('usage-summary') }}
                    </h2>

                    @if ($usage)
                        <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="small text-muted">{{ t('my-ai-comments') }}</span>
                            <span class="fw-bold text-dark">{{ $usage->comment_count }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="small text-muted">{{ t('total-reports') }}</span>
                            <span class="fw-bold text-dark">{{ $usage->report_count }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-2">
                            <span class="small text-muted">{{ t('total-tokens-used') }}</span>
                            <span class="fw-bold text-dark">{{ number_format($usage->chat_words_total) }}</span>
                        </div>
                    @else
                        <div class="text-center py-3">
                            <i class="fa-solid fa-chart-pie text-secondary fs-3 d-block mb-1 opacity-50"></i>
                            <p class="small text-muted mb-0">{{ t('no-usage-data') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <div class="col-12 col-lg-7">
                <div class="balance-section-card p-3 h-100">
                    <h2 class="small fw-bold mb-2 text-dark">
                        <i class="fa-solid fa-receipt text-success me-1"></i>{{ t('recent-purchases') }}
                    </h2>

                    @if ($recentPurchases->isEmpty())
                        <div class="text-center py-3">
                            <i class="fa-solid fa-bag-shopping text-secondary fs-3 d-block mb-1 opacity-50"></i>
                            <p class="small text-muted mb-0">{{ t('no-recent-purchases') }}</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th class="small text-uppercase text-muted">{{ t('date') }}</th>
                                        <th class="small text-uppercase text-muted">{{ t('product') }}</th>
                                        <th class="small text-uppercase text-muted">{{ t('type') }}</th>
                                        <th class="small text-uppercase text-muted text-end">{{ t('amount') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentPurchases as $purchase)
                                        <tr>
                                            <td class="text-nowrap small text-dark">
                                                {{ $purchase->created_at?->format('d.m.Y H:i') }}
                                            </td>
                                            <td class="small text-dark">
                                                @if ($purchase->package)
                                                    {{ $purchase->package->name }}
                                                @else
                                                    @php
                                                        $labelMap = [
                                                            'subscription' => t('subscription-purchase'),
                                                            'single_comment' => t('single-comment'),
                                                            'single_chat' => t('single-chat'),
                                                            'single_report' => t('single-report'),
                                                            'single_comment_tokens' => t('single-comment-tokens'),
                                                        ];
                                                    @endphp
                                                    {{ $labelMap[$purchase->purchase_type] ?? ucfirst($purchase->purchase_type) }}
                                                @endif
                                            </td>
                                            <td class="text-nowrap">
                                                @switch($purchase->purchase_type)
                                                    @case('package')
                                                        <span
                                                            class="badge rounded-pill text-bg-primary text-white px-2">{{ t('packages') }}</span>
                                                    @break

                                                    @case('subscription')
                                                        <span
                                                            class="badge rounded-pill text-bg-success text-white px-2">{{ t('subscriptions') }}</span>
                                                    @break

                                                    @case('single_comment')
                                                        <span
                                                            class="badge rounded-pill text-bg-success text-white px-2">{{ t('single-comment') }}</span>
                                                    @break

                                                    @case('single_chat')
                                                        <span
                                                            class="badge rounded-pill text-bg-dark text-white px-2">{{ t('single-chat') }}</span>
                                                    @break

                                                    @case('single_report')
                                                        <span
                                                            class="badge rounded-pill text-bg-warning text-white px-2">{{ t('single-report') }}</span>
                                                    @break

                                                    @case('single_comment_tokens')
                                                        <span
                                                            class="badge rounded-pill text-bg-info text-white px-2">{{ t('single-comment-tokens') }}</span>
                                                    @break

                                                    @default
                                                        <span
                                                            class="badge rounded-pill text-bg-secondary text-white px-2">{{ $purchase->purchase_type }}</span>
                                                @endswitch
                                            </td>
                                            <td class="text-end fw-semibold small text-nowrap text-dark">
                                                {{ number_format($purchase->amount_paid, 2) }} {{ t('currency') }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif

                    <hr class="my-3">

                    <h2 class="small fw-bold mb-2 text-dark">
                        <i class="fa-solid fa-gift text-success me-1"></i>{{ t('recent-gifts') }}
                    </h2>

                    @if (($recentGiftItems ?? collect())->isEmpty())
                        <div class="text-center py-2">
                            <p class="small text-muted mb-0">{{ t('no-recent-gifts') }}</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th class="small text-uppercase text-muted">{{ t('date') }}</th>
                                        <th class="small text-uppercase text-muted">{{ t('gift') }}</th>
                                        <th class="small text-uppercase text-muted">{{ t('validity') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentGiftItems as $gift)
                                        <tr>
                                            <td class="text-nowrap small text-dark">
                                                {{ optional($gift->date)->format('d.m.Y H:i') }}
                                            </td>
                                            <td class="small text-dark">
                                                {{ $gift->label }}
                                            </td>
                                            <td class="small text-muted">
                                                {{ optional($gift->valid_from)->format('d.m.Y') }} -
                                                {{ optional($gift->valid_to)->format('d.m.Y') }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection