{% extends "admin_base.html" %}
{% load static %}
{# {% load custom_filters %} #}

{% block title %}Poll Management Dashboard | {{ site_header|default:_('Django administration') }}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js"></script>

    <style>
        .popup-backdrop { backdrop-filter: blur(5px); background-color: rgba(0, 0, 0, 0.6); }
        .toast { transform: translateX(0); opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
        .toast.hiding { transform: translateX(110%); opacity: 0; }
        .modal-overlay { transition: opacity 0.3s ease-in-out; }
        .modal-content { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
        .modal-hidden { opacity: 0; pointer-events: none; }
        .modal-hidden .modal-content { transform: translateY(-20px) scale(0.95); opacity: 0; }
        .modal-visible { opacity: 1; pointer-events: auto; }
        .modal-visible .modal-content { transform: translateY(0) scale(1); opacity: 1; }
        .chart-container-modal { position: relative; height: 60vh; max-height: 480px; width: 100%; }
        .modal-body::-webkit-scrollbar { width: 8px; }
        .modal-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        .modal-body::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 10px; }
        .modal-body::-webkit-scrollbar-thumb:hover { background: #6b7280; }
        #content-main { padding-bottom: 50px; }
        .action-button { @apply inline-flex items-center p-2.5 rounded-lg text-sm font-medium shadow-sm transition-colors duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-1; }
        .action-button-view { @apply bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 action-button; }
        .action-button-edit { @apply bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-400 action-button; }
        .action-button-delete { @apply bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 action-button; }
        .search-container { position: relative; }
        .search-input { padding-left: 2.75rem !important; }
        .search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
        .gradient-text { background: linear-gradient(90deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    </style>
{% endblock extra_css %}

{% block coltype %}colM{% endblock %}

{% block content %}
<div id="content-main" class="p-4 md:p-6 lg:p-8 bg-gray-100 min-h-screen">
    <!-- Header -->
    <div class="mb-10 text-center">
      <h1 class="text-4xl md:text-5xl font-extrabold gradient-text mb-2">Poll Management</h1>
      <p class="text-gray-600 text-lg">Create, manage and analyze your polls with ease</p>
    </div>

    <!-- Search Bar and Add Button -->
    <div class="mb-10">
        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="search-container flex-grow w-full sm:w-auto">
                <form method="get" action="{% url 'mimansha_main:all_polls' %}" class="relative w-full">
                    <i class="fas fa-search fa-md search-icon"></i>
                    <input type="text" id="searchInput" name="search" value="{{ search_query|default:'' }}" placeholder="Search polls by question..." class="search-input w-full p-3 pr-10 bg-white border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none rounded-lg shadow-sm"/>
                    <button type="submit" aria-label="Search" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-blue-500 hover:text-blue-700"><i class="fas fa-arrow-right"></i></button>
                </form>
            </div>
            <a href="/create-poll" {# Consider using {% url 'your_app:create_poll_url_name' %} #}
               class="w-full sm:w-auto bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-3 px-5 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition duration-150 ease-in-out flex items-center justify-center">
                <i class="fas fa-plus mr-2"></i> Create Poll
            </a>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-12">
        <div class="bg-white p-5 rounded-xl shadow-lg text-center border-t-4 border-blue-500">
            <p class="text-sm text-gray-500 font-medium">Total Polls</p>
            <p class="text-3xl font-bold text-blue-600 mt-1">{{ total_polls_count|default:0 }}</p>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-lg text-center border-t-4 border-purple-500">
            <p class="text-sm text-gray-500 font-medium">Total Votes Cast</p>
            <p class="text-3xl font-bold text-purple-600 mt-1">{{ grand_total_votes|default:0 }}</p>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-lg text-center border-t-4 border-green-500">
            <p class="text-sm text-gray-500 font-medium">Active Polls</p>
            <p class="text-3xl font-bold text-green-600 mt-1">{{ active_polls_count|default:total_polls_count|default:0 }}</p>
        </div>
        <div class="bg-white p-5 rounded-xl shadow-lg text-center border-t-4 border-amber-500">
            <p class="text-sm text-gray-500 font-medium">Avg. Votes / Poll</p>
            <p class="text-3xl font-bold text-amber-600 mt-1">{% if total_polls_count|default:0 > 0 %}{{ average_votes_per_poll|default:0|floatformat:1 }}{% else %}0{% endif %}</p>
        </div>
    </div>

    {% if not poll_data %}
        <div class="text-center py-16 bg-white rounded-xl shadow-lg">
            <i class="fas fa-meh-blank fa-4x text-gray-300 mb-6"></i>
            <p class="text-xl font-semibold text-gray-600">No polls found.</p>
            {% if search_query %}<p class="text-gray-500 mt-2">Try adjusting your search terms.</p>
            {% elif not perms.mimansha_main.add_poll %}<p class="text-gray-500 mt-2">Check back later for new polls.</p>
            {% else %}<p class="text-gray-500 mt-2">Why not <a href="/create-poll" class="text-blue-600 hover:underline font-medium">create the first one</a>?</p>{% endif %}
        </div>
    {% else %}
        <div class="space-y-10">
            {% for item in poll_data %}
            <section class="poll-card-item bg-white shadow-xl rounded-xl p-6 hover:shadow-2xl transition-shadow duration-300" id="poll-card-{{ item.poll.id }}" aria-labelledby="poll-title-{{ item.poll.id }}">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-5 pb-4 border-b border-gray-200">
                    <div class="flex-grow min-w-0 pr-4">
                        <h2 id="poll-title-{{ item.poll.id }}" class="text-2xl font-semibold text-gray-800 truncate" title="{{ item.poll.question }}">{{ item.poll.question }}</h2>
                        <p class="text-sm text-gray-500 mt-1">Total Votes: <span class="font-bold text-gray-700">{{ item.total_votes }}</span><span class="mx-2 text-gray-300">|</span>Options: <span class="font-bold text-gray-700">{{ item.options|length }}</span></p>
                    </div>
                    <div class="flex space-x-2 mt-4 sm:mt-0 flex-shrink-0">
                        <button type="button"
                            data-poll-id="{{ item.poll.id }}"
                            data-poll-question="{{ item.poll.question|escapejs }}"
                            data-options-json='{{ item.options_json|safe }}' {# CRITICAL: Single quotes around attribute value #}
                            class="action-button-view view-chart-btn"
                            title="View Results Chart">
                            <i class="fas fa-chart-pie mr-1 sm:mr-1.5"></i><span class="hidden sm:inline">View Chart</span>
                        </button>
                        <a href="{% url 'mimansha_main:create_poll' item.poll.id %}" title="Edit Poll" class="action-button-edit"><i class="fas fa-edit mr-1 sm:mr-1.5"></i><span class="hidden sm:inline">Edit</span></a>
                        <button type="button" onclick="pollApp.showDeleteConfirmation('{{ item.poll.id }}')" title="Delete Poll" class="action-button-delete"><i class="fas fa-trash-alt mr-1 sm:mr-1.5"></i><span class="hidden sm:inline">Delete</span></button>
                    </div>
                </div>
                <h3 class="text-lg font-medium text-gray-700 mb-4">Options & Votes:</h3>
                {% if item.options %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for option in item.options %}
                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-baseline mb-1"><p class="text-md font-semibold text-gray-700 truncate" title="{{ option.option_text }}">{{ option.option_text }}</p><p class="text-xs text-gray-500 whitespace-nowrap">{{ option.percentage|default:0|floatformat:1 }}%</p></div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5 mb-1"><div class="bg-gradient-to-r from-sky-500 to-indigo-500 h-2.5 rounded-full" style="width: {{ option.percentage|default:0 }}%"></div></div>
                        <p class="text-right text-sm font-medium text-indigo-700">{{ option.votes }} <span class="text-xs font-normal text-gray-500">vote{{ option.votes|pluralize }}</span></p>
                    </div>
                    {% endfor %}
                </div>
                {% else %}<p class="text-gray-500 italic">No options defined for this poll.</p>{% endif %}
            </section>
            {% endfor %}
        </div>
    {% endif %}
</div>

<!-- Chart Modal -->
<div id="chartModal" class="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black bg-opacity-70 modal-overlay modal-hidden" role="dialog" aria-modal="true" aria-labelledby="chartModalTitle">
    <div class="modal-content bg-white rounded-xl shadow-2xl w-full max-w-3xl transform">
        <div class="flex justify-between items-center p-5 border-b border-gray-200"><h3 id="chartModalTitle" class="text-2xl font-semibold text-gray-800">Poll Chart</h3><button type="button" onclick="pollApp.closeChartModal()" class="text-gray-400 hover:text-gray-600 transition-colors text-2xl" aria-label="Close modal"><i class="fas fa-times"></i></button></div>
        <div class="p-6 modal-body" style="max-height: calc(100vh - 160px); overflow-y: auto;"><div class="chart-container-modal"><canvas id="modalPollCanvasInstance"></canvas></div></div>
        <div class="px-6 py-4 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0 sm:space-x-3"><p id="modalTotalVotes" class="text-sm text-gray-600 mr-auto"></p><button type="button" id="downloadChartButton" class="w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white font-semibold py-2.5 px-5 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out flex items-center justify-center"><i class="fas fa-download mr-2"></i> Download Chart</button></div>
    </div>
</div>

<!-- Hidden Delete Form -->
<form id="delete-poll-form" method="POST" style="display:none;">{% csrf_token %}<input type="hidden" name="id" id="delete-poll-id"></form>
<!-- Popup Overlay for Delete -->
<div id="delete-popup-overlay" class="fixed inset-0 popup-backdrop z-[70]" style="display:none;"></div>
<!-- Delete Confirmation Popup -->
<div id="delete-confirmation-popup" class="fixed inset-0 flex justify-center items-center z-[80]" style="display:none;" role="alertdialog" aria-modal="true" aria-labelledby="deletePopupTitle">
    <div class="bg-white p-7 rounded-xl shadow-2xl max-w-md w-11/12 mx-auto transform transition-all duration-300"><div class="text-center"><div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-5"><i class="fas fa-exclamation-triangle text-red-500 text-3xl"></i></div><h3 id="deletePopupTitle" class="text-xl font-semibold text-gray-800 mb-3">Confirm Deletion</h3><p class="text-gray-600 mb-6">Are you sure you want to delete this poll? This action cannot be undone.</p><div class="flex flex-col sm:flex-row justify-center gap-3"><button type="button" onclick="pollApp.submitActualDeleteForm()" class="w-full sm:w-auto bg-red-600 hover:bg-red-700 text-white font-semibold py-2.5 px-6 rounded-lg transition duration-150 ease-in-out flex items-center justify-center"><i class="fas fa-trash-alt mr-2"></i> Yes, Delete Poll</button><button type="button" onclick="pollApp.hideDeleteConfirmation()" class="w-full sm:w-auto bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2.5 px-6 rounded-lg transition duration-150 ease-in-out flex items-center justify-center"><i class="fas fa-times mr-2"></i> Cancel</button></div></div></div>
</div>
<!-- Toast Container -->
<div id="toast-container" class="fixed bottom-5 right-5 z-[90] flex flex-col gap-3"></div>

<script>
// Encapsulate all app logic in an object to avoid polluting global scope
const pollApp = {};

document.addEventListener('DOMContentLoaded', function() {
    // --- CHART MODAL LOGIC ---
    pollApp.currentModalChartInstance = null;
    pollApp.chartModalEl = document.getElementById('chartModal');
    pollApp.chartModalTitleEl = document.getElementById('chartModalTitle');
    pollApp.chartModalTotalVotesEl = document.getElementById('modalTotalVotes');
    pollApp.modalChartCanvas = document.getElementById('modalPollCanvasInstance');
    pollApp.downloadModalChartButtonEl = document.getElementById('downloadChartButton');
    pollApp.modalChartCtx = null;

    if (!pollApp.chartModalEl || !pollApp.modalChartCanvas) {
        console.error("Essential chart modal elements (chartModal or modalPollCanvasInstance) are missing. Chart functionality will be disabled.");
        document.querySelectorAll('.view-chart-btn').forEach(btn => { if (btn) btn.disabled = true; });
    } else {
        try {
            pollApp.modalChartCtx = pollApp.modalChartCanvas.getContext('2d');
            if (!pollApp.modalChartCtx) {
                 console.error("Failed to get 2D context for modal chart canvas. Chart functionality will be disabled.");
                 document.querySelectorAll('.view-chart-btn').forEach(btn => { if (btn) btn.disabled = true; });
            }
        } catch (e) {
            console.error("Error getting 2D context for modal chart canvas:", e);
            document.querySelectorAll('.view-chart-btn').forEach(btn => { if (btn) btn.disabled = true; });
        }
    }

    const G_CHART_COLORS_PRIMARY = ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#6366F1', '#D946EF', '#0EA5E9', '#F43F5E', '#65A30D'];
    
    function getChartColors(numColors, primarySet = G_CHART_COLORS_PRIMARY) {
        const colors = [];
        for (let i = 0; i < numColors; i++) { colors.push(primarySet[i % primarySet.length]); }
        return colors;
    }
    
    function displayChartMessage(message, ctx) {
        if (!ctx) { console.warn("displayChartMessage called with no context."); return; }
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        ctx.font = "16px Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";
        ctx.fillStyle = "#6B7280";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(message, ctx.canvas.width / 2, ctx.canvas.height / 2);
        ctx.restore();
    }
    pollApp.generateModalPollChart = function(pollQuestion, optionsData) {
        if (!pollApp.modalChartCtx) { console.error("Modal chart canvas context is not available for generating chart."); return; }
        if (pollApp.currentModalChartInstance) { pollApp.currentModalChartInstance.destroy(); }

        if (!optionsData || !Array.isArray(optionsData)) {
            console.error("Invalid/null optionsData for chart. Received:", optionsData);
            displayChartMessage("Error: Chart data is invalid or missing.", pollApp.modalChartCtx);
            if(pollApp.downloadModalChartButtonEl) pollApp.downloadModalChartButtonEl.disabled = true;
            return;
        }

        const labels = optionsData.map(opt => opt.text);
        const votes = optionsData.map(opt => Number(opt.votes) || 0);
        const totalVotes = votes.reduce((sum, current) => sum + current, 0);

        // We will set the modal title via HTML element, but chart title/subtitle via Chart.js options
        if(pollApp.chartModalTitleEl) pollApp.chartModalTitleEl.textContent = "Poll Results"; // Generic modal title
        if(pollApp.chartModalTotalVotesEl) pollApp.chartModalTotalVotesEl.textContent = `Overall Total: ${totalVotes} votes`; // This is the text *below* the chart

        const downloadButton = pollApp.downloadModalChartButtonEl;

        if (optionsData.length === 0) {
            displayChartMessage("No options defined for this poll.", pollApp.modalChartCtx);
            if(downloadButton) { downloadButton.disabled = true; downloadButton.classList.add('opacity-50', 'cursor-not-allowed');}
            pollApp.currentModalChartInstance = null; return;
        } else if (totalVotes === 0) {
            // Chart will still render with a "No votes cast" message from displayChartMessage IF we call it.
            // For now, let the chart render with 0 values and display the message via title/subtitle if preferred.
            // displayChartMessage("No votes cast for this poll yet.", pollApp.modalChartCtx); 
            if(downloadButton) { downloadButton.disabled = false; downloadButton.classList.remove('opacity-50', 'cursor-not-allowed');}
        } else {
            if(downloadButton) { downloadButton.disabled = false; downloadButton.classList.remove('opacity-50', 'cursor-not-allowed');}
        }

        const numOptions = labels.length;
        const chartType = numOptions > 0 && numOptions <= 5 ? 'pie' : 'bar';
        let chartConfig;
        const baseChartColors = getChartColors(numOptions);
        const borderColors = chartType === 'pie' ? '#FFFFFF' : baseChartColors.map(color => chroma(color).darken(0.4).hex());

        // Common font settings for chart
        const chartFontFamily = "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";

        try {
            const chartTitleOptions = {
                display: true,
                text: pollQuestion, // Main poll question as title
                font: {
                    size: 18,
                    weight: 'bold',
                    family: chartFontFamily
                },
                color: '#333', // Dark gray
                padding: {
                    top: 10,
                    bottom: 5 // Less padding if subtitle follows
                }
            };

            const chartSubtitleOptions = {
                display: true,
                text: `Total Votes: ${totalVotes}`, // Subtitle for total votes
                font: {
                    size: 14,
                    family: chartFontFamily
                },
                color: '#555', // Medium gray
                padding: {
                    bottom: 15 // Padding below subtitle
                }
            };

            if (chartType === 'pie') {
                chartConfig = {
                    type: 'pie',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Votes',
                            data: votes,
                            backgroundColor: baseChartColors,
                            borderColor: borderColors,
                            borderWidth: 2,
                            hoverOffset: 8
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: chartTitleOptions, // Use the defined title
                            subtitle: chartSubtitleOptions, // Use the defined subtitle
                            legend: {
                                position: 'right',
                                labels: {
                                    font: { size: 13, family: chartFontFamily },
                                    color: '#374151', boxWidth: 18, padding: 15
                                }
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.85)',
                                titleFont: { size: 14, weight: '600', family: chartFontFamily },
                                bodyFont: { size: 12, family: chartFontFamily },
                                padding: 12, cornerRadius: 6,
                                callbacks: {
                                    label: function(context) {
                                        let l = context.label || '';
                                        if (l) l += ': ';
                                        const v = context.raw;
                                        const p = totalVotes > 0 ? ((v / totalVotes) * 100).toFixed(1) + '%' : '0%';
                                        l += `${v} votes (${p})`;
                                        return l;
                                    }
                                }
                            }
                        }
                    }
                };
            } else { /* Bar chart */
                const isHorizontal = numOptions > 6;
                chartConfig = {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Votes',
                            data: votes,
                            backgroundColor: baseChartColors.map(c => chroma(c).alpha(0.75).hex()),
                            borderColor: borderColors,
                            borderWidth: 1.5,
                            borderRadius: numOptions <= 3 ? 8 : 5,
                            barPercentage: 0.8,
                            categoryPercentage: 0.7,
                            hoverBackgroundColor: baseChartColors.map(c => chroma(c).hex())
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        indexAxis: isHorizontal ? 'y' : 'x',
                        scales: {
                            [isHorizontal ? 'x' : 'y']: {
                                beginAtZero: true,
                                ticks: { precision: 0, color: '#4B5563', font: { size: 12, family: chartFontFamily } },
                                grid: { borderColor: '#e5e7eb' }
                            },
                            [isHorizontal ? 'y' : 'x']: {
                                ticks: { color: '#4B5563', font: { size: isHorizontal ? 12 : (numOptions > 10 ? 11 : 12), family: chartFontFamily } },
                                grid: { display: !isHorizontal, drawOnChartArea: !isHorizontal, borderColor: '#e5e7eb' }
                            }
                        },
                        plugins: {
                            title: chartTitleOptions, // Use the defined title
                            subtitle: chartSubtitleOptions, // Use the defined subtitle
                            legend: { display: false }, // Bar charts often don't need a legend for single dataset
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.85)',
                                titleFont: { size: 14, weight: '600', family: chartFontFamily },
                                bodyFont: { size: 12, family: chartFontFamily },
                                padding: 12, cornerRadius: 6
                            }
                        }
                    }
                };
            }

            // If totalVotes is 0 but there are options, we might want to show "No votes" instead of empty bars/pie
            // The chart will render with 0s, and the title/subtitle plugin will still work.
            // If you want to *replace* the chart with text, then call displayChartMessage here.
            if (totalVotes === 0 && optionsData.length > 0) {
                // Optionally, if you prefer the chart to NOT render and just show text, uncomment:
                // displayChartMessage("No votes cast for this poll yet.", pollApp.modalChartCtx);
                // pollApp.currentModalChartInstance = null; // No chart instance if we only show text
                // if(downloadButton) downloadButton.disabled = true; // Disable download if only text
                // return; 
                // However, current setup will render the chart with 0 values, and title shows total votes as 0.
            }


            pollApp.currentModalChartInstance = new Chart(pollApp.modalChartCtx, chartConfig);
            if(downloadButton) downloadButton.onclick = () => pollApp.downloadCurrentModalChart(`${pollQuestion.replace(/[^a-z0-9]/gi, '_').toLowerCase()}-results.png`);

        } catch (error) {
            console.error("Error creating chart instance:", error);
            displayChartMessage("Error rendering chart. See console.", pollApp.modalChartCtx);
            if(downloadButton) downloadButton.disabled = true;
        }
    };
    
    // Event delegation for "View Chart" buttons
    document.body.addEventListener('click', function(event) {
        const viewChartButton = event.target.closest('.view-chart-btn');
        if (viewChartButton) {
            event.preventDefault();
            const pollId = viewChartButton.dataset.pollId;
            const pollQuestion = viewChartButton.dataset.pollQuestion;
            let optionsJsonString = viewChartButton.dataset.optionsJson;
            let optionsData;

            console.log(`[Poll ID: ${pollId}] Raw optionsJsonString from data attribute:`, typeof optionsJsonString, `'${optionsJsonString}'`);

            if (typeof optionsJsonString !== 'string' || optionsJsonString.trim() === '') {
                console.error(`[Poll ID: ${pollId}] optionsJsonString is not a string or is empty.`);
                pollApp.showToast("Error: Chart data is missing or invalid for this poll.", "error");
                return;
            }

            try {
                optionsData = JSON.parse(optionsJsonString);
                console.log(`[Poll ID: ${pollId}] Successfully parsed optionsData:`, typeof optionsData, optionsData);

                if (!Array.isArray(optionsData)) {
                    console.error(`[Poll ID: ${pollId}] Parsed optionsData is NOT an array. Type: ${typeof optionsData}. Value:`, optionsData);
                    if (typeof optionsData === 'string') { // Check for double-encoded JSON
                        console.warn(`[Poll ID: ${pollId}] optionsData was a string after first parse. Attempting re-parse.`);
                        optionsData = JSON.parse(optionsData);
                        console.log(`[Poll ID: ${pollId}] Re-parsed optionsData:`, typeof optionsData, optionsData);
                        if (!Array.isArray(optionsData)) throw new Error("Re-parsed optionsData is still not an array.");
                    } else {
                        throw new Error("Parsed optionsData is not an array and not a string for re-parsing.");
                    }
                }

                if (optionsData.length > 0) {
                    const firstOption = optionsData[0];
                    if (typeof firstOption.text === 'undefined' || typeof firstOption.votes === 'undefined') {
                        console.error(`[Poll ID: ${pollId}] Parsed optionsData array items have INCORRECT STRUCTURE. First item:`, firstOption);
                        throw new Error("Chart data items have incorrect structure (missing 'text' or 'votes').");
                    }
                }
                 console.log(`[Poll ID: ${pollId}] optionsData validated for chart generation.`);

            } catch (e) {
                console.error(`[Poll ID: ${pollId}] CRITICAL: Failed to parse or validate options JSON. Error:`, e);
                console.error(`[Poll ID: ${pollId}] Original optionsJsonString that failed: '${optionsJsonString}'`);
                pollApp.showToast("Error: Could not load chart data. Check console for details.", "error");
                return;
            }
            
            if (!pollApp.chartModalEl) { console.error("Chart modal element (chartModalEl) not found for openChartModal."); return; }
            
            pollApp.generateModalPollChart(pollQuestion, optionsData); 
            
            pollApp.chartModalEl.classList.remove('modal-hidden');
            pollApp.chartModalEl.classList.add('modal-visible');
            document.body.style.overflow = 'hidden';
        }
    });

    pollApp.closeChartModal = function() {
        if (!pollApp.chartModalEl) return;
        pollApp.chartModalEl.classList.add('modal-hidden');
        pollApp.chartModalEl.classList.remove('modal-visible');
        document.body.style.overflow = 'auto';
        if (pollApp.currentModalChartInstance) {
            pollApp.currentModalChartInstance.destroy();
            pollApp.currentModalChartInstance = null;
        }
    };

    pollApp.downloadCurrentModalChart = function(filename) {
        if (pollApp.currentModalChartInstance && pollApp.currentModalChartInstance.canvas) {
            const canvas = pollApp.currentModalChartInstance.canvas; const tempCanvas = document.createElement('canvas');
            const scaleFactor = 2.5; tempCanvas.width = canvas.width * scaleFactor; tempCanvas.height = canvas.height * scaleFactor;
            const tempCtx = tempCanvas.getContext('2d'); tempCtx.fillStyle = '#FFFFFF'; tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
            tempCtx.scale(scaleFactor, scaleFactor); tempCtx.drawImage(canvas, 0, 0);
            const imageLink = document.createElement('a'); imageLink.href = tempCanvas.toDataURL('image/png', 1.0);
            imageLink.download = filename; document.body.appendChild(imageLink); imageLink.click(); document.body.removeChild(imageLink);
        } else { pollApp.showToast('Chart is not available for download or has no data.', 'warning'); }
    };

    if(pollApp.chartModalEl) {
      document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && pollApp.chartModalEl.classList.contains('modal-visible')) { pollApp.closeChartModal(); } });
      pollApp.chartModalEl.addEventListener('click', (event) => { if (event.target === pollApp.chartModalEl) { pollApp.closeChartModal(); } });
    }

    // --- DELETE POLL & TOAST LOGIC ---
    pollApp.deletePopupOverlayEl = document.getElementById('delete-popup-overlay');
    pollApp.deleteConfirmationPopupEl = document.getElementById('delete-confirmation-popup');
    pollApp.deletePollFormEl = document.getElementById('delete-poll-form');
    pollApp.deletePollIdInputEl = document.getElementById('delete-poll-id');

    pollApp.showDeleteConfirmation = function(pollId) {
        if (!pollApp.deletePollFormEl || !pollApp.deletePollIdInputEl || !pollApp.deletePopupOverlayEl || !pollApp.deleteConfirmationPopupEl) { console.error("Delete confirmation elements not found."); pollApp.showToast("Could not initiate delete action.", "error"); return; }
        try { pollApp.deletePollFormEl.action = "{% url 'mimansha_main:poll_delete' 123 %}".replace('123', pollId.toString()); }
        catch(e) { console.error("Error setting delete form action. URL 'mimansha_main:poll_delete' might be undefined or misconfigured.", e); pollApp.showToast('Error preparing delete action. Check console.', 'error'); return; }
        pollApp.deletePollIdInputEl.value = pollId;
        pollApp.deletePopupOverlayEl.style.display = 'block'; pollApp.deleteConfirmationPopupEl.style.display = 'flex';
        void pollApp.deletePopupOverlayEl.offsetWidth; void pollApp.deleteConfirmationPopupEl.offsetWidth; // Trigger reflow
        pollApp.deletePopupOverlayEl.style.opacity = '1'; const dialog = pollApp.deleteConfirmationPopupEl.querySelector('div'); dialog.style.transform = 'scale(1)'; dialog.style.opacity = '1';
    };

    pollApp.hideDeleteConfirmation = function() {
        if (!pollApp.deletePopupOverlayEl || !pollApp.deleteConfirmationPopupEl) return;
        pollApp.deletePopupOverlayEl.style.opacity = '0'; const dialog = pollApp.deleteConfirmationPopupEl.querySelector('div');
        dialog.style.transform = 'scale(0.9)'; dialog.style.opacity = '0';
        setTimeout(() => { pollApp.deletePopupOverlayEl.style.display = 'none'; pollApp.deleteConfirmationPopupEl.style.display = 'none'; }, 300);
    };

    pollApp.submitActualDeleteForm = function() {
        if (!pollApp.deletePollFormEl) return; pollApp.showToast('Deleting poll...', 'info');
        const xhr = new XMLHttpRequest(); xhr.open("POST", pollApp.deletePollFormEl.action, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); const csrfTokenInput = pollApp.deletePollFormEl.querySelector('[name=csrfmiddlewaretoken]');
        if (csrfTokenInput) { xhr.setRequestHeader('X-CSRFToken', csrfTokenInput.value); } else { console.warn("CSRF token not found in delete form.");}
        const formData = new FormData(pollApp.deletePollFormEl);
        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                const pollId = pollApp.deletePollIdInputEl.value; const pollElement = document.getElementById('poll-card-' + pollId);
                if (pollElement) {
                    pollElement.style.transition = 'opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease-out, padding 0.3s ease, margin-bottom 0.3s ease';
                    pollElement.style.opacity = '0'; pollElement.style.transform = 'scale(0.90) translateY(-10px)';
                    pollElement.style.maxHeight = '0px'; pollElement.style.paddingTop = '0px'; pollElement.style.paddingBottom = '0px';
                    pollElement.style.marginBottom = '0px'; pollElement.style.overflow = 'hidden';
                    setTimeout(() => { pollElement.remove(); pollApp.updatePageStatsAfterDelete();
                        const remainingPolls = document.querySelectorAll('.poll-card-item').length;
                        if (remainingPolls === 0 && document.querySelector('.space-y-10')) {
                            document.querySelector('.space-y-10').innerHTML = `<div class="text-center py-16 bg-white rounded-xl shadow-lg"><i class="fas fa-check-circle fa-4x text-green-400 mb-6"></i><p class="text-xl font-semibold text-gray-600">All polls cleared!</p><p class="text-gray-500 mt-2">You can now <a href="/create-poll" class="text-blue-600 hover:underline font-medium">create a new one</a>.</p></div>`;
                        }
                    }, 450);
                }
                pollApp.hideDeleteConfirmation(); pollApp.showToast('Poll deleted successfully!', 'success');
            } else {
                console.error('Delete Error:', xhr.status, xhr.responseText); let errorMsg = 'Error deleting poll.';
                try { const errorResponse = JSON.parse(xhr.responseText); if (errorResponse && errorResponse.error) errorMsg = errorResponse.error; } catch (e) { /* Use default errorMsg */ }
                pollApp.showToast(errorMsg, 'error'); pollApp.hideDeleteConfirmation();
            }
        };
        xhr.onerror = function () { console.error('Network error during delete.'); pollApp.hideDeleteConfirmation(); pollApp.showToast('Network error. Please try again.', 'error'); };
        xhr.send(formData);
    };

    if (pollApp.deletePopupOverlayEl) { pollApp.deletePopupOverlayEl.onclick = pollApp.hideDeleteConfirmation; }
    document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && pollApp.deleteConfirmationPopupEl && pollApp.deleteConfirmationPopupEl.style.display !== 'none') { pollApp.hideDeleteConfirmation(); }});

    pollApp.showToast = function(message, type = 'info', duration = 4000) {
        const toastContainer = document.getElementById('toast-container'); if (!toastContainer) { console.warn("Toast container not found"); return; }
        const toast = document.createElement('div'); let iconHtml, baseColors;
        switch(type) {
            case 'success': iconHtml = '<i class="fas fa-check-circle mr-3"></i>'; baseColors = 'bg-green-500 text-white'; break;
            case 'error':   iconHtml = '<i class="fas fa-times-circle mr-3"></i>'; baseColors = 'bg-red-500 text-white'; break;
            case 'warning': iconHtml = '<i class="fas fa-exclamation-triangle mr-3"></i>'; baseColors = 'bg-yellow-400 text-gray-800'; break;
            default:        iconHtml = '<i class="fas fa-info-circle mr-3"></i>'; baseColors = 'bg-blue-500 text-white';
        }
        toast.className = `toast ${baseColors} py-3 px-5 rounded-lg shadow-xl flex items-center text-sm font-medium min-w-[280px] max-w-md opacity-0 translate-x-full`;
        toast.innerHTML = `${iconHtml}<span>${message}</span><button type="button" class="ml-auto pl-3 opacity-70 hover:opacity-100 text-lg leading-none">×</button>`;
        toastContainer.appendChild(toast); setTimeout(() => { toast.classList.remove('opacity-0', 'translate-x-full'); toast.classList.add('opacity-100', 'translate-x-0'); }, 10);
        const closeButton = toast.querySelector('button'); const timerId = setTimeout(() => removeToast(toast), duration);
        closeButton.onclick = () => { clearTimeout(timerId); removeToast(toast); };
    };
    
    function removeToast(toast) { // Local helper for pollApp.showToast
        if (!toast || !toast.parentNode) return; toast.classList.add('hiding');
        toast.addEventListener('transitionend', () => { if (toast.parentNode) toast.parentNode.removeChild(toast); }, { once: true });
    }

    pollApp.updatePageStatsAfterDelete = function() {
        const totalPollsCountEl = document.querySelector('.border-blue-500 .text-3xl'); // Example selector
        if (totalPollsCountEl) { let currentCount = parseInt(totalPollsCountEl.textContent); if (!isNaN(currentCount) && currentCount > 0) { totalPollsCountEl.textContent = currentCount - 1; } else if (!isNaN(currentCount) && currentCount === 0) { totalPollsCountEl.textContent = 0; }}
        // Add more sophisticated stat updates if needed, possibly fetching new data
    };
});
</script>
{% endblock content %}