<?php
/**
 * SalonPro X - Chart Component
 * Usage: <?php component('chart', ['id' => 'revenueChart', 'type' => 'line', 'labels' => [...], 'datasets' => [...]]); ?>
 * @var string $id Chart canvas ID
 * @var string $type Chart type: line, bar, doughnut, pie, polarArea (default: line)
 * @var array $labels Chart labels
 * @var array $datasets Array of dataset objects with label, data, backgroundColor, borderColor
 * @var string $height Chart height (default: 300)
 * @var string $class Additional classes
 */
$id = $id ?? 'chart';
$type = $type ?? 'line';
$labels = $labels ?? [];
$datasets = $datasets ?? [];
$height = $height ?? '300';
$class = $class ?? '';
?>
<div class="chart-container <?= e($class) ?>" style="height: <?= e($height) ?>px;">
    <canvas id="<?= e($id) ?>"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('<?= e($id) ?>');
    if (!ctx) return;
    new Chart(ctx, {
        type: '<?= e($type) ?>',
        data: {
            labels: <?= json_encode($labels) ?>,
            datasets: <?= json_encode($datasets) ?>
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    labels: { color: '#B0B0B0' }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    backgroundColor: 'rgba(26, 26, 26, 0.9)',
                    titleColor: '#C8A44E',
                    bodyColor: '#FFFFFF',
                    borderColor: 'rgba(255, 255, 255, 0.1)',
                    borderWidth: 1
                }
            },
            scales: {
                x: {
                    grid: { color: 'rgba(255, 255, 255, 0.05)' },
                    ticks: { color: '#6C757D' }
                },
                y: {
                    grid: { color: 'rgba(255, 255, 255, 0.05)' },
                    ticks: { color: '#6C757D' },
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
