@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <style>
        .race-chart-shell { min-height: 580px; position: relative; }
        .race-control { min-width: 42px; }
        .race-empty { min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; }
        .race-period { font-size: 1.15rem; font-weight: 700; color: #344767; }
        .race-table tbody tr { transition: background-color .2s ease; }
        .race-table .change-up { color: #2dce89; }
        .race-table .change-down { color: #f5365c; }
        @media (max-width: 768px) {
            .race-chart-shell { min-height: 500px; }
            #raceChart { min-width: 720px; }
            .race-chart-scroll { overflow-x: auto; }
        }
        @media (prefers-reduced-motion: reduce) {
            .race-table tbody tr { transition: none; }
        }
    </style>

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <form method="GET" action="{{ URL::to($url_menu) }}" id="racechart-filter-form">
                <div class="row gx-3 gy-3 align-items-end">
                    <div class="col-auto">
                        <label class="form-control-label fw-bold" for="type-select">Periode</label>
                        <select class="form-control" name="type" id="type-select" style="min-width: 145px;">
                            <option value="daily" {{ $type_selected === 'daily' ? 'selected' : '' }}>Harian</option>
                            <option value="monthly" {{ $type_selected === 'monthly' ? 'selected' : '' }}>Bulanan</option>
                            <option value="yearly" {{ $type_selected === 'yearly' ? 'selected' : '' }}>Tahunan</option>
                        </select>
                    </div>
                    <div class="col-auto" id="year-filter">
                        <label class="form-control-label fw-bold" for="year-select">Tahun</label>
                        <select class="form-control" name="year" id="year-select" style="min-width: 115px;">
                            @foreach ($available_years as $year)
                                <option value="{{ $year }}" {{ $year_selected === $year ? 'selected' : '' }}>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <label class="form-control-label fw-bold" for="limit-select">Peringkat</label>
                        <select class="form-control" name="limit" id="limit-select" style="min-width: 130px;">
                            @foreach ([5, 10, 15, 20] as $option)
                                <option value="{{ $option }}" {{ $limit === $option ? 'selected' : '' }}>Top {{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-0">
                            <i class="fas fa-filter me-1"></i> Terapkan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="card shadow-lg">
            <div class="card-header p-3 pb-0">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <div>
                        <h6 class="mb-1 text-uppercase fw-bold">
                            <i class="fas fa-chart-bar me-2"></i>Pergerakan Peringkat Sekuritas
                        </h6>
                        <small class="text-muted">Snapshot terakhir setiap periode · {{ $type_label }}</small>
                    </div>
                    <div class="text-end">
                        <div class="race-period" id="current-period-label">-</div>
                        <small class="text-muted" id="period-progress">0 / 0</small>
                    </div>
                </div>
            </div>

            <div class="card-body p-3">
                @if (count($frames) === 0)
                    <div class="race-empty">
                        <div>
                            <i class="fas fa-chart-bar fa-3x text-secondary mb-3"></i>
                            <h6>Data snapshot belum tersedia</h6>
                            <p class="text-sm text-muted mb-0">Pilih tahun lain atau unggah data kepemilikan saham terlebih dahulu.</p>
                        </div>
                    </div>
                @else
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                        <div class="btn-group" role="group" aria-label="Kontrol animasi">
                            <button type="button" class="btn btn-outline-primary mb-0 race-control" id="btn-first" title="Kembali ke awal">
                                <i class="fas fa-undo"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary mb-0 race-control" id="btn-prev" title="Periode sebelumnya">
                                <i class="fas fa-step-backward"></i>
                            </button>
                            <button type="button" class="btn btn-primary mb-0 px-4" id="btn-play-pause">
                                <i class="fas fa-play me-1"></i><span id="play-label">Putar</span>
                            </button>
                            <button type="button" class="btn btn-outline-primary mb-0 race-control" id="btn-next" title="Periode berikutnya">
                                <i class="fas fa-step-forward"></i>
                            </button>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <label for="speed-select" class="text-sm mb-0">Kecepatan</label>
                            <select id="speed-select" class="form-control form-control-sm" style="width: 105px;">
                                <option value="2500">Lambat</option>
                                <option value="1600" selected>Normal</option>
                                <option value="900">Cepat</option>
                            </select>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0" id="btn-download">
                                <i class="fas fa-download me-1"></i>PNG
                            </button>
                        </div>
                    </div>

                    <input type="range" class="form-range mb-2" id="period-slider" min="0" max="{{ count($frames) - 1 }}" value="0" aria-label="Pilih periode">
                    <div class="race-chart-scroll">
                        <div class="race-chart-shell">
                            <div id="raceChart" style="width: 100%; height: 580px;"></div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        @if (count($frames) > 0)
            <div class="card shadow-lg mt-4">
                <div class="card-header p-3">
                    <h6 class="mb-0 text-uppercase fw-bold">
                        <i class="fas fa-table me-2"></i>Detail Periode Aktif
                    </h6>
                </div>
                <div class="card-body p-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0 race-table">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-center">Peringkat</th>
                                    <th>Kode</th>
                                    <th>Nama Sekuritas</th>
                                    <th class="text-end">Jumlah Saham</th>
                                    <th class="text-end">Porsi</th>
                                </tr>
                            </thead>
                            <tbody id="active-period-table"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('js')
    @if (count($frames) > 0)
        <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script>
            $(function () {
                const frames = @json($frames);
                const limit = {{ $limit }};
                const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                const colors = ['#5e72e4', '#11cdef', '#2dce89', '#fb6340', '#f5365c', '#8965e0', '#2695ff', '#34bfa3', '#ff974d', '#ff6b9d', '#4862ff', '#1bc5ff'];
                let currentIndex = 0;
                let timer = null;

                if (typeof echarts === 'undefined') {
                    $('#raceChart').html('<div class="alert alert-danger">Library chart gagal dimuat. Periksa koneksi internet atau pasang ECharts sebagai asset lokal.</div>');
                    return;
                }

                const chart = echarts.init(document.getElementById('raceChart'));
                const number = new Intl.NumberFormat('id-ID');
                const percent = new Intl.NumberFormat('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

                function colorFor(code) {
                    let hash = 0;
                    for (let i = 0; i < code.length; i++) hash = ((hash << 5) - hash) + code.charCodeAt(i);
                    return colors[Math.abs(hash) % colors.length];
                }

                function signed(value) {
                    if (value === null) return 'Data awal';
                    return (value > 0 ? '+' : '') + number.format(value);
                }

                function labelFor(item) {
                    return item.code + ' · ' + item.name;
                }

                function renderTable(frame) {
                    const rows = frame.items.map(function (item) {
                        const changeClass = item.change > 0 ? 'change-up' : (item.change < 0 ? 'change-down' : '');
                        const rankIcon = item.rank_change > 0
                            ? '<i class="fas fa-arrow-up text-success ms-1"></i>'
                            : (item.rank_change < 0 ? '<i class="fas fa-arrow-down text-danger ms-1"></i>' : '');
                        return '<tr>' +
                            '<td class="fw-bold text-center">' + item.rank + rankIcon + '</td>' +
                            '<td>' + $('<span>').text(item.code).html() + '</td>' +
                            '<td>' + $('<span>').text(item.name).html() + '</td>' +
                            '<td class="text-end fw-bold">' + number.format(item.shares) + '</td>' +
                            '<td class="text-end">' + percent.format(item.percentage) + '%</td>' +
                            
                            '</tr>';
                    }).join('');
                    $('#active-period-table').html(rows || '<tr><td colspan="6" class="text-center text-muted">Tidak ada data</td></tr>');
                }

                function renderFrame(index) {
                    currentIndex = Math.max(0, Math.min(index, frames.length - 1));
                    const frame = frames[currentIndex];
                    const data = frame.items.map(function (item) {
                        return {
                            name: labelFor(item),
                            value: item.shares,
                            meta: item,
                            itemStyle: { color: colorFor(item.code), borderRadius: [0, 5, 5, 0] }
                        };
                    });

                    chart.setOption({
                        animationDuration: reduceMotion ? 0 : 800,
                        animationDurationUpdate: reduceMotion ? 0 : 800,
                        animationEasing: 'cubicOut',
                        animationEasingUpdate: 'cubicInOut',
                        grid: { top: 25, right: 165, bottom: 55, left: 230, containLabel: false },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                const item = params.data.meta;
                                const rankChange = item.rank_change === null ? 'Data awal' : (item.rank_change === 0 ? 'Tetap' : (item.rank_change > 0 ? 'Naik ' + item.rank_change : 'Turun ' + Math.abs(item.rank_change)));
                                return '<b>' + $('<span>').text(item.name).html() + ' (' + $('<span>').text(item.code).html() + ')</b><br>' +
                                    'Peringkat: #' + item.rank + ' (' + rankChange + ')<br>' +
                                    'Jumlah saham: ' + number.format(item.shares) + '<br>' +
                                    'Porsi: ' + percent.format(item.percentage) + '%<br>' +
                                    'Perubahan: ' + signed(item.change);
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: 'Jumlah lembar saham',
                            nameLocation: 'middle',
                            nameGap: 38,
                            splitLine: { lineStyle: { color: '#eef0f5' } },
                            axisLabel: { formatter: function (value) { return number.format(value); } }
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: data.map(function (item) { return item.name; }),
                            axisTick: { show: false },
                            axisLine: { show: false },
                            axisLabel: { width: 210, overflow: 'truncate', fontWeight: 600 }
                        },
                        series: [{
                            type: 'bar',
                            realtimeSort: true,
                            data: data,
                            barMaxWidth: 34,
                            universalTransition: true,
                            label: {
                                show: true,
                                position: 'right',
                                color: '#344767',
                                fontWeight: 'bold',
                                formatter: function (params) { return number.format(params.value); }
                            }
                        }],
                        graphic: [{
                            type: 'text', right: 25, bottom: 20,
                            style: { text: frame.label, font: '700 22px sans-serif', fill: '#8392ab' }
                        }]
                    }, true);

                    $('#current-period-label').text(frame.label);
                    $('#period-progress').text((currentIndex + 1) + ' / ' + frames.length + ' · Top ' + limit);
                    $('#period-slider').val(currentIndex);
                    renderTable(frame);
                }

                function stop() {
                    if (timer) window.clearInterval(timer);
                    timer = null;
                    $('#btn-play-pause i').removeClass('fa-pause').addClass('fa-play');
                    $('#play-label').text('Putar');
                }

                function play() {
                    if (frames.length < 2) return;
                    if (currentIndex >= frames.length - 1) renderFrame(0);
                    stop();
                    $('#btn-play-pause i').removeClass('fa-play').addClass('fa-pause');
                    $('#play-label').text('Jeda');
                    timer = window.setInterval(function () {
                        if (currentIndex >= frames.length - 1) {
                            stop();
                            return;
                        }
                        renderFrame(currentIndex + 1);
                    }, Number($('#speed-select').val()));
                }

                $('#btn-play-pause').on('click', function () { timer ? stop() : play(); });
                $('#btn-first').on('click', function () { stop(); renderFrame(0); });
                $('#btn-prev').on('click', function () { stop(); renderFrame(currentIndex - 1); });
                $('#btn-next').on('click', function () { stop(); renderFrame(currentIndex + 1); });
                $('#period-slider').on('input', function () { stop(); renderFrame(Number(this.value)); });
                $('#speed-select').on('change', function () { if (timer) play(); });
                $('#btn-download').on('click', function () {
                    const link = document.createElement('a');
                    link.download = 'race-chart-sekuritas-' + frames[currentIndex].date + '.png';
                    link.href = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#ffffff' });
                    link.click();
                });
                $('#type-select').on('change', function () {
                    $('#year-filter').toggle(this.value !== 'yearly');
                }).trigger('change');
                $(window).on('resize', function () { chart.resize(); });

                renderFrame(0);
            });
        </script>
    @else
        <script>
            $(function () {
                $('#type-select').on('change', function () {
                    $('#year-filter').toggle(this.value !== 'yearly');
                }).trigger('change');
            });
        </script>
    @endif
@endpush