<?php
/** @var \Autogedal\StockLog\Block\Adminhtml\History $block */
$sku     = $block->escapeHtml($block->getSku());
$history = $block->getHistoryData();
$chart   = $block->getChartJson();
?>

<div class="admin__page-section">
    <div style="margin-bottom: 16px;">
        <a href="<?= $block->escapeUrl($block->getBackUrl()) ?>" class="action-default scalable back">
            <span><?= $block->escapeHtml(__('Back to Stock Log')) ?></span>
        </a>
    </div>

    <div class="admin__page-section-title">
        <span class="title"><?= $block->escapeHtml(__('Stock History — SKU: %1', $sku)) ?></span>
        <span style="margin-left:16px;color:#666;">
            <?= count($history) ?> <?= $block->escapeHtml(__('entries')) ?>
        </span>
    </div>

    <?php if (empty($history)): ?>
        <p><?= $block->escapeHtml(__('No stock changes recorded for this SKU yet.')) ?></p>
    <?php else: ?>

    <div style="background:#fff;padding:20px;border:1px solid #d6d6d6;border-radius:4px;margin-bottom:24px;">
        <canvas id="stockHistoryChart" height="80"></canvas>
    </div>

    <div class="admin__data-grid-wrap">
        <table class="data-grid" style="width:100%">
            <thead>
                <tr>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Date')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Qty Before')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Qty After')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Delta')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('In Stock Before')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('In Stock After')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Source')) ?></th>
                    <th class="data-grid-th"><?= $block->escapeHtml(__('Admin User')) ?></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($history as $row):
                    $delta     = (float)$row['qty_after'] - (float)$row['qty_before'];
                    $deltaStr  = ($delta >= 0 ? '+' : '') . number_format($delta, 0);
                    $deltaColor = $delta >= 0 ? '#28a745' : '#dc3545';
                    $inStockAfterBadge = (int)$row['is_in_stock_after'] === 1
                        ? '<span style="color:#28a745;font-weight:bold">Yes</span>'
                        : '<span style="color:#dc3545;font-weight:bold">No</span>';
                    $inStockBeforeBadge = (int)$row['is_in_stock_before'] === 1
                        ? '<span style="color:#28a745">Yes</span>'
                        : '<span style="color:#dc3545">No</span>';
                ?>
                <tr>
                    <td><?= $block->escapeHtml($block->formatLogDate($row['created_at'])) ?></td>
                    <td><?= number_format((float)$row['qty_before'], 0) ?></td>
                    <td><?= number_format((float)$row['qty_after'], 0) ?></td>
                    <td style="font-weight:bold;color:<?= $deltaColor ?>"><?= $deltaStr ?></td>
                    <td><?= /* @noEscape */ $inStockBeforeBadge ?></td>
                    <td><?= /* @noEscape */ $inStockAfterBadge ?></td>
                    <td><?= $block->escapeHtml($row['source'] ?? '') ?></td>
                    <td><?= $block->escapeHtml($row['admin_username'] ?? '') ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <script>
    require(['stocklog-chartjs'], function (Chart) {
        var d = <?= /* @noEscape */ $chart ?>;
        var ctx = document.getElementById('stockHistoryChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: d.labels,
                datasets: [{
                    label: 'Qty',
                    data: d.qtys,
                    borderColor: '#007bff',
                    backgroundColor: 'rgba(0,123,255,0.08)',
                    pointBackgroundColor: d.colors,
                    pointRadius: 5,
                    tension: 0.15,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            title: function(items) { return items[0].label; },
                            label: function(item) { return 'Qty: ' + item.raw; }
                        }
                    }
                },
                scales: {
                    x: { ticks: { maxTicksLimit: 20, maxRotation: 45 } },
                    y: { beginAtZero: true, title: { display: true, text: 'Qty' } }
                }
            }
        });
    });
    </script>

    <?php endif; ?>
</div>
