@extends('template.desktop.app')

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <div class="card">
        <div class="card-header border-bottom">
            <h5 class="mb-0 fw-bold">Bulk Upload Stock Mitra</h5>
            <small class="text-muted">
                Upload file Excel · 1 baris = 1 transaksi
            </small>
        </div>

        <div class="card-body">

            {{-- FILE UPLOAD --}}
            <div class="mb-4">
                <label class="form-label fw-semibold mt-3">Upload File Excel</label>

                <div id="uploadZone" class="border border-2 border-dashed rounded text-center p-5 bg-light cursor-pointer">
                    <i class="ti tabler-upload fs-1 text-primary mb-2"></i>
                    <h6 class="fw-semibold mb-1">Drop file Excel di sini</h6>
                    <p class="text-muted mb-0">atau klik untuk memilih file (.xls, .xlsx)</p>
                    <input type="file" id="excel" class="d-none" accept=".xls,.xlsx">
                </div>

                <div id="fileName" class="mt-2 text-muted small d-none">
                    File: <b></b>
                </div>
            </div>

            {{-- CONTROL --}}
            <div class="d-flex gap-2 align-items-center mb-3">
                <button id="pauseBtn" class="btn btn-warning btn-sm" disabled>
                    <i class="ti tabler-player-pause"></i> Pause
                </button>
                <button id="resumeBtn" class="btn btn-success btn-sm d-none">
                    <i class="ti tabler-player-play"></i> Resume
                </button>
                <button id="cancelBtn" class="btn btn-danger btn-sm" disabled>
                    <i class="ti tabler-x"></i> Cancel
                </button>

                <span id="pauseTimer" class="ms-auto text-muted small d-none">
                    Pause remaining: <b></b>
                </span>
            </div>

            {{-- PROGRESS --}}
            <div class="mb-4">
                <div class="d-flex justify-content-between mb-1">
                    <span class="fw-semibold">Progress</span>
                    <span class="fw-semibold"><span id="progressText">0%</span></span>
                </div>
                <div class="progress" style="height:10px">
                    <div id="progressBar" class="progress-bar bg-primary" style="width:0%"></div>
                </div>
            </div>

            {{-- SUMMARY --}}
            <div class="row text-center mb-4">
                <div class="col-md-4">
                    <div class="border rounded p-3">
                        <div class="text-muted">Total Row</div>
                        <div class="fs-4 fw-bold" id="totalRow">0</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="border rounded p-3 bg-light-success">
                        <div class="text-success">Success</div>
                        <div class="fs-4 fw-bold text-success" id="successRow">0</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="border rounded p-3 bg-light-danger">
                        <div class="text-danger">Error</div>
                        <div class="fs-4 fw-bold text-danger" id="errorRow">0</div>
                    </div>
                </div>
            </div>

            {{-- FILTER --}}
            <div class="d-flex gap-2 mb-3">
                <button class="btn btn-outline-secondary btn-sm active" id="filterAll">All</button>
                <button class="btn btn-outline-success btn-sm" id="filterSuccess">Success</button>
                <button class="btn btn-outline-danger btn-sm" id="filterError">Error</button>
            </div>

            {{-- TABLE --}}
            <div class="table-responsive" style="max-height:420px">
                <table class="table table-sm table-bordered align-middle">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th style="width:60px">#</th>
                            <th>Kode Mitra</th>
                            <th>SKU Produk</th>
                            <th style="width:120px">Status</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody id="resultTable"></tbody>
                </table>
            </div>

        </div>
    </div>


    <script>
        const uploadZone = document.getElementById('uploadZone')
        const inputFile = document.getElementById('excel')
        const fileName = document.getElementById('fileName')

        const pauseBtn = document.getElementById('pauseBtn')
        const resumeBtn = document.getElementById('resumeBtn')
        const cancelBtn = document.getElementById('cancelBtn')
        const pauseTimer = document.getElementById('pauseTimer')

        const progressBar = document.getElementById('progressBar')
        const progressText = document.getElementById('progressText')
        const table = document.getElementById('resultTable')

        const totalRowEl = document.getElementById('totalRow')
        const successRowEl = document.getElementById('successRow')
        const errorRowEl = document.getElementById('errorRow')

        const filterAllBtn = document.getElementById('filterAll')
        const filterSuccessBtn = document.getElementById('filterSuccess')
        const filterErrorBtn = document.getElementById('filterError')

        let successCount = 0
        let errorCount = 0
        let isPaused = false
        let isCanceled = false
        let pauseUntil = null
        let currentFilter = 'all'

        const normalize = str =>
            str.toString().trim().replace(/\s+/g, ' ').toUpperCase()

        uploadZone.onclick = () => inputFile.click()
        pauseBtn.onclick = () => startPause()
        resumeBtn.onclick = () => resumeProcess()
        cancelBtn.onclick = () => cancelProcess()

        filterAllBtn.onclick = () => setFilter('all')
        filterSuccessBtn.onclick = () => setFilter('success')
        filterErrorBtn.onclick = () => setFilter('error')

        inputFile.onchange = e => {
            const file = e.target.files[0]
            if (!file) return
            fileName.classList.remove('d-none')
            fileName.querySelector('b').innerText = file.name
            resetState()
            processFile(file)
        }

        function resetState() {
            successCount = errorCount = 0
            isPaused = isCanceled = false

            pauseBtn.disabled = false
            cancelBtn.disabled = false
            resumeBtn.classList.add('d-none')
            pauseTimer.classList.add('d-none')
            pauseBtn.classList.remove('d-none')

            table.innerHTML = ''
            progressBar.style.width = '0%'
            progressText.innerText = '0%'
            successRowEl.innerText = errorRowEl.innerText = 0
            setFilter('all')
        }

        function startPause() {
            isPaused = true
            pauseUntil = Date.now() + 180000
            pauseBtn.classList.add('d-none')
            resumeBtn.classList.remove('d-none')
            pauseTimer.classList.remove('d-none')
            updatePauseTimer()
        }

        function resumeProcess() {
            isPaused = false
            pauseUntil = null
            resumeBtn.classList.add('d-none')
            pauseBtn.classList.remove('d-none')
            pauseTimer.classList.add('d-none')
        }

        function cancelProcess() {
            isCanceled = true
            pauseBtn.disabled = resumeBtn.disabled = cancelBtn.disabled = true
            pauseTimer.classList.add('d-none')
        }

        function updatePauseTimer() {
            if (!isPaused) return
            const remain = Math.max(0, pauseUntil - Date.now())
            pauseTimer.querySelector('b').innerText = Math.ceil(remain / 1000) + 's'
            if (remain <= 0) resumeProcess()
            else setTimeout(updatePauseTimer, 1000)
        }

        async function processFile(file) {
            const reader = new FileReader()
            reader.onload = async evt => {
                const wb = XLSX.read(evt.target.result, {
                    type: 'binary'
                })
                const sheet = wb.Sheets[wb.SheetNames[0]]
                const rows = XLSX.utils.sheet_to_json(sheet, {
                    defval: ''
                })

                totalRowEl.innerText = rows.length

                for (let i = 0; i < rows.length; i++) {

                    if (isCanceled) {
                        systemRow('Process canceled')
                        break
                    }

                    while (isPaused) await sleep(500)

                    const row = {}
                    Object.keys(rows[i]).forEach(k => row[normalize(k)] = rows[i][k])

                    const payload = {
                        kode_mitra: row['KODE MITRA'],
                        sku_produk: row['SKU PRODUK'],
                        stock: parseInt(row['STOCK'] || 0)
                    }

                    try {
                        const res = await axios.post('{{ route('warehouse.stock.import.row') }}', payload)
                        const d = res.data
                        d.row_status === 'success' ? successCount++ : errorCount++
                        successRowEl.innerText = successCount
                        errorRowEl.innerText = errorCount
                        appendRow(i + 1, d)
                    } catch {
                        errorCount++
                        errorRowEl.innerText = errorCount
                        appendRow(i + 1, {
                            ...payload,
                            row_status: 'error',
                            message: 'Request failed'
                        })
                    }

                    const p = Math.round(((i + 1) / rows.length) * 100)
                    progressBar.style.width = p + '%'
                    progressText.innerText = p + '%'
                }
            }
            reader.readAsBinaryString(file)
        }

        function appendRow(i, d) {
            const status = d.row_status === 'success' ? 'success' : 'error'
            const badge = status === 'success' ?
                '<span class="badge bg-success">Success</span>' :
                '<span class="badge bg-danger">Error</span>'

            table.insertAdjacentHTML('beforeend', `
        <tr data-status="${status}">
            <td class="text-center">${i}</td>
            <td>${d.kode_mitra ?? '-'}</td>
            <td>${d.sku_produk ?? '-'}</td>
            <td class="text-center">${badge}</td>
            <td>${d.message}</td>
        </tr>
    `)

            applyFilter()
        }

        function systemRow(msg) {
            table.insertAdjacentHTML('beforeend',
                `<tr class="table-warning"><td colspan="5" class="fw-semibold text-center">${msg}</td></tr>`)
        }

        function setFilter(type) {
            currentFilter = type
            filterAllBtn.classList.remove('active')
            filterSuccessBtn.classList.remove('active')
            filterErrorBtn.classList.remove('active')
            if (type === 'all') filterAllBtn.classList.add('active')
            if (type === 'success') filterSuccessBtn.classList.add('active')
            if (type === 'error') filterErrorBtn.classList.add('active')
            applyFilter()
        }

        function applyFilter() {
            const rows = table.querySelectorAll('tr[data-status]')
            rows.forEach(r => {
                if (currentFilter === 'all' || r.dataset.status === currentFilter)
                    r.classList.remove('d-none')
                else r.classList.add('d-none')
            })
        }

        const sleep = ms => new Promise(r => setTimeout(r, ms))
    </script>
@endsection