{% extends "base.html" %}
{% block title %}Create Poll - SlotFinder{% endblock %}
{% block content %}
<div class="dashboard">
    <h1>Create New Poll</h1>
    <div class="create-poll">
        <form id="create-poll-form">
            <input type="text" id="poll-title" placeholder="Poll Title" required>
            <textarea id="poll-description" placeholder="Description (optional)"></textarea>

            <div class="date-picker-section">
                <label>Select Available Dates</label>
                <div class="calendar-nav">
                    <button type="button" id="prev-month">&lt;</button>
                    <span id="month-year"></span>
                    <button type="button" id="next-month">&gt;</button>
                </div>
                <div class="calendar" id="calendar"></div>
                <p class="hint">Click to toggle, Shift+click for range</p>
            </div>

            <label class="checkbox-option">
                <input type="checkbox" id="day-wise">
                <span>Day-wise poll (no time slots)</span>
            </label>
            <label class="checkbox-option">
                <input type="checkbox" id="allow-anonymous">
                <span>Allow non-logged in users to view and join</span>
            </label>
            <button type="submit" class="btn btn-primary">Create Poll</button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let selectedDates = new Set();
let previewDates = new Set();
let previewWillRemove = false;
let currentMonth, currentYear;
let lastClickedDate = null;

const now = new Date();
currentMonth = now.getMonth();
currentYear = now.getFullYear();

document.getElementById('prev-month').onclick = () => { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } renderCalendar(); };
document.getElementById('next-month').onclick = () => { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } renderCalendar(); };

document.addEventListener('keydown', (e) => {
    if (e.key === 'Shift') {
        const hoveredDay = document.querySelector('.calendar .day:hover:not(.other-month):not(.day-header)');
        if (hoveredDay && lastClickedDate) showDatePreview(hoveredDay.dataset.date);
    }
});
document.addEventListener('keyup', (e) => {
    if (e.key === 'Shift') { previewDates.clear(); renderCalendar(); }
});

function renderCalendar() {
    const cal = document.getElementById('calendar');
    const firstDay = new Date(currentYear, currentMonth, 1);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const startDay = firstDay.getDay();
    const today = new Date();
    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

    document.getElementById('month-year').textContent = firstDay.toLocaleString('default', { month: 'long', year: 'numeric' });

    let html = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(d => `<div class="day-header">${d}</div>`).join('');

    const prevLastDay = new Date(currentYear, currentMonth, 0).getDate();
    for (let i = startDay - 1; i >= 0; i--) {
        html += `<div class="day other-month">${prevLastDay - i}</div>`;
    }

    for (let d = 1; d <= lastDay.getDate(); d++) {
        const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
        const selected = selectedDates.has(dateStr) ? 'selected' : '';
        const preview = previewDates.has(dateStr) ? (previewWillRemove ? 'preview-remove' : 'preview') : '';
        const isToday = dateStr === todayStr ? 'today' : '';
        html += `<div class="day ${selected} ${preview} ${isToday}" data-date="${dateStr}">${d}</div>`;
    }

    const remaining = 42 - (startDay + lastDay.getDate());
    for (let i = 1; i <= remaining && remaining < 7; i++) {
        html += `<div class="day other-month">${i}</div>`;
    }

    cal.innerHTML = html;

    cal.querySelectorAll('.day:not(.other-month):not(.day-header)').forEach(day => {
        day.onclick = (e) => handleDateClick(day.dataset.date, e.shiftKey);
        day.onmouseenter = (e) => { if (e.shiftKey && lastClickedDate) showDatePreview(day.dataset.date); };
    });
    cal.onmouseleave = () => { previewDates.clear(); renderCalendar(); };
}

function handleDateClick(date, shiftKey) {
    if (shiftKey && lastClickedDate) {
        const range = getDateRange(lastClickedDate, date);
        const shouldSelect = !selectedDates.has(date);
        range.forEach(d => shouldSelect ? selectedDates.add(d) : selectedDates.delete(d));
    } else {
        if (selectedDates.has(date)) selectedDates.delete(date);
        else selectedDates.add(date);
    }
    lastClickedDate = date;
    previewDates.clear();
    renderCalendar();
}

function showDatePreview(endDate) {
    previewDates.clear();
    previewWillRemove = selectedDates.has(endDate);
    if (lastClickedDate) {
        getDateRange(lastClickedDate, endDate).forEach(d => previewDates.add(d));
    }
    renderCalendar();
}

function getDateRange(start, end) {
    const dates = [];
    let d1 = new Date(start), d2 = new Date(end);
    if (d1 > d2) [d1, d2] = [d2, d1];
    while (d1 <= d2) {
        dates.push(d1.toISOString().split('T')[0]);
        d1.setDate(d1.getDate() + 1);
    }
    return dates;
}

renderCalendar();

document.getElementById('create-poll-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    if (selectedDates.size === 0) {
        alert('Please select at least one date');
        return;
    }
    const title = document.getElementById('poll-title').value;
    const description = document.getElementById('poll-description').value;
    const allowAnonymous = document.getElementById('allow-anonymous').checked;
    const isDayWise = document.getElementById('day-wise').checked;
    const res = await fetch('/poll/new', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            title,
            description,
            allow_anonymous: allowAnonymous,
            is_day_wise: isDayWise,
            allowed_dates: Array.from(selectedDates).sort()
        })
    });
    const data = await res.json();
    window.location.href = '/poll/' + data.id;
});
</script>
{% endblock %}