import { AFS } from './afs.modern.js';
import games from '../data/games.json' with {type: 'json'};

// Basic variable replacements
const numJoined = 0;
const numEntries = 0;

// SEE HERE FOR DATE FORMAT INFO:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format
const startDate = '2026-02-01T00:00:00';
const endDate   = '2026-02-28T23:59:59';

// Date formatting stuff. You probably only need to touch locale and time zone.
const locale    = 'en-US';
const timeZone  = 'America/Chicago';
const dateOptions = {
	month: 'long',
	day: 'numeric',
	year: 'numeric',
	hour: 'numeric',
	minute: '2-digit',
	timeZone: timeZone
};

// DON'T EDIT BELOW THIS LINE
// unless you know what you're doing.

const start = new Date(startDate);
const end = new Date(endDate);

const startDateElt = document.getElementById('startDate');
const endDateElt = document.getElementById('endDate');
const dateElt = document.getElementById('dates');

const joinedElt = document.getElementById('joinedCount');
const entriesElt = document.getElementById('entriesCount');

const daysElt = document.getElementById('days');
const hoursElt = document.getElementById('hours');
const minutesElt = document.getElementById('minutes');
const secondsElt = document.getElementById('seconds');

const startString = start.toLocaleString(locale, dateOptions);
const endString = end.toLocaleString(locale, dateOptions);

const list = document.getElementById('list');

const dayMult = 24*60*60;
const hourMult = 60*60;
const minuteMult = 60;

if (joinedElt) joinedElt.textContent = numJoined;
if (entriesElt) entriesElt.textContent = numEntries;

if (startDateElt) startDateElt.textContent = startString;
if (endDateElt) endDateElt.textContent = endString;

const countdownTick = () => {
	const now = Date.now();
	let diff;
	if (now < start.getTime()) {
		// Jam hasn't started yet
		diff = (start.getTime() - now) / 1000; // get total # of seconds
	} else if (now < end.getTime()) {
		// Jam has started but not ended
		diff = (end.getTime() - now) / 1000;
	} else {
		// Jam has ended
		dates.innerHTML = `The jam is now over. It ran from <b>${startString}</b> to <b>${endString}</b>. <a href="submissions.html">View ${numEntries} ${numEntries !== 1 ? 'entries' : 'entry'}`
	}

	if (diff) {
		const days = Math.floor(diff / dayMult);
		diff = diff - (days * dayMult);
		const hours = Math.floor(diff / hourMult);
		diff = diff - (hours * hourMult);
		const minutes = Math.floor(diff / minuteMult);
		diff = diff - (minutes * minuteMult);
		const seconds = Math.floor(diff);
		daysElt.textContent = days;
		hoursElt.textContent = hours;
		minutesElt.textContent = minutes;
		secondsElt.textContent = seconds;
	}
}

if (document.querySelector('.clock')) {
	countdownTick();
	setInterval(() => {
		countdownTick();
	}, 1000);
}

if (list) {
	list.innerHTML = games.map((item, i) => {
		return `<div class="item" id="item-${i}">
		<div class="thumb">
			<img src="${item.thumbnail}" alt="${item.title} thumbnail image" />
		</div>
		<h3><a href="${item.page}">${item.title}</a></h3>
		<div class="authors">${item.authors.map((auth) => { return `<a href="${auth.link}" target="_blank">${auth.name}</a>`; }).join(", ")}</div>
		<div class="blurb">${item.blurb}</div>
</div>`;
	}).join("");
}

const afs = new AFS({
    // Required Selectors
    containerSelector: 'main',
    itemSelector: '.item',
    filterButtonSelector: '.afs-btn-filter',
    searchInputSelector: '.afs-filter-search',
    counterSelector: '.afs-filter-counter',
    
    // CSS Classes
    activeClass: 'active',
    hiddenClass: 'hidden',
    transitionClass: 'afs-transition',
    
    // Filter & Search Configuration
    filterMode: 'OR',      // or 'AND'
    groupMode: 'AND',     // or 'OR'
    searchKeys: ['title', 'categories', 'tags'],
    debounceTime: 200,    // search input delay
    
    // Debug Options
    debug: false,
    logLevel: 'info',     // 'debug', 'info', 'warn', 'error'
    
    // Date Handling
    dateFormat: 'YYYY-MM-DD',
    
    // Counter Configuration
    counter: {
        template: 'Showing {visible} of {total}',
        showFiltered: true,
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
        formatter: (num) => num.toLocaleString()
    },
    
    // Slider Configuration
    slider: {
        containerClass: 'afs-range-slider',
        trackClass: 'afs-range-track',
        thumbClass: 'afs-range-thumb',
        valueClass: 'afs-range-value',
        selectedClass: 'afs-range-selected',
        ui: {
            showHistogram: false,
            bins: 10,
            track: {
                radius: '0',
                background: '#e5e7eb'
            },
            selected: {
                background: '#000'
            },
            thumb: {
                radius: '50%',
                size: '16px',
                background: '#000'
            },
            histogram: {
                background: '#e5e7eb',
                bar: {
                    background: '#000'
                }
            }
        }
    },
    
    // Pagination Configuration
    pagination: {
        enabled: false,
        itemsPerPage: 10,
        container: '.afs-pagination-container',
        pageButtonClass: 'afs-page-button',
        activePageClass: 'afs-page-active',
        containerClass: 'afs-pagination',
        scrollToTop: false,
        scrollOffset: 50,
        scrollBehavior: 'smooth'  // or 'auto'
    },

    // Animation Configuration
    animation: {
        type: 'fade',
        duration: 200,
        easing: 'ease-out',
        inClass: 'afs-animation-enter',
        outClass: 'afs-animation-leave'
    },

    // Lifecycle Options
    responsive: true,
    preserveState: false,
    stateExpiry: 86400000, // 24 hours
    observeDOM: false,

    // Style Configuration
    styles: {
        colors: {
            primary: '#000',
            background: '#e5e7eb',
            text: '#000',
            textHover: '#fff'
        }
    }
});