@extends('layouts.user', ['heading' => 'Rank Progress', 'subheading' => 'Real-time qualification and rank history'])

@section('content')
    <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Current Rank</div>
            <div class="mt-1 text-base font-semibold">{{ $member->currentRank?->name ?? 'Unranked' }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Left Repurchase BV</div>
            <div class="mt-1 text-base font-semibold">{{ number_format((float) $leftBv, 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Right Repurchase BV</div>
            <div class="mt-1 text-base font-semibold">{{ number_format((float) $rightBv, 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Weak Leg BV</div>
            <div class="mt-1 text-base font-semibold">{{ number_format((float) $weakLegBv, 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Active Directs</div>
            <div class="mt-1 text-base font-semibold">{{ number_format((int) $activeDirects) }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <div class="user-card p-4 xl:col-span-2">
            <div class="mb-3 text-sm font-semibold">Rank Qualification Matrix</div>
            <div class="space-y-3">
                @forelse($progressRows as $row)
                    <div class="rounded-xl border border-[var(--user-border)] p-3">
                        <div class="flex items-center justify-between gap-2">
                            <div class="text-sm font-semibold">{{ $row['rank']->name }}</div>
                            <span class="rounded px-2 py-0.5 text-xs {{ $row['is_qualified'] ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                {{ $row['is_qualified'] ? 'Qualified' : 'In Progress' }}
                            </span>
                        </div>
                        <div class="mt-2 h-2 w-full overflow-hidden rounded bg-slate-100">
                            <div class="h-2 rounded bg-[var(--user-primary)]" style="width: {{ $row['overall_pct'] }}%"></div>
                        </div>
                        <div class="mt-2 grid grid-cols-1 gap-2 text-xs text-[var(--user-muted)] md:grid-cols-3">
                            <div>Weak Leg: {{ $row['weak_pct'] }}%</div>
                            <div>Team Turnover: {{ $row['turnover_pct'] }}%</div>
                            <div>Directs: {{ $row['direct_pct'] }}%</div>
                        </div>
                        <div class="mt-2 text-xs text-[var(--user-muted)]">
                            Needs: {{ number_format((float) $row['rank']->required_weak_leg_bv, 2) }} weak BV,
                            {{ number_format((float) $row['rank']->required_team_turnover, 2) }} turnover,
                            {{ (int) $row['rank']->required_active_directs }} directs
                        </div>
                    </div>
                @empty
                    <div class="text-sm text-[var(--user-muted)]">No rank configuration found.</div>
                @endforelse
            </div>
        </div>

        <div class="space-y-4">
            <div class="user-card p-4">
                <div class="text-sm font-semibold">Next Rank Target</div>
                @if($nextRank)
                    <div class="mt-2 text-sm">
                        <div class="font-semibold">{{ $nextRank->name }}</div>
                        <div class="mt-1 text-xs text-[var(--user-muted)]">Weak BV: {{ number_format((float) $nextRank->required_weak_leg_bv, 2) }}</div>
                        <div class="text-xs text-[var(--user-muted)]">Turnover: {{ number_format((float) $nextRank->required_team_turnover, 2) }}</div>
                        <div class="text-xs text-[var(--user-muted)]">Directs: {{ (int) $nextRank->required_active_directs }}</div>
                    </div>
                @else
                    <div class="mt-2 text-xs text-[var(--user-muted)]">Top rank achieved or no higher active rank configured.</div>
                @endif
            </div>

            <div class="user-card p-4">
                <div class="text-sm font-semibold">Total Team Turnover</div>
                <div class="mt-2 text-xl font-semibold">{{ number_format((float) $teamTurnover, 2) }}</div>
                <div class="text-xs text-[var(--user-muted)]">Repurchase BV based turnover</div>
            </div>
        </div>
    </div>

    <div class="user-card mt-4 p-4">
        <div class="mb-3 text-sm font-semibold">Rank History</div>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-100 text-left">
                    <tr>
                        <th class="p-2">Run Date</th>
                        <th class="p-2">From</th>
                        <th class="p-2">To</th>
                        <th class="p-2">Type</th>
                        <th class="p-2">Weak BV</th>
                        <th class="p-2">Turnover</th>
                        <th class="p-2">Directs</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($history as $entry)
                        <tr class="border-t">
                            <td class="p-2">{{ optional($entry->run_date)->format('d M Y') }}</td>
                            <td class="p-2">{{ $entry->fromRank?->name ?? '-' }}</td>
                            <td class="p-2">{{ $entry->toRank?->name ?? '-' }}</td>
                            <td class="p-2">{{ ucfirst($entry->transition_type) }}</td>
                            <td class="p-2">{{ number_format((float) $entry->weak_leg_bv, 2) }}</td>
                            <td class="p-2">{{ number_format((float) $entry->team_turnover, 2) }}</td>
                            <td class="p-2">{{ number_format((int) $entry->active_directs) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="p-3 text-center text-[var(--user-muted)]">No rank history available yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection