@extends('admin.layouts.app')
@section('title', 'İçerik İstatistikleri')
@section('page-title', 'İçerik İstatistikleri')

@push('styles')
<style>
.st-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.st-card .val { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); letter-spacing:-0.5px; }
.st-card .lbl { font-size: 0.78rem; color: var(--text2); margin-top: 4px; font-weight:600; }
.st-card .sub { font-size: 0.72rem; color: var(--text3); margin-top: 3px; }
.st-card .ico { font-size: 1.8rem; opacity: 0.5; }

.chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.chart-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.section-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text2); font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

.tbl-sm th { font-size: 0.73rem; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; }
.tbl-sm td { font-size: 0.84rem; padding: 8px 10px; vertical-align: middle; border-top: 1px solid var(--border); color: var(--text); }
.tbl-sm tr:first-child td { border-top: none; }

.pbar-wrap { height: 6px; background: var(--surface); border-radius: 3px; flex: 1; }
.pbar-fill  { height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent-lt)); border-radius: 3px; }

/* GitHub-style heatmap */
.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.heatmap { display: flex; gap: 3px; }
.heatmap-col { display: flex; flex-direction: column; gap: 3px; }
.heat-cell {
    width: 13px; height: 13px; border-radius: 2px;
    background: var(--surface);
    cursor: default;
    transition: opacity .15s;
    position: relative;
}
.heat-cell:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: var(--bg2); border: 1px solid var(--border2); color: var(--text);
    font-size: 11px; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
    pointer-events: none; z-index: 100;
}
.heat-0  { background: var(--surface); }
.heat-1  { background: rgba(124,58,237,0.25); }
.heat-2  { background: rgba(124,58,237,0.45); }
.heat-3  { background: rgba(124,58,237,0.7); }
.heat-4  { background: var(--accent); }

.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .72rem; color: var(--text2); justify-content: flex-end; }
.heatmap-legend span { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }

.month-labels { display: flex; gap: 3px; margin-bottom: 4px; font-size: .72rem; color: var(--text3); padding-left: 22px; }
.day-labels { display: flex; flex-direction: column; gap: 3px; margin-right: 4px; }
.day-labels span { height: 13px; font-size: .68rem; color: var(--text3); line-height: 13px; }

.ep-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ep-row:last-child { border-bottom: none; }
.ep-badge { font-size: .7rem; padding: 2px 7px; border-radius: 10px; background: var(--surface); color: var(--text2); font-weight: 600; white-space: nowrap; }
</style>
@endpush

@section('content')

{{-- Özet kartlar --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-sm-4 col-lg">
        <div class="st-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($totalAnimes) }}</div>
                    <div class="lbl">Toplam Anime</div>
                    <div class="sub">{{ number_format($publishedAnimes) }} yayında</div>
                </div>
                <i class="bi bi-play-circle ico text-info"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="st-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($totalEpisodes) }}</div>
                    <div class="lbl">Toplam Bölüm</div>
                    <div class="sub">{{ number_format($publishedEps) }} yayında</div>
                </div>
                <i class="bi bi-collection-play ico" style="color:#a371f7"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="st-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($totalSeasons) }}</div>
                    <div class="lbl">Toplam Sezon</div>
                </div>
                <i class="bi bi-layers ico" style="color:#f0883e"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="st-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    @php $avgEpPerAnime = $totalAnimes > 0 ? round($totalEpisodes / $totalAnimes, 1) : 0; @endphp
                    <div class="val">{{ $avgEpPerAnime }}</div>
                    <div class="lbl">Ort. Bölüm/Anime</div>
                </div>
                <i class="bi bi-bar-chart ico" style="color:var(--success)"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="st-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    @php $unpublished = $totalEpisodes - $publishedEps; @endphp
                    <div class="val">{{ number_format($unpublished) }}</div>
                    <div class="lbl">Taslak Bölüm</div>
                    <div class="sub">Yayında değil</div>
                </div>
                <i class="bi bi-eye-slash ico" style="color:var(--text2)"></i>
            </div>
        </div>
    </div>
</div>

{{-- Yükleme Isı Haritası --}}
<div class="chart-card mb-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="chart-title mb-0">Bölüm Yükleme Yoğunluk Haritası <span style="color:#6e7681;font-size:.78rem">(son 52 hafta)</span></div>
    </div>

    @php
        // Ay etiketleri için hesaplama
        $heatMonths = [];
        foreach ($heatData as $wi => $week) {
            $firstDay = $week[0]['date'];
            $month = \Carbon\Carbon::parse($firstDay)->format('M');
            $dayOfMonth = \Carbon\Carbon::parse($firstDay)->day;
            if ($dayOfMonth <= 7 && !isset($lastMonth) || (isset($lastMonth) && $lastMonth !== $month)) {
                $heatMonths[$wi] = $month;
                $lastMonth = $month;
            } else {
                $heatMonths[$wi] = '';
            }
        }
        $heatMax = collect($heatData)->flatten(1)->max('cnt') ?: 1;
    @endphp

    <div class="d-flex">
        {{-- Gün etiketleri --}}
        <div class="day-labels mt-4">
            <span>&nbsp;</span>
            <span>Pzt</span>
            <span>&nbsp;</span>
            <span>Çar</span>
            <span>&nbsp;</span>
            <span>Cum</span>
            <span>&nbsp;</span>
        </div>
        <div style="flex:1;min-width:0">
            {{-- Ay etiketleri --}}
            <div class="month-labels">
                @foreach($heatMonths as $wi => $mon)
                    <span style="width:16px;text-align:left;flex-shrink:0">{{ $mon }}</span>
                @endforeach
            </div>
            {{-- Hücreler --}}
            <div class="heatmap-wrap">
                <div class="heatmap">
                    @foreach($heatData as $week)
                    <div class="heatmap-col">
                        @foreach($week as $cell)
                            @php
                                $cnt = $cell['cnt'];
                                if ($cnt === 0) $level = 0;
                                elseif ($cnt <= 2) $level = 1;
                                elseif ($cnt <= 5) $level = 2;
                                elseif ($cnt <= 10) $level = 3;
                                else $level = 4;
                                $tip = $cell['date'] . ': ' . $cnt . ' bölüm';
                            @endphp
                            <div class="heat-cell heat-{{ $level }}" data-tip="{{ $tip }}" title="{{ $tip }}"></div>
                        @endforeach
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="heatmap-legend">
                <span>Az</span>
                <span class="heat-0"></span>
                <span class="heat-1"></span>
                <span class="heat-2"></span>
                <span class="heat-3"></span>
                <span class="heat-4"></span>
                <span>Çok</span>
            </div>
        </div>
    </div>
</div>

{{-- 90 gün trend + Aylık dağılım --}}
<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="chart-card h-100">
            <div class="chart-title">Son 90 Gün — Günlük Yükleme Trendi</div>
            <div style="position:relative;height:200px">
                <canvas id="trendChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="chart-card h-100">
            <div class="chart-title">Aylık Bölüm Dağılımı (24 Ay)</div>
            <div style="position:relative;height:200px">
                <canvas id="monthChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- Saatlik + Haftalık dağılım --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="chart-card h-100">
            <div class="chart-title">Saatlik Yükleme Dağılımı <span style="color:#6e7681;font-size:.78rem">(tüm zamanlar)</span></div>
            <div style="position:relative;height:160px">
                <canvas id="hourlyChart"></canvas>
            </div>
            @php
                $peakHour = array_search(max($hourlyEpsData), $hourlyEpsData);
                $peakCount = max($hourlyEpsData);
            @endphp
            @if($peakCount > 0)
            <div class="mt-2 text-center" style="font-size:.78rem;color:var(--text2)">
                En yoğun saat: <strong style="color:var(--accent)">{{ str_pad($peakHour,2,'0',STR_PAD_LEFT) }}:00</strong>
                ({{ number_format($peakCount) }} bölüm)
            </div>
            @endif
        </div>
    </div>
    <div class="col-lg-5">
        <div class="chart-card h-100">
            <div class="chart-title">Haftanın Günlerine Göre <span style="color:#6e7681;font-size:.78rem">(tüm zamanlar)</span></div>
            <div style="position:relative;height:160px">
                <canvas id="weekdayChart"></canvas>
            </div>
            @php
                $peakDow = array_search(max($weekdayData), $weekdayData);
                $peakDowCount = max($weekdayData);
            @endphp
            @if($peakDowCount > 0)
            <div class="mt-2 text-center" style="font-size:.78rem;color:var(--text2)">
                En yoğun gün: <strong style="color:#a371f7">{{ $weekdayLabels[$peakDow] }}</strong>
                ({{ number_format($peakDowCount) }} bölüm)
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Top animeler + Tür dağılımı --}}
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="chart-card h-100">
            <div class="section-head">En Fazla Bölüm İçeren 10 Anime</div>
            @php $maxEpCount = $topByEpisodes->max('episodes_count') ?: 1; @endphp
            @foreach($topByEpisodes as $i => $a)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="font-size:.72rem;color:var(--text2);width:16px;text-align:right">{{ $i+1 }}</span>
                <span style="font-size:.82rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    <a href="{{ route('admin.animes.show', $a) }}" style="color:var(--text);text-decoration:none" class="hover-accent">{{ $a->title }}</a>
                </span>
                @php
                    $statusColor = match($a->status) { 'ongoing'=>'var(--success)','completed'=>'#79c0ff','upcoming'=>'#f0883e',default=>'var(--text2)' };
                @endphp
                <span style="font-size:.7rem;color:{{ $statusColor }}">
                    {{ match($a->status){'ongoing'=>'Devam','completed'=>'Bitti','upcoming'=>'Yakında',default=>$a->status} }}
                </span>
                <div class="pbar-wrap" style="width:90px"><div class="pbar-fill" style="width:{{ round($a->episodes_count/$maxEpCount*100) }}%"></div></div>
                <span style="font-size:.78rem;color:var(--text2);width:35px;text-align:right">{{ $a->episodes_count }}</span>
            </div>
            @endforeach
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card h-100">
            <div class="section-head">Türe Göre Bölüm Sayısı</div>
            @php $maxGenreEp = $genreEpStats->max('ep_count') ?: 1; @endphp
            @foreach($genreEpStats as $g)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="font-size:.82rem;flex:1">{{ $g->name }}</span>
                <div class="pbar-wrap"><div class="pbar-fill" style="width:{{ round($g->ep_count/$maxGenreEp*100) }}%;background:#a371f7"></div></div>
                <span style="font-size:.78rem;color:var(--text2);width:38px;text-align:right">{{ number_format($g->ep_count) }}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Son eklenen bölümler --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="chart-card h-100">
            <div class="section-head">Son Eklenen Bölümler</div>
            @foreach($recentEpisodes as $ep)
            <div class="ep-row">
                <div style="flex:1;min-width:0">
                    <div style="font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        {{ $ep->anime?->title ?? '—' }}
                    </div>
                    <div style="font-size:.72rem;color:var(--text2)">
                        S{{ $ep->season?->season_number ?? '?' }}E{{ $ep->episode_number }}
                        @if($ep->title) · {{ $ep->title }} @endif
                    </div>
                </div>
                <span class="ep-badge {{ $ep->is_published ? '' : '' }}" style="{{ $ep->is_published ? 'background:#0e4429;color:var(--success)' : 'background:#3d1a1a;color:var(--danger)' }}">
                    {{ $ep->is_published ? 'Yayında' : 'Taslak' }}
                </span>
                <span style="font-size:.72rem;color:#6e7681;white-space:nowrap">{{ $ep->created_at->diffForHumans() }}</span>
            </div>
            @endforeach
        </div>
    </div>
    <div class="col-lg-5">
        <div class="chart-card h-100">
            <div class="section-head">Son Eklenen Animeler</div>
            @foreach($recentAnimes as $a)
            <div class="ep-row">
                <div style="flex:1;min-width:0">
                    <div style="font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                        <a href="{{ route('admin.animes.show', $a) }}" style="color:var(--text);text-decoration:none">{{ $a->title }}</a>
                    </div>
                    <div style="font-size:.72rem;color:var(--text2)">
                        {{ strtoupper($a->type) }}
                    </div>
                </div>
                <span style="font-size:.7rem;padding:2px 7px;border-radius:10px;{{ $a->is_published ? 'background:#0e4429;color:var(--success)' : 'background:var(--surface);color:var(--text2)' }}">
                    {{ $a->is_published ? 'Yayında' : 'Taslak' }}
                </span>
                <span style="font-size:.72rem;color:#6e7681;white-space:nowrap">{{ $a->created_at->diffForHumans() }}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = 'var(--text2)';
Chart.defaults.borderColor = 'var(--border)';

// ── 90 gün trend ─────────────────────────────────────────────────────────────
new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels: @json($trendLabels),
        datasets: [
            {
                label: 'Bölüm',
                data: @json($epTrendData),
                borderColor: 'var(--accent)',
                backgroundColor: 'rgba(232,67,147,.1)',
                fill: true, tension: 0.4, pointRadius: 2,
                yAxisID: 'y',
            },
            {
                label: 'Anime',
                data: @json($animeTrendData),
                borderColor: 'var(--success)',
                backgroundColor: 'rgba(63,185,80,.08)',
                fill: true, tension: 0.4, pointRadius: 2,
                yAxisID: 'y',
            }
        ]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: {
            legend: { display: true, labels: { font: { size: 11 }, boxWidth: 10, padding: 12 } }
        },
        scales: {
            x: { grid: { color: 'var(--border)' }, ticks: { maxTicksLimit: 10, font: { size: 10 } } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});

// ── Aylık bölüm ───────────────────────────────────────────────────────────────
new Chart(document.getElementById('monthChart'), {
    type: 'bar',
    data: {
        labels: @json($monthLabels),
        datasets: [{
            label: 'Bölüm',
            data: @json($monthData),
            backgroundColor: 'rgba(163,113,247,.6)',
            borderColor: '#a371f7',
            borderWidth: 1,
            borderRadius: 3,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 9 }, maxTicksLimit: 8 } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});

// ── Saatlik dağılım ───────────────────────────────────────────────────────────
new Chart(document.getElementById('hourlyChart'), {
    type: 'bar',
    data: {
        labels: Array.from({length:24}, (_,i) => `${String(i).padStart(2,'0')}:00`),
        datasets: [{
            label: 'Bölüm',
            data: @json($hourlyEpsData),
            backgroundColor: ctx => {
                const max = Math.max(...@json($hourlyEpsData));
                return ctx.parsed.y === max ? 'var(--accent)' : 'rgba(232,67,147,.35)';
            },
            borderColor: 'var(--accent)',
            borderWidth: 1,
            borderRadius: 3,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 9 } } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});

// ── Haftanın günleri ──────────────────────────────────────────────────────────
new Chart(document.getElementById('weekdayChart'), {
    type: 'bar',
    data: {
        labels: @json($weekdayLabels),
        datasets: [{
            label: 'Bölüm',
            data: @json($weekdayData),
            backgroundColor: ctx => {
                const max = Math.max(...@json($weekdayData));
                return ctx.parsed.y === max ? '#a371f7' : 'rgba(163,113,247,.35)';
            },
            borderColor: '#a371f7',
            borderWidth: 1,
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 11 } } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});
</script>
@endpush