@extends('layouts.admin')

@section('title', trans('admin.Dashboard'))
@section('page-title', trans('admin.Overview'))
@section('page-subtitle', trans('admin.platform snapshot'))

@section('content')

<section class="dpage active">
    <div class="page-head">
        <div>
            <h2>{{ trans('admin.Welcome back') }}, {{ auth('user')->user()->name }} 👋</h2>
            <p>{{ trans('admin.platform snapshot') }}</p>
        </div>
        <div class="page-head-actions">
            <form method="GET" action="{{ route('dashboard.home') }}" id="overviewPeriodForm" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <select name="period" id="overviewPeriodSelect" onchange="toggleOverviewCustomRange(this.value)" style="padding:9px 14px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;outline:none;cursor:pointer;">
                    <option value="month" {{ $period === 'month' ? 'selected' : '' }}>{{ trans('admin.This month') }}</option>
                    <option value="quarter" {{ $period === 'quarter' ? 'selected' : '' }}>{{ trans('admin.Last 3 months') }}</option>
                    <option value="year" {{ $period === 'year' ? 'selected' : '' }}>{{ trans('admin.This year') }}</option>
                    <option value="custom" {{ $period === 'custom' ? 'selected' : '' }}>{{ trans('admin.Custom range') }}</option>
                </select>
                <span id="overviewCustomRange" style="display:{{ $period === 'custom' ? 'inline-flex' : 'none' }};gap:8px;align-items:center;">
                    <input type="date" name="from" value="{{ $periodFrom }}" style="padding:9px 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;outline:none;">
                    <input type="date" name="to" value="{{ $periodTo }}" style="padding:9px 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;outline:none;">
                    <button type="submit" class="btn btn-primary btn-sm">{{ trans('admin.Apply') }}</button>
                </span>
                @if($period !== 'month')
                    <a href="{{ route('dashboard.home') }}" class="btn btn-ghost btn-sm">✕ {{ trans('admin.Clear filter') }}</a>
                @endif
            </form>
        </div>
    </div>

    @php
        $arrow = fn ($direction) => $direction === 'up' ? '↑' : '↓';
        $periodLabel = match($period) {
            'quarter' => trans('admin.Last 3 months'),
            'year'    => trans('admin.This year'),
            'custom'  => \Carbon\Carbon::parse($periodFrom ?? now()->startOfMonth())->format('d M Y') . ' – ' . \Carbon\Carbon::parse($periodTo ?? now())->format('d M Y'),
            default   => trans('admin.this month'),
        };
    @endphp

    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-top">
                <div class="stat-ic" style="background:var(--primary-soft);color:var(--primary-ink);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 20V10M9 20V4M15 20v-7M21 20V8"/></svg>
                </div>
                @if($trend = $overview['revenue']['trend'])
                    <span class="stat-trend {{ $trend['direction'] }}">{{ $arrow($trend['direction']) }} {{ $trend['label'] }}</span>
                @endif
            </div>
            <div class="stat-val">{{ trans('admin.currency') }} {{ number_format($overview['revenue']['value']) }}</div>
            <div class="stat-label">{{ trans('admin.Total revenue') }} · {{ $periodLabel }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-top">
                <div class="stat-ic" style="background:var(--gold-soft);color:var(--gold-ink);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5z"/><path d="M6 11v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>
                </div>
                @if($trend = $overview['active_students']['trend'])
                    <span class="stat-trend {{ $trend['direction'] }}">{{ $arrow($trend['direction']) }} {{ $trend['label'] }}</span>
                @endif
            </div>
            <div class="stat-val">{{ number_format($overview['active_students']['value']) }}</div>
            <div class="stat-label">{{ trans('admin.Active students') }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-top">
                <div class="stat-ic" style="background:var(--green-soft);color:var(--green);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 5.5C4 4.7 4.7 4 5.5 4H16a4 4 0 014 4v12H7.5A3.5 3.5 0 014 16.5v-11z"/><path d="M4 16.5A3.5 3.5 0 017.5 20H20"/></svg>
                </div>
                @if($trend = $overview['published_courses']['trend'])
                    <span class="stat-trend {{ $trend['direction'] }}">{{ $arrow($trend['direction']) }} {{ $trend['label'] }}</span>
                @endif
            </div>
            <div class="stat-val">{{ $overview['published_courses']['value'] }}</div>
            <div class="stat-label">{{ trans('admin.Published courses') }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-top">
                <div class="stat-ic" style="background:var(--red-soft);color:var(--coral);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7.5-4.7-10-9.3C.4 8 2 4.5 5.6 4a5 5 0 016.4 2.4A5 5 0 0118.4 4C22 4.5 23.6 8 22 11.7 19.5 16.3 12 21 12 21z"/></svg>
                </div>
                @if($trend = $overview['completion_rate']['trend'])
                    <span class="stat-trend {{ $trend['direction'] }}">{{ $arrow($trend['direction']) }} {{ $trend['label'] }}</span>
                @endif
            </div>
            <div class="stat-val">{{ $overview['completion_rate']['value'] !== null ? $overview['completion_rate']['value'].'%' : '—' }}</div>
            <div class="stat-label">{{ trans('admin.Avg completion rate') }}</div>
        </div>
    </div>

    <div class="two-col">
        <div class="card">
            <div class="card-head">
                <div><h3>{{ trans('admin.New users') }}</h3><div class="sub">{{ trans('admin.Last 6 months') }}</div></div>
            </div>
            <div class="chart-wrap">
                <svg viewBox="0 0 560 200" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="growthFill" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="var(--primary)" stop-opacity="0.28"/>
                            <stop offset="100%" stop-color="var(--primary)" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                    <g stroke="var(--border)" stroke-width="1">
                        <line x1="0" y1="20" x2="560" y2="20"/><line x1="0" y1="70" x2="560" y2="70"/>
                        <line x1="0" y1="120" x2="560" y2="120"/><line x1="0" y1="170" x2="560" y2="170"/>
                    </g>
                    <polygon points="{{ $growthPoints }} 560,200 0,200" fill="url(#growthFill)"/>
                    <polyline points="{{ $growthPoints }}" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div class="chart-legend">
                    <div class="lg"><span class="dot" style="background:var(--primary);"></span> {{ trans('admin.Users') }}</div>
                    @foreach($userGrowth as $point)
                        <span style="font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-right:10px;">{{ $point['label'] }}: {{ $point['count'] }}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <div style="display:flex;flex-direction:column;gap:16px;">
        <div class="card">
            <div class="card-head"><h3>{{ trans('admin.Instructor leaderboard') }}</h3></div>
            <div style="padding:8px 22px 18px;">
                @forelse($leaderboardInstructors as $i => $instructor)
                    <div style="display:flex;align-items:center;gap:12px;padding:9px 0;">
                        <div style="width:22px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);font-weight:700;">{{ $i + 1 }}</div>
                        <div class="cell-avatar" style="width:30px;height:30px;">
                            <img src="{{ $instructor->user?->getImage() }}" alt="" style="width:100%;height:100%;object-fit:cover;">
                        </div>
                        <div style="flex:1;"><b style="font-size:12.5px;">{{ $instructor->user?->name }}</b></div>
                        <div style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);">{{ $instructor->students_count }} 🎓</div>
                    </div>
                @empty
                    <div class="empty-state"><div class="ic">🎓</div><b>{{ trans('admin.No instructors yet') }}</b></div>
                @endforelse
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>{{ trans('admin.Student leaderboard') }}</h3></div>
            <div style="padding:8px 22px 18px;">
                @forelse($leaderboardStudents as $i => $student)
                    <div style="display:flex;align-items:center;gap:12px;padding:9px 0;">
                        <div style="width:22px;text-align:center;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);font-weight:700;">{{ $i + 1 }}</div>
                        <div class="cell-avatar" style="width:30px;height:30px;">
                            <img src="{{ $student->user?->getImage() }}" alt="" style="width:100%;height:100%;object-fit:cover;">
                        </div>
                        <div style="flex:1;"><b style="font-size:12.5px;">{{ $student->user?->name }}</b></div>
                        <div style="font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);">{{ number_format($student->period_points) }} ⭐</div>
                    </div>
                @empty
                    <div class="empty-state"><div class="ic">⭐</div><b>{{ trans('admin.No points earned yet') }}</b></div>
                @endforelse
            </div>
        </div>
        </div>
    </div>

    <div class="card" style="margin-top:16px;">
        <div class="card-head"><h3>{{ trans('admin.Top performing courses') }}</h3><a href="{{ route('dashboard.courses.index') }}" class="btn btn-ghost btn-sm">{{ trans('admin.View all') }}</a></div>
        <div class="table-wrap">
            @if($topCourses->isEmpty())
                <div class="empty-state"><div class="ic">📚</div><b>{{ trans('admin.No courses yet') }}</b></div>
            @else
                <table class="dtable">
                    <tbody>
                    @foreach($topCourses as $course)
                        <tr onclick="location.href='{{ route('dashboard.courses.edit', $course->id) }}'">
                            <td>
                                <b>{{ $course->title }}</b>
                                <div style="font-size:11.5px;color:var(--text-faint);margin-top:2px;">{{ $course->instructor?->user?->name }}</div>
                            </td>
                            <td style="font-family:var(--font-mono);white-space:nowrap;">{{ trans('admin.currency') }} {{ number_format($course->revenue_sum ?? 0) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
</section>

@endsection

@section('script')
<script>
    function toggleOverviewCustomRange(value){
        var el = document.getElementById('overviewCustomRange');
        if (value === 'custom') {
            el.style.display = 'inline-flex';
        } else {
            el.style.display = 'none';
            document.getElementById('overviewPeriodForm').submit();
        }
    }
</script>
@endsection