@props([
    'positive' => 0,
    'neutral'  => 0,
    'negative' => 0,
    'title'    => 'Sentiment Analysis',
])

@php
    $chartId = 'sentimentChart_' . uniqid();
    $total = $positive + $neutral + $negative;
@endphp

<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-gray-100">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">
        <i class="fas fa-chart-pie text-rose-500 mr-2"></i>{{ $title }}
    </h3>

    @if($total > 0)
        <div class="relative h-56 flex items-center justify-center">
            <canvas id="{{ $chartId }}"
                    data-positive="{{ $positive }}"
                    data-neutral="{{ $neutral }}"
                    data-negative="{{ $negative }}">
            </canvas>
        </div>
        <div class="flex justify-center gap-6 mt-4 text-sm">
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-green-500 inline-block"></span>
                <span class="text-gray-600">Positive ({{ $positive }})</span>
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-yellow-400 inline-block"></span>
                <span class="text-gray-600">Neutral ({{ $neutral }})</span>
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-red-500 inline-block"></span>
                <span class="text-gray-600">Negative ({{ $negative }})</span>
            </span>
        </div>
    @else
        <div class="flex flex-col items-center justify-center h-40 text-gray-400">
            <i class="fas fa-poll text-4xl mb-3 text-gray-300"></i>
            <p class="text-sm">No poll responses yet.</p>
            <p class="text-xs mt-1">Create polls to start collecting sentiment data.</p>
        </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    const canvas = document.getElementById('{{ $chartId }}');
    if (!canvas || typeof Chart === 'undefined') return;

    new Chart(canvas, {
        type: 'doughnut',
        data: {
            labels: ['Positive', 'Neutral', 'Negative'],
            datasets: [{
                data: [
                    parseInt(canvas.dataset.positive) || 0,
                    parseInt(canvas.dataset.neutral) || 0,
                    parseInt(canvas.dataset.negative) || 0,
                ],
                backgroundColor: ['#22c55e', '#facc15', '#ef4444'],
                borderWidth: 0,
                hoverOffset: 6,
            }]
        },
        options: {
            cutout: '65%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            const total = ctx.dataset.data.reduce((a, b) => a + b, 0);
                            const pct = total > 0 ? Math.round((ctx.parsed / total) * 100) : 0;
                            return ` ${ctx.label}: ${ctx.parsed} (${pct}%)`;
                        }
                    }
                }
            },
            animation: { animateRotate: true, duration: 800 },
        }
    });
})();
</script>
@endpush
