@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .influencer-show-page .ui-card {
            border: 2px solid #e5e7eb !important;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .influencer-show-page .influencer-overview-card {
            padding: 1.25rem;
        }

        .influencer-show-page .influencer-overview-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .influencer-show-page .influencer-profile-block {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .influencer-show-page .profile-icon {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .influencer-show-page .profile-label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.25rem;
        }

        .influencer-show-page .profile-value {
            color: #111827;
            font-size: 1.25rem;
            font-weight: 950;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .influencer-show-page .profile-sub {
            color: #64748b;
            font-size: 0.88rem;
            margin-top: 0.25rem;
        }

        .influencer-show-page .filter-card {
            padding: 1.25rem;
        }

        .influencer-show-page .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .influencer-show-page .filter-title {
            color: #111827;
            font-size: 1.02rem !important;
            font-weight: 900;
            margin-bottom: 0.2rem;
        }

        .influencer-show-page .filter-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin: 0;
        }

        .influencer-show-page .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
            align-items: end;
        }

        .influencer-show-page .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .influencer-show-page .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .influencer-show-page .asset-select {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .influencer-show-page .asset-select:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .influencer-show-page .summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1rem;
        }

        .influencer-show-page .summary-card {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            border: 2px solid #e5e7eb !important;
            border-radius: 18px;
            background: #fff;
            padding: 1rem;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
            min-width: 0;
        }

        .influencer-show-page .summary-icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.25rem;
        }

        .influencer-show-page .summary-card--primary .summary-icon {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .influencer-show-page .summary-card--success .summary-icon {
            background: #f0fdf4;
            color: #166534;
        }

        .influencer-show-page .summary-card--info .summary-icon {
            background: #eef2ff;
            color: #4338ca;
        }

        .influencer-show-page .summary-card--warn .summary-icon {
            background: #fffbeb;
            color: #92400e;
        }

        .influencer-show-page .summary-label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.2rem;
        }

        .influencer-show-page .summary-value {
            color: #111827;
            font-size: 1.15rem;
            font-weight: 950;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }

        .influencer-show-page .details-card,
        .influencer-show-page .invoices-card {
            padding: 0 !important;
        }

        .influencer-show-page .section-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem 1.25rem;
            border-bottom: 2px solid #eef2f7 !important;
            background: #fff;
        }

        .influencer-show-page .section-title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 900;
        }

        .influencer-show-page .section-sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
        }

        .influencer-show-page .table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .influencer-show-page table {
            min-width: 1000px;
            width: 100%;
            vertical-align: middle;
        }

        .influencer-show-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 2px solid #e5e7eb !important;
            white-space: nowrap;
        }

        .influencer-show-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .influencer-show-page table tbody tr:hover {
            background: #f8fafc;
        }

        .invoice-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .invoice-number {
            color: #111827;
            font-weight: 900;
        }

        .student-cell {
            color: #111827;
            font-weight: 800;
        }

        .course-cell {
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #475569;
        }

        .date-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.74rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #1d4ed8; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 1199.98px) {
            .influencer-show-page .summary-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            .influencer-show-page .asset-col-4 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {
            .influencer-show-page .influencer-overview-card,
            .influencer-show-page .filter-card,
            .influencer-show-page .section-card-head {
                padding: 1rem;
            }

            .influencer-show-page .summary-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    @php
        $selectedPeriodLabel = \Carbon\Carbon::create()->month((int) $month)->year((int) $year)->format('F Y');
    @endphp

    <div class="container-fluid app-bg influencer-show-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Influencer Details"
                    description="Detailed configuration, active promocodes, and usage earnings for this influencer.">
                    <a href="{{ route('influencers.index') }}" class="asset-btn asset-btn--secondary">
                        Back to List
                    </a>
                </x-page-title>

                <div class="ui-card influencer-overview-card">
                    <div class="influencer-overview-main">
                        <div class="influencer-profile-block">
                            <div class="profile-icon">
                                <i class="fas fa-user-tie"></i>
                            </div>

                            <div>
                                <div class="profile-label">Influencer</div>
                                <div class="profile-value">
                                    {{ $influencer->name }}
                                </div>
                                <div class="profile-sub">
                                    <span><i class="fas fa-phone-alt me-1 text-muted"></i>{{ $influencer->phone }}</span>
                                    <span class="mx-2 text-muted">|</span>
                                    <span><i class="fas fa-envelope me-1 text-muted"></i>{{ $influencer->email }}</span>
                                    @if ($influencer->user)
                                        <span class="mx-2 text-muted">|</span>
                                        <span class="ui-pill ui-pill--info">
                                            <i class="fas fa-link me-1"></i>
                                            Linked User: {{ $influencer->user->name }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="ui-pill ui-pill--primary">
                                <i class="fas fa-ticket-alt"></i>
                                {{ $influencer->promocodes->count() }} Linked Promocode(s)
                            </span>
                        </div>
                    </div>
                </div>

                <div class="ui-card filter-card">
                    <div class="filter-head">
                        <div>
                            <h5 class="filter-title">Commission Filter</h5>
                            <p class="filter-sub">
                                Filter monthly invoice usages and commission reports.
                            </p>
                        </div>

                        <span class="ui-pill ui-pill--info">
                            <i class="fas fa-calendar-alt"></i>
                            {{ $selectedPeriodLabel }}
                        </span>
                    </div>

                    <form action="{{ route('influencers.show', $influencer->id) }}" method="GET">
                        <div class="asset-form-grid">
                            <div class="asset-col-4">
                                <label for="month" class="asset-label">Month</label>
                                <select name="month" id="month" class="asset-select">
                                    @for ($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                                            {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <div class="asset-col-4">
                                <label for="year" class="asset-label">Year</label>
                                <select name="year" id="year" class="asset-select">
                                    @for ($y = 2020; $y <= now()->year; $y++)
                                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                                            {{ $y }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <div class="asset-col-4">
                                <label class="asset-label d-block">&nbsp;</label>
                                <x-table-action type="search" buttonType="submit" label="Filter" :icon="false" class="px-3" />
                            </div>
                        </div>
                    </form>
                </div>

                <div class="summary-grid">
                    <div class="summary-card summary-card--primary">
                        <div class="summary-icon">
                            <i class="fas fa-ticket-alt"></i>
                        </div>
                        <div>
                            <div class="summary-label">Linked Promo Codes</div>
                            <div class="summary-value">
                                {{ $influencer->promocodes->count() }}
                            </div>
                        </div>
                    </div>

                    <div class="summary-card summary-card--info">
                        <div class="summary-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <div>
                            <div class="summary-label">Total Usages (All Time)</div>
                            <div class="summary-value">
                                {{ $totalInvoicesAllTime }}
                            </div>
                        </div>
                    </div>

                    <div class="summary-card summary-card--success">
                        <div class="summary-icon">
                            <i class="fas fa-wallet"></i>
                        </div>
                        <div>
                            <div class="summary-label">Total Earnings (All Time)</div>
                            <div class="summary-value text-success">
                                {{ number_format($totalEarningsAllTime, 2) }} EGP
                            </div>
                        </div>
                    </div>

                    <div class="summary-card summary-card--warn">
                        <div class="summary-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div>
                            <div class="summary-label">Earnings ({{ $selectedPeriodLabel }})</div>
                            <div class="summary-value text-warning">
                                {{ number_format($totalEarningsFiltered, 2) }} EGP
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Promocodes List --}}
                <div class="ui-card details-card">
                    <div class="section-card-head">
                        <div>
                            <h5 class="section-title mb-0">Linked Promocodes Configuration</h5>
                            <p class="section-sub mb-0">
                                List of promocodes registered under this influencer and their commission settings.
                            </p>
                        </div>
                    </div>

                    <div class="table-wrap">
                        <x-table :headers="[
                            'Code',
                            'Discount',
                            'Limit',
                            'Expire Date',
                            'Commission Type',
                            'Commission Amount',
                            'All-Time Usages',
                            'All-Time Earnings'
                        ]">
                            @forelse ($influencer->promocodes as $promocode)
                                @php
                                    $expireDate = $promocode->expire_date ? \Carbon\Carbon::parse($promocode->expire_date) : null;
                                    $isExpired = $expireDate ? $expireDate->isPast() : false;
                                    $discountLabel = $promocode->type === 'percentage' ? number_format($promocode->discount, 0) . '%' : number_format($promocode->discount, 0);
                                @endphp
                                <tr>
                                    <td class="fw-bold text-center">
                                        <a href="{{ route('promocodes.show', $promocode->id) }}" class="text-primary text-decoration-none">
                                            {{ $promocode->code }}
                                        </a>
                                    </td>
                                    <td class="text-center">{{ $discountLabel }}</td>
                                    <td class="text-center">{{ $promocode->limit }}</td>
                                    <td class="text-center">
                                        @if ($expireDate)
                                            <span class="date-pill {{ $isExpired ? 'ui-pill--danger' : '' }}">
                                                {{ $expireDate->format('d M Y') }}
                                            </span>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">—</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="ui-pill {{ $promocode->commission_type === 'percentage' ? 'ui-pill--info' : 'ui-pill--primary' }}">
                                            {{ ucfirst($promocode->commission_type ?? '—') }}
                                        </span>
                                    </td>
                                    <td class="text-center fw-bold">
                                        {{ $promocode->commission_type === 'percentage' ? number_format($promocode->commission_amount, 0) . '%' : number_format($promocode->commission_amount, 2) . ' EGP' }}
                                    </td>
                                    <td class="text-center font-semibold text-primary">
                                        {{ $promocode->student_invoices_count }}
                                    </td>
                                    <td class="text-center font-bold text-success">
                                        {{ number_format($promocode->total_earnings, 2) }} EGP
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8">
                                        <div class="empty-state">
                                            <i class="fas fa-ticket-alt"></i>
                                            <h6>No promocodes linked to this influencer.</h6>
                                            <p>Edit or create a promocode and select this influencer.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>
                </div>

                {{-- Related Invoices --}}
                <div class="ui-card invoices-card">
                    <div class="section-card-head">
                        <div>
                            <h5 class="section-title mb-0">Usage History & Invoices</h5>
                            <p class="section-sub mb-0">
                                Invoices that used this influencer's promocodes during {{ $selectedPeriodLabel }}.
                            </p>
                        </div>
                        <span class="ui-pill ui-pill--info">
                            {{ $totalInvoicesFiltered }} Invoice(s)
                        </span>
                    </div>

                    <div class="table-wrap">
                        <x-table :headers="[
                            'Index',
                            'Invoice Number',
                            'Student',
                            'Promocode',
                            'Net Price',
                            'Commission Earned',
                            'Usage Date'
                        ]">
                            @forelse ($filteredInvoices as $invoice)
                                <tr>
                                    <td class="text-center">
                                        <span class="invoice-index">{{ $loop->iteration }}</span>
                                    </td>

                                    <td class="text-center fw-bold">
                                        <a href="{{ route('student_invoices.show', $invoice->id) }}" class="invoice-number text-decoration-none">
                                            {{ $invoice->invoice_number }}
                                        </a>
                                    </td>

                                    <td>
                                        <div class="student-cell">
                                            {{ trim(($invoice->student->first_name ?? '') . ' ' . ($invoice->student->last_name ?? '')) ?: '—' }}
                                        </div>
                                    </td>

                                    <td class="text-center fw-bold">
                                        <span class="ui-pill ui-pill--neutral">
                                            {{ $invoice->promocode->code ?? '—' }}
                                        </span>
                                    </td>

                                    <td class="text-center font-semibold">
                                        {{ number_format($invoice->net_price, 2) }} EGP
                                    </td>

                                    <td class="text-center fw-bold text-success">
                                        +{{ number_format($invoice->calculated_commission, 2) }} EGP
                                    </td>

                                    <td class="text-center">
                                        <span class="date-pill">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ \Carbon\Carbon::parse($invoice->created_at)->format('d M Y') }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">
                                        <div class="empty-state">
                                            <i class="fas fa-file-invoice-dollar"></i>
                                            <h6>No invoice usages found.</h6>
                                            <p>No invoices matching this influencer's promocodes were found in {{ $selectedPeriodLabel }}.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection