script.js

// DOM Elements
const birthDateInput = document.getElementById('birthDate');
const lifeExpectancyInput = document.getElementById('lifeExpectancy');
const dotGrid = document.getElementById('dotGrid');
const passedCountEl = document.getElementById('passedCount');
const remainingCountEl = document.getElementById('remainingCount');
const percentageEl = document.getElementById('percentage');
const tabs = document.querySelectorAll('.tab');
const tooltip = document.getElementById('tooltip');
const liveClock = document.getElementById('liveClock');
const quoteEl = document.getElementById('quote');
const exportBtn = document.getElementById('exportBtn');

// State
let currentView = 'hours';
let isPaused = false;
let updateInterval;

// Quotes that hit different
const quotes = [
    "You have lived {passed} {unit}. You will never get them back.",
    "Every dot that turns red is gone forever.",
    "{remaining} {unit} left. Maybe. If you're lucky.",
    "The dot turning red right now? That was your life.",
    "You're watching yourself run out of time.",
    "Each green dot is a promise. Each red dot is a receipt.",
    "Time doesn't care about your plans.",
    "{percentage}% of your {unit} are gone. What did you do with them?",
    "The next dot will turn red. Then the next. Then you.",
    "This isn't an app. It's a mirror."
];

// localStorage keys
const STORAGE_KEYS = {
    birthDate: 'dots_birthDate',
    lifeExpectancy: 'dots_lifeExpectancy'
};

// Initialize
function init() {
    loadSettings();
    setupEventListeners();
    render();
    startLiveUpdates();
    updateClock();
}

// Load settings from localStorage
function loadSettings() {
    const savedBirthDate = localStorage.getItem(STORAGE_KEYS.birthDate);
    const savedLifeExpectancy = localStorage.getItem(STORAGE_KEYS.lifeExpectancy);

    if (savedBirthDate) {
        birthDateInput.value = savedBirthDate;
    }

    if (savedLifeExpectancy) {
        lifeExpectancyInput.value = savedLifeExpectancy;
    }
}

// Save settings to localStorage
function saveSettings() {
    localStorage.setItem(STORAGE_KEYS.birthDate, birthDateInput.value);
    localStorage.setItem(STORAGE_KEYS.lifeExpectancy, lifeExpectancyInput.value);
}

// Setup event listeners
function setupEventListeners() {
    birthDateInput.addEventListener('change', () => {
        saveSettings();
        render();
    });

    lifeExpectancyInput.addEventListener('change', () => {
        saveSettings();
        render();
    });

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            switchView(tab.dataset.view);
        });
    });

    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        if (e.target.tagName === 'INPUT') return;

        switch(e.key) {
            case '1': switchView('hours'); break;
            case '2': switchView('days'); break;
            case '3': switchView('weeks'); break;
            case '4': switchView('months'); break;
            case '5': switchView('years'); break;
            case ' ':
                e.preventDefault();
                togglePause();
                break;
        }
    });

    // Tooltip events
    dotGrid.addEventListener('mousemove', handleDotHover);
    dotGrid.addEventListener('mouseleave', () => {
        tooltip.classList.remove('visible');
    });

    // Export button
    exportBtn.addEventListener('click', exportImage);
}

function switchView(view) {
    tabs.forEach(t => t.classList.remove('active'));
    document.querySelector(`[data-view="${view}"]`).classList.add('active');
    currentView = view;
    render();
}

function togglePause() {
    isPaused = !isPaused;
    document.body.classList.toggle('paused', isPaused);
    if (isPaused) {
        clearInterval(updateInterval);
    } else {
        startLiveUpdates();
    }
}

function startLiveUpdates() {
    clearInterval(updateInterval);
    updateInterval = setInterval(() => {
        if (!isPaused) {
            render();
            updateClock();
        }
    }, 1000);
}

function updateClock() {
    const now = new Date();
    liveClock.textContent = now.toLocaleTimeString('en-US', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

// Calculation functions
function getHoursInDay() {
    const now = new Date();
    const hoursPassed = now.getHours();
    const minutePercent = (now.getMinutes() / 60) * 100;
    return {
        passed: hoursPassed,
        total: 24,
        current: hoursPassed,
        fillPercent: minutePercent,
        getLabel: (i) => {
            const hour = i.toString().padStart(2, '0') + ':00';
            if (i < hoursPassed) return `${hour} - Gone`;
            if (i === hoursPassed) return `${hour} - NOW (${now.getMinutes()} min gone)`;
            return `${hour} - Ahead`;
        }
    };
}

function getDaysInYear() {
    const now = new Date();
    const year = now.getFullYear();
    const startOfYear = new Date(year, 0, 1);
    const endOfYear = new Date(year + 1, 0, 1);

    const totalDays = Math.floor((endOfYear - startOfYear) / (1000 * 60 * 60 * 24));
    const daysPassed = Math.floor((now - startOfYear) / (1000 * 60 * 60 * 24));
    const hourPercent = ((now.getHours() * 60 + now.getMinutes()) / 1440) * 100;

    return {
        passed: daysPassed,
        total: totalDays,
        current: daysPassed,
        fillPercent: hourPercent,
        getLabel: (i) => {
            const date = new Date(year, 0, i + 1);
            const formatted = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            if (i < daysPassed) return `${formatted} - Gone`;
            if (i === daysPassed) return `${formatted} - TODAY (${Math.round(hourPercent)}% gone)`;
            return `${formatted} - Ahead`;
        }
    };
}

function getWeeksInYear() {
    const now = new Date();
    const year = now.getFullYear();
    const startOfYear = new Date(year, 0, 1);

    const daysPassed = Math.floor((now - startOfYear) / (1000 * 60 * 60 * 24));
    const weeksPassed = Math.floor(daysPassed / 7);
    const dayInWeek = daysPassed % 7;
    const weekPercent = (dayInWeek / 7) * 100;

    return {
        passed: weeksPassed,
        total: 52,
        current: weeksPassed,
        fillPercent: weekPercent,
        getLabel: (i) => {
            if (i < weeksPassed) return `Week ${i + 1} - Gone`;
            if (i === weeksPassed) return `Week ${i + 1} - NOW (Day ${dayInWeek + 1} of 7)`;
            return `Week ${i + 1} - Ahead`;
        }
    };
}

function getMonthsInYear() {
    const now = new Date();
    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const monthsPassed = now.getMonth();
    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
    const monthPercent = (now.getDate() / daysInMonth) * 100;

    return {
        passed: monthsPassed,
        total: 12,
        current: monthsPassed,
        fillPercent: monthPercent,
        getLabel: (i) => {
            if (i < monthsPassed) return `${monthNames[i]} - Gone`;
            if (i === monthsPassed) return `${monthNames[i]} - NOW (Day ${now.getDate()} of ${daysInMonth})`;
            return `${monthNames[i]} - Ahead`;
        }
    };
}

function getYearsInLife() {
    const birthDate = birthDateInput.value;
    const lifeExpectancy = parseInt(lifeExpectancyInput.value) || 80;

    if (!birthDate) {
        return {
            passed: 0,
            total: lifeExpectancy,
            current: 0,
            fillPercent: 0,
            getLabel: (i) => `Year ${i + 1} - Set your birth date`
        };
    }

    const birth = new Date(birthDate);
    const now = new Date();
    const birthYear = birth.getFullYear();

    let yearsPassed = now.getFullYear() - birthYear;
    const birthThisYear = new Date(now.getFullYear(), birth.getMonth(), birth.getDate());
    if (now < birthThisYear) {
        yearsPassed--;
    }
    yearsPassed = Math.max(0, yearsPassed);

    // Calculate how far into current year of life
    const lastBirthday = new Date(now.getFullYear(), birth.getMonth(), birth.getDate());
    if (now < lastBirthday) {
        lastBirthday.setFullYear(lastBirthday.getFullYear() - 1);
    }
    const nextBirthday = new Date(lastBirthday);
    nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
    const yearLength = nextBirthday - lastBirthday;
    const yearProgress = now - lastBirthday;
    const yearPercent = (yearProgress / yearLength) * 100;

    return {
        passed: yearsPassed,
        total: lifeExpectancy,
        current: yearsPassed,
        fillPercent: yearPercent,
        getLabel: (i) => {
            const year = birthYear + i;
            const age = i;
            if (i < yearsPassed) return `${year} (Age ${age}) - Lived`;
            if (i === yearsPassed) return `${year} (Age ${age}) - NOW (${Math.round(yearPercent)}% through)`;
            if (i === lifeExpectancy - 1) return `${year} (Age ${age}) - THE END`;
            return `${year} (Age ${age}) - Ahead`;
        }
    };
}

// Get data based on current view
function getViewData() {
    switch (currentView) {
        case 'hours': return { ...getHoursInDay(), unit: 'hours' };
        case 'days': return { ...getDaysInYear(), unit: 'days' };
        case 'weeks': return { ...getWeeksInYear(), unit: 'weeks' };
        case 'months': return { ...getMonthsInYear(), unit: 'months' };
        case 'years': return { ...getYearsInLife(), unit: 'years' };
        default: return { ...getHoursInDay(), unit: 'hours' };
    }
}

// Handle dot hover for tooltip
function handleDotHover(e) {
    const dot = e.target.closest('.dot');
    if (!dot) {
        tooltip.classList.remove('visible');
        return;
    }

    const index = parseInt(dot.dataset.index);
    const data = getViewData();
    const label = data.getLabel(index);

    tooltip.textContent = label;
    tooltip.classList.add('visible');

    const rect = dot.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - 40) + 'px';
}

// Render dots
function renderDots(passed, total, current, fillPercent) {
    dotGrid.innerHTML = '';

    if (currentView === 'years') {
        dotGrid.classList.add('years-view');
    } else {
        dotGrid.classList.remove('years-view');
    }

    for (let i = 0; i < total; i++) {
        const dot = document.createElement('div');
        dot.className = 'dot';
        dot.dataset.index = i;

        if (i < passed) {
            dot.classList.add('passed');
        } else {
            dot.classList.add('remaining');
        }

        if (i === current) {
            dot.classList.add('current');
            // Set the fill percentage for the current dot
            dot.style.setProperty('--fill-percent', `${fillPercent}%`);
        }

        // Mark the final dot
        if (i === total - 1) {
            dot.classList.add('final');
        }

        dotGrid.appendChild(dot);
    }
}

// Update stats display
function updateStats(passed, total, unit) {
    const remaining = total - passed;
    const percentage = total > 0 ? Math.round((passed / total) * 100) : 0;

    passedCountEl.textContent = passed;
    remainingCountEl.textContent = remaining;
    percentageEl.textContent = percentage + '%';

    // Update quote
    const quote = quotes[Math.floor(Date.now() / 10000) % quotes.length]
        .replace('{passed}', passed)
        .replace('{remaining}', remaining)
        .replace('{percentage}', percentage)
        .replace(/{unit}/g, unit);
    quoteEl.textContent = quote;
}

// Main render function
function render() {
    const { passed, total, current, unit, fillPercent } = getViewData();
    renderDots(passed, total, current, fillPercent);
    updateStats(passed, total, unit);
}

// Export 4K image
function exportImage() {
    const data = getViewData();
    const { passed, total, unit, fillPercent } = data;

    // 4K resolution
    const width = 3840;
    const height = 2160;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Background
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, width, height);

    // Calculate dot grid layout
    const padding = 200;
    const availableWidth = width - (padding * 2);
    const availableHeight = height - 600; // Leave space for text

    // Calculate optimal dot size and grid
    let cols, rows, dotSize, gap;

    if (total <= 24) {
        cols = Math.min(total, 12);
        rows = Math.ceil(total / cols);
        dotSize = 120;
        gap = 40;
    } else if (total <= 52) {
        cols = 13;
        rows = Math.ceil(total / cols);
        dotSize = 80;
        gap = 30;
    } else if (total <= 100) {
        cols = 10;
        rows = Math.ceil(total / cols);
        dotSize = 70;
        gap = 25;
    } else {
        cols = Math.ceil(Math.sqrt(total * 1.5));
        rows = Math.ceil(total / cols);
        dotSize = Math.min(50, Math.floor((availableWidth - (cols - 1) * 20) / cols));
        gap = 20;
    }

    const gridWidth = cols * dotSize + (cols - 1) * gap;
    const gridHeight = rows * dotSize + (rows - 1) * gap;
    const startX = (width - gridWidth) / 2;
    const startY = 500;

    // Draw title
    ctx.fillStyle = '#2563eb';
    ctx.font = 'bold 140px Courier New';
    ctx.textAlign = 'center';
    ctx.fillText('DOTS', width / 2, 200);

    // Draw subtitle
    ctx.fillStyle = '#64748b';
    ctx.font = '40px Courier New';
    ctx.fillText('MY LIFE IN ' + unit.toUpperCase(), width / 2, 280);

    // Draw stats
    ctx.font = 'bold 60px Courier New';
    ctx.fillStyle = '#e74c3c';
    ctx.fillText(passed + ' GONE', width / 2 - 400, 400);
    ctx.fillStyle = '#2ecc71';
    ctx.fillText((total - passed) + ' LEFT', width / 2 + 400, 400);
    ctx.fillStyle = '#2563eb';
    const percentage = Math.round((passed / total) * 100);
    ctx.fillText(percentage + '% LIVED', width / 2, 400);

    // Draw dots
    for (let i = 0; i < total; i++) {
        const col = i % cols;
        const row = Math.floor(i / cols);
        const x = startX + col * (dotSize + gap);
        const y = startY + row * (dotSize + gap);

        // Dot color
        if (i < passed) {
            ctx.fillStyle = '#e74c3c';
        } else if (i === passed) {
            // Current dot - draw green background first
            ctx.fillStyle = '#2ecc71';
            ctx.fillRect(x, y, dotSize, dotSize);

            // Draw red fill from bottom
            const fillHeight = (fillPercent / 100) * dotSize;
            ctx.fillStyle = '#e74c3c';
            ctx.fillRect(x, y + dotSize - fillHeight, dotSize, fillHeight);

            // Draw border for current
            ctx.strokeStyle = '#2563eb';
            ctx.lineWidth = 6;
            ctx.strokeRect(x - 6, y - 6, dotSize + 12, dotSize + 12);
            continue;
        } else if (i === total - 1) {
            ctx.fillStyle = '#1d4ed8';
        } else {
            ctx.fillStyle = '#2ecc71';
        }

        ctx.fillRect(x, y, dotSize, dotSize);
    }

    // Draw footer
    ctx.fillStyle = '#94a3b8';
    ctx.font = '36px Courier New';
    ctx.fillText(new Date().toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    }), width / 2, height - 120);

    ctx.font = '28px Courier New';
    ctx.fillText('Generated with DOTS - Make every moment count', width / 2, height - 60);

    // Download
    const link = document.createElement('a');
    link.download = `dots-${unit}-${new Date().toISOString().split('T')[0]}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
}

// Start the app
init();