@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
    @php
        // defaults for create
        $default_fixed = ['1' => 1500, '2' => 1250, '3' => 1000];
    @endphp

    <x-ui.breadcrumb :items="[
        ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
        ['label' => 'Leaderboard', 'url' => route('admin.leaderboard.config'), 'active' => false],
        ['label' => 'Create', 'url' => '#', 'active' => true],
    ]" title="" />

    <div class="row">
        <div class="col-xxl-8 col-xl-7">
            <x-ui.card title="Create Leaderboard">
                <form id="leaderboardCreateForm" action="{{ route('admin.leaderboard.store') }}" method="post" enctype="multipart/form-data">
                    @csrf

                    <textarea name="reward_structure" id="reward_structure" hidden></textarea>

                    <div class="row gy-3">
                        <div class="col-md-6">
                            <x-form.input label="Leaderboard Toolbar Name" name="toolbar_name" placeholder="Daily" autofocus />
                        </div>

                        <div class="col-md-6">
                            <x-form.input label="Leaderboard Name" name="name" placeholder="Daily Refer" autofocus />
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Type</label>
                            <select name="type" class="form-select" required>
                                <option value="refer">Refer</option>
                                <option value="streak">Streak</option>
                                <option value="task">Task</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Total Prize Pool (coins)</label>
                            <input type="number" name="prize_pool" class="form-control" min="0" value="0">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Start Time (optional)</label>
                            <input type="text" id="start_time" name="start_time" class="form-control" placeholder="Leave empty to start now">
                            <small class="text-muted">If left empty, leaderboard will start immediately when created.</small>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">End Time</label>
                            <input type="text" id="end_time" name="end_time" class="form-control" placeholder="Pick an end date" required>
                            <small class="text-muted">Leaderboard will end at this date (cloning will use same duration).</small>
                        </div>

                        {{-- Fixed ranks --}}
                        @foreach($default_fixed as $rank => $value)
                            <div class="col-md-4">
                                <x-form.input label="Rank {{ $rank }}" type="number" class="fixed-input"
                                    name="fixed[{{ $rank }}]" value="{{ $value }}" data-rank="{{ $rank }}" />
                            </div>
                        @endforeach

                        {{-- Buckets --}}
                        <div class="card border-0 shadow-sm mt-2">
                            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                <span class="fw-semibold">Bucket Rewards</span>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="addBucketBtn">+ Add Bucket</button>
                            </div>
                            <div class="card-body" id="bucketContainer">
                                <p class="text-muted mb-0">No buckets added yet. Click “+ Add Bucket”.</p>
                            </div>
                        </div>

                    </div>

                
            </x-ui.card>
        </div>

        <div class="col-xxl-4 col-xl-5">
            <x-ui.card title="Options">
                {{-- Auto Renew Toggle --}}
                 <x-form.outline-toggle class="col-xl-6 mt-3" name="auto_renew" label="Auto Create Next Clone Leaderboard (Auto Renew)"
                    tooltip="Auto Create Next Clone Leaderboard (Auto Renew)" :selected="old('auto_renew')"
                    :required="true" :options="[
                        1 => ['label' => 'Yes'],
                        0 => ['label' => 'No'],
                    ]" />

                {{-- Max Ranks --}}
                <div class="mt-3">
                    <label class="form-label">Max User Participate</label>
                    <input type="number" name="max_ranks" class="form-control" min="1" value="50">
                    <small class="text-muted">How many user can Participate in leaderboard (default 50).</small>
                </div>

                {{-- Buttons --}}
                <div class="mt-3">
                    <button type="button" class="btn btn-outline-info px-4" id="btnPreviewBreakdown">💰 Preview Rewards Breakdown</button><br>
                    <button type="submit" form="leaderboardCreateForm" class="btn btn-primary mt-3 px-4">Create</button>
                </div>
                </form>
              
            </x-ui.card>
        </div>
    </div>

    <!-- Breakdown Modal (same as edit page) -->
    <div class="modal fade" id="previewBreakdownModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Prize Pool Breakdown</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered align-middle text-center">
                        <thead class="table-light">
                            <tr>
                                <th>Rank Range</th>
                                <th>Reward Type</th>
                                <th>Coins / User</th>
                                <th>Total Distributed</th>
                            </tr>
                        </thead>
                        <tbody id="breakdownBody">
                        </tbody>
                    </table>

                    <div id="baseRemainingBlock" class="alert alert-light border mt-3 mb-0" style="display:none;">
                        <strong>Base remaining after fixed + total:</strong>
                        <span id="baseRemainingValue">0</span> coins
                    </div>

                    <div class="alert alert-light border mt-3 mb-0">
                        <strong>Total Prize Pool:</strong>
                        <span id="breakdownTotal"></span> coins
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/toastify-js/src/toastify.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    @vite('resources/assets/js/select2.js')
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // flatpickr
    try {
        flatpickr("#start_time", {
            enableTime: false,
            altInput: true,
            altFormat: "F j, Y H:i",
            dateFormat: "Y-m-d H:i",
            disableMobile: true
        });
        flatpickr("#end_time", {
            enableTime: false,
            altInput: true,
            altFormat: "F j, Y",
            dateFormat: "Y-m-d H:i",
            disableMobile: true
        });
    } catch(e) { console.warn('flatpickr failed', e); }

    // helpers
    function createBucketRowHtml() {
        return `
        <div class="row g-2 align-items-center bucket-item mb-2">
            <div class="col-md-3">
                <input type="text" class="form-control bucket-range" placeholder="Range (e.g. 11-20)">
            </div>
            <div class="col-md-3">
                <select class="form-select bucket-type">
                    <option value="total">Total</option>
                    <option value="percent">Percent</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="number" class="form-control bucket-value" placeholder="Value">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger btn-sm removeBucketBtn"><i class="ri-delete-bin-line"></i></button>
            </div>
        </div>`;             

    }
    function qs(s){return document.querySelector(s);}
    function qsa(s){return Array.from(document.querySelectorAll(s));}

    // add bucket
    const addBucketBtn = qs('#addBucketBtn');
    const bucketContainer = qs('#bucketContainer');
    if (addBucketBtn && bucketContainer) {
        addBucketBtn.addEventListener('click', function(e){
            e.preventDefault();
            bucketContainer.insertAdjacentHTML('beforeend', createBucketRowHtml());
            const items = bucketContainer.querySelectorAll('.bucket-item');
            const newItem = items[items.length-1];
            if (newItem) {
                const rangeInput = newItem.querySelector('.bucket-range');
                if (rangeInput) rangeInput.focus();
            }
        });
    }

    // remove bucket (delegated)
    document.body.addEventListener('click', function(e){
        if (e.target && e.target.classList && e.target.classList.contains('removeBucketBtn')) {
            e.preventDefault();
            const row = e.target.closest('.bucket-item');
            if (row) row.remove();
        }
    });

    // preview logic (same algorithm as edit)
    const previewBtn = qs('#btnPreviewBreakdown');
    if (previewBtn) {
        previewBtn.addEventListener('click', function(){
            const pool = parseInt((qs('[name="prize_pool"]') || {}).value || 0, 10);
            if (!pool || isNaN(pool)) return alert("Please enter a valid prize pool first.");

            const breakdownBody = qs('#breakdownBody');
            breakdownBody.innerHTML = '';

            // fixed
            const fixedInputs = qsa('.fixed-input');
            let fixedSum = 0;
            fixedInputs.forEach(el=>{
                const rank = el.dataset.rank || '';
                const val = parseInt(el.value || 0, 10) || 0;
                if (val > 0) {
                    fixedSum += val;
                    const row = `
                    <tr>
                        <td>Rank ${rank}</td>
                        <td><span class="badge bg-success">Fixed</span></td>
                        <td>${val}</td>
                        <td>${val}</td>
                    </tr>`;
                    breakdownBody.insertAdjacentHTML('beforeend', row);
                }
            });

            // bucket nodes
            const bucketNodes = qsa('.bucket-item');

            // totals first
            let totalBucketsSum = 0;
            bucketNodes.forEach(row=>{
                const type = (row.querySelector('.bucket-type') || {}).value;
                const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
                if (type === 'total') totalBucketsSum += val;
            });

            bucketNodes.forEach(row=>{
                const range = (row.querySelector('.bucket-range') || {}).value.trim();
                const type = (row.querySelector('.bucket-type') || {}).value;
                const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
                if (!range) return;
                if (type === 'total') {
                    const parts = range.split('-').map(n=>parseInt(n.trim()));
                    const from = parts[0] || 0; const to = parts[1] || from;
                    const count = (to - from + 1) || 1;
                    const total = val;
                    const perUser = Math.floor(total/count);
                    const rowHtml = `
                        <tr>
                            <td>${range}</td>
                            <td><span class="badge bg-warning text-dark">total</span></td>
                            <td>${perUser}</td>
                            <td>${total}</td>
                        </tr>`;
                    breakdownBody.insertAdjacentHTML('beforeend', rowHtml);
                }
            });

            // base remaining
            let baseRemaining = pool - fixedSum - totalBucketsSum;
            if (baseRemaining < 0) baseRemaining = 0;
            const baseBlock = qs('#baseRemainingBlock');
            const baseValue = qs('#baseRemainingValue');
            if (baseBlock && baseValue) {
                baseValue.innerText = baseRemaining.toLocaleString();
                baseBlock.style.display = 'block';
            }

            // percent buckets sequentially
            const percentBuckets = [];
            bucketNodes.forEach(row=>{
                const range = (row.querySelector('.bucket-range') || {}).value.trim();
                const type = (row.querySelector('.bucket-type') || {}).value;
                const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
                if (!range) return;
                if (type === 'percent') percentBuckets.push({ range, percent: val });
            });

            let currentRemaining = baseRemaining;
            let percentDistributed = 0;
            percentBuckets.forEach(pb=>{
                const parts = pb.range.split('-').map(n=>parseInt(n.trim()));
                const from = parts[0] || 0; const to = parts[1] || from;
                const count = (to - from + 1) || 1;
                const pct = Number(pb.percent) || 0;
                const pctClamped = Math.max(0, pct);
                const bucketTotal = Math.floor((pctClamped / 100) * currentRemaining);
                const perUser = Math.floor(bucketTotal / count);
                const formula = `${currentRemaining.toLocaleString()} × ${pctClamped}% = ${bucketTotal.toLocaleString()}`;
                const rowHtml = `
                    <tr>
                        <td>${pb.range}</td>
                        <td><span class="badge bg-warning text-dark">percent</span></td>
                        <td>
                            ${perUser}
                            <div class="small text-muted mt-1">${formula}</div>
                        </td>
                        <td>${bucketTotal}</td>
                    </tr>`;
                breakdownBody.insertAdjacentHTML('beforeend', rowHtml);
                percentDistributed += bucketTotal;
                currentRemaining = Math.max(0, currentRemaining - bucketTotal);
            });

            const distributed = fixedSum + totalBucketsSum + percentDistributed;
            const diff = pool - distributed;
            const color = diff === 0 ? 'success' : (diff > 0 ? 'primary' : 'danger');
            const footer = `
                <tr class="table-${color}">
                    <td colspan="3"><strong>Remaining Difference</strong></td>
                    <td>${diff}</td>
                </tr>`;
            breakdownBody.insertAdjacentHTML('beforeend', footer);

            qs('#breakdownTotal').innerText = pool.toLocaleString();
            new bootstrap.Modal(qs('#previewBreakdownModal')).show();
        });
    }

    // form submit: build reward_structure JSON + ensure auto_renew posted
    (function attachFormSubmit() {
        const form = qs('#leaderboardCreateForm');
        if (!form) return;

        form.addEventListener('submit', function(e){
            e.preventDefault();

            // fixed
            const fixedInputs = qsa('.fixed-input');
            const fixed = {};
            fixedInputs.forEach(inp=>{
                const rank = inp.dataset.rank || inp.name.replace(/[^0-9]/g,'');
                fixed[rank] = parseInt(inp.value || 0, 10) || 0;
            });

            // buckets
            const buckets = [];
            qsa('.bucket-item').forEach(row=>{
                const range = (row.querySelector('.bucket-range') || {}).value || '';
                if (!range) return;
                const type = (row.querySelector('.bucket-type') || {}).value || 'total';
                const val = parseInt((row.querySelector('.bucket-value') || {}).value || 0, 10) || 0;
                const obj = { range: range };
                if (type === 'total') obj.total = val; else obj.percent = val;
                buckets.push(obj);
            });

            const structure = { fixed: fixed, buckets: buckets };
            const jsonArea = qs('#reward_structure');
            if (jsonArea) jsonArea.value = JSON.stringify(structure);

            // auto_renew hidden input handling
            // const autoRenew = qs('#autoRenew');
            // let autoInput = qs('input[name="auto_renew"]');
            // if (!autoInput) {
            //     autoInput = document.createElement('input');
            //     autoInput.type = 'hidden';
            //     autoInput.name = 'auto_renew';
            //     form.appendChild(autoInput);
            // }
            // autoInput.value = (autoRenew && autoRenew.checked) ? '1' : '0';

            // ensure max_ranks exists (normal input)
            form.submit();
        });
    })();

}); // DOMContentLoaded
</script>
@endsection