const ANILIST_API = 'https://graphql.anilist.co';
const CACHE_NAME = 'waifuboard-schedule-v5';

const CACHE_DURATION = 6 * 60 * 60 * 1000;

const state = {
    currentDate: new Date(),
    viewType: 'MONTH',
    mode: 'SUB',
    filter: 'ALL',
    loading: false,
    abortController: null,
    userListIds: new Set(),
    scheduleData: [],
    selectedWeekDayIndex: 0
};

document.addEventListener('DOMContentLoaded', async () => {
    await fetchUserList();
    renderHeader();
    fetchSchedule();

    if (state.userListIds.size > 0) {
        const filterGroup = document.getElementById('filter-group');
        if (filterGroup) filterGroup.style.display = 'flex';
    }
});

async function fetchUserList() {
    const token = localStorage.getItem('token');
    if (!token) return;

    try {
        const res = await fetch('http://localhost:54322/api/list', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Accept': 'application/json'
            }
        });

        if (res.ok) {
            const json = await res.json();
            if (json.results && Array.isArray(json.results)) {
                state.userListIds.clear();
                json.results.forEach(item => {

                    if (item.source === 'anilist') {
                        state.userListIds.add(item.entry_id);
                    }
                });
                console.log(`[UserList] Loaded ${state.userListIds.size} entries.`);
            }
        }
    } catch (e) {
        console.warn("[UserList] Could not fetch user list:", e);
    }
}

async function fetchSchedule(forceRefresh = false) {
    const key = getCacheKey();

    if (!forceRefresh) {
        const cachedData = await getCache(key);
        if (cachedData) {
            console.log(`[Schedule] Using cached data for key: ${key}`);
            state.scheduleData = cachedData;
            renderContent();
            updateAmbient(cachedData);
            return;

        }
    }

    if (state.abortController) state.abortController.abort();
    state.abortController = new AbortController();
    const signal = state.abortController.signal;

    setLoading(true);

    let startObj, endObj;

    if (state.viewType === 'MONTH') {
        const year = state.currentDate.getFullYear();
        const month = state.currentDate.getMonth();
        startObj = new Date(year, month, 1, 0, 0, 0, 0);
        endObj = new Date(year, month + 1, 0, 23, 59, 59, 999);
    } else {
        const start = getWeekStart(state.currentDate);

        startObj = new Date(start);

        endObj = new Date(startObj);
        endObj.setDate(endObj.getDate() + 7);
        endObj.setHours(23, 59, 59, 999);
    }

    const startTs = Math.floor(startObj.getTime() / 1000);
    const endTs = Math.floor(endObj.getTime() / 1000);

    const query = `
        query ($start: Int, $end: Int, $page: Int) {
            Page(page: $page, perPage: 50) {
                pageInfo { hasNextPage }
                airingSchedules(airingAt_greater: $start, airingAt_lesser: $end, sort: TIME) {
                    airingAt
                    episode
                    media {
                        id
                        title { userPreferred english }
                        coverImage { large extraLarge }
                        bannerImage
                        isAdult
                        countryOfOrigin
                        format
                        duration
                        popularity
                    }
                }
            }
        }
    `;

    let allData = [];
    let page = 1;
    let hasNext = true;

    try {
        while (hasNext && page <= 10) {
            if (signal.aborted) throw new DOMException("Aborted", "AbortError");

            const res = await fetch(ANILIST_API, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({ query, variables: { start: startTs, end: endTs, page } }),
                signal: signal
            });

            if (res.status === 429) {
                await delay(2000);
                continue;
            }

            const json = await res.json();
            if (json.errors) throw new Error("API Error");

            const data = json.data.Page;
            allData = [...allData, ...data.airingSchedules];
            hasNext = data.pageInfo.hasNextPage;
            page++;
            await delay(200);
        }

        if (!signal.aborted) {
            state.scheduleData = allData;
            await setCache(key, allData);

            renderContent();
            updateAmbient(allData);
        }

    } catch (e) {
        if (e.name !== 'AbortError') console.error("Fetch failed:", e);
    } finally {
        if (!signal.aborted) {
            setLoading(false);
            state.abortController = null;
        }
    }
}

function renderContent() {

    let items = state.scheduleData.filter(i =>
        !i.media.isAdult &&
        i.media.countryOfOrigin === 'JP'

    );

    if (state.mode === 'DUB') {
        items = items.filter(i => i.media.popularity > 20000);
    }

    if (state.filter === 'MY_LIST') {
        items = items.filter(i => state.userListIds.has(i.media.id));
    }

    const container = document.getElementById('schedule-content');
    if (!container) return;

    container.innerHTML = '';

    if (state.viewType === 'MONTH') {
        renderMonthView(container, items);
    } else {
        renderWeekView(container, items);
    }
}

function renderMonthView(container, items) {
    const grid = document.createElement('div');
    grid.className = 'calendar-grid';

    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    days.forEach(d => {
        const h = document.createElement('div');
        h.className = 'weekday-header';
        h.textContent = d;
        grid.appendChild(h);
    });

    const year = state.currentDate.getFullYear();
    const month = state.currentDate.getMonth();
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    let firstDayIndex = new Date(year, month, 1).getDay() - 1;
    if (firstDayIndex === -1) firstDayIndex = 6;

    for (let i = 0; i < firstDayIndex; i++) {
        const empty = document.createElement('div');
        empty.className = 'day-cell empty';
        grid.appendChild(empty);
    }

    for (let day = 1; day <= daysInMonth; day++) {
        const cell = document.createElement('div');
        cell.className = 'day-cell';

        const currentCellDate = new Date(year, month, day);
        const now = new Date();

        if (isSameDay(currentCellDate, now)) {
            cell.classList.add('today');
        }

        cell.innerHTML = `<span class="day-number">${day}</span>`;

        const dayEvents = items.filter(i => {
            const releaseDate = new Date(i.airingAt * 1000);
            return isSameDay(currentCellDate, releaseDate);
        });

        dayEvents.sort((a, b) => b.media.popularity - a.media.popularity);

        dayEvents.forEach(evt => {
            const title = evt.media.title.english || evt.media.title.userPreferred;
            const ep = evt.episode;
            const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
            const isMine = state.userListIds.has(evt.media.id);

            const el = document.createElement('a');
            el.className = `anime-item-month ${isMine ? 'is-mine' : ''}`;
            el.href = `/anime/${evt.media.id}`;
            el.innerHTML = `
                <span class="item-time">${time}</span>
                <span class="item-title">
                    ${title} <span class="ep-badge">EP ${ep}</span>
                </span>
            `;

            cell.appendChild(el);
        });

        grid.appendChild(cell);
    }

    container.appendChild(grid);
}

function renderWeekView(container, items) {
    const wrapper = document.createElement('div');
    wrapper.className = 'week-container';

    const nav = document.createElement('div');
    nav.className = 'week-nav';

    const startOfWeek = getWeekStart(state.currentDate);
    const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    for (let i = 0; i < 7; i++) {
        const d = new Date(startOfWeek);
        d.setDate(startOfWeek.getDate() + i);

        const btn = document.createElement('button');
        btn.className = `day-btn ${i === state.selectedWeekDayIndex ? 'active' : ''}`;

        btn.onclick = () => {
            state.selectedWeekDayIndex = i;
            renderWeekCards(d, items);

            document.querySelectorAll('.day-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        };

        btn.innerHTML = `
            <span class="name">${dayNames[i]}</span>
            <span class="date">${d.getDate()}</span>
        `;
        nav.appendChild(btn);
    }
    wrapper.appendChild(nav);

    const grid = document.createElement('div');
    grid.className = 'week-grid';
    grid.id = 'weekGrid';
    wrapper.appendChild(grid);

    container.appendChild(wrapper);

    const selectedDate = new Date(startOfWeek);
    selectedDate.setDate(selectedDate.getDate() + state.selectedWeekDayIndex);
    renderWeekCards(selectedDate, items);
}

function renderWeekCards(targetDate, allItems) {
    const grid = document.getElementById('weekGrid');
    if (!grid) return;
    grid.innerHTML = '';

    const dayItems = allItems.filter(i => {
        const releaseDate = new Date(i.airingAt * 1000);
        return isSameDay(targetDate, releaseDate);
    });

    dayItems.sort((a, b) => b.media.popularity - a.media.popularity);

    if (dayItems.length === 0) {
        grid.innerHTML = `
            <div style="grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem; opacity: 0.5;">
                <p style="margin-top: 1rem; font-size: 1.2rem; font-weight: 500;">No releases found for this day</p>
            </div>`;
        return;
    }

    dayItems.forEach(evt => {
        const m = evt.media;
        const title = m.title.english || m.title.userPreferred;
        const time = new Date(evt.airingAt * 1000).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

        const card = document.createElement('div');
        card.className = `card`;
        card.onclick = () => window.location.href = `/anime/${m.id}`;

        card.innerHTML = `
            <div class="card-img-wrap">
                <img src="${m.coverImage.large}" alt="${title}" loading="lazy">
                <div class="card-ep-badge">EP ${evt.episode} • ${time}</div>
            </div>
            <div class="card-content">
                <h3>${title}</h3>
                <p>${m.format || 'TV'}</p>
            </div>
        `;
        grid.appendChild(card);
    });
}

function isSameDay(d1, d2) {
    return d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate();
}

function getWeekStart(d) {
    const date = new Date(d);
    date.setHours(0, 0, 0, 0);

    const day = date.getDay();
    const diff = date.getDate() - day + (day === 0 ? -6 : 1);
    date.setDate(diff);
    return date;
}

function navigate(delta) {
    if (state.abortController) state.abortController.abort();

    if (state.viewType === 'MONTH') {
        state.currentDate.setMonth(state.currentDate.getMonth() + delta);
    } else {
        state.currentDate.setDate(state.currentDate.getDate() + (delta * 7));
    }

    renderHeader();
    fetchSchedule();
}

function setViewType(type) {
    if (state.viewType === type) return;
    state.viewType = type;

    document.getElementById('btnViewMonth').classList.toggle('active', type === 'MONTH');
    document.getElementById('btnViewWeek').classList.toggle('active', type === 'WEEK');

    state.selectedWeekDayIndex = new Date().getDay() - 1;
    if (state.selectedWeekDayIndex === -1) state.selectedWeekDayIndex = 6;

    renderHeader();

    if (state.scheduleData.length) {
        renderContent();

    } else {
        fetchSchedule();

    }

}

function setMode(mode) {
    if (state.mode === mode) return;
    state.mode = mode;
    document.getElementById('btnSub').classList.toggle('active', mode === 'SUB');
    document.getElementById('btnDub').classList.toggle('active', mode === 'DUB');
    renderContent();

}

function setFilter(filterType) {
    if (state.filter === filterType) return;
    state.filter = filterType;

    document.getElementById('btnAll').classList.toggle('active', filterType === 'ALL');
    document.getElementById('btnMyList').classList.toggle('active', filterType === 'MY_LIST');

    renderContent();
}

function renderHeader() {
    const options = { month: 'long', year: 'numeric' };
    let title = state.currentDate.toLocaleDateString('en-US', options);

    if (state.viewType === 'WEEK') {
        const start = getWeekStart(state.currentDate);
        const end = new Date(start);
        end.setDate(end.getDate() + 6);

        const startStr = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        const endStr = end.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        title = `${startStr} - ${endStr}`;
    }

    const titleEl = document.getElementById('monthTitle');
    if (titleEl) titleEl.textContent = title;
}

function setLoading(bool) {
    state.loading = bool;
    const loader = document.getElementById('loader');
    if (loader) {
        if (bool) loader.classList.add('active');
        else loader.classList.remove('active');
    }
}

function updateAmbient(data) {
    if (!data || !data.length) return;

    const top = data.reduce((prev, curr) => (prev.media.popularity > curr.media.popularity) ? prev : curr, data[0]);

    const img = top.media.bannerImage || top.media.coverImage.extraLarge;
    const bgEl = document.getElementById('ambientBg');
    if (bgEl && img) {
        bgEl.style.backgroundImage = `url('${img}')`;
    }
}

function delay(ms) { return new Promise(r => setTimeout(r, ms)); }

async function getCache(key) {
    try {
        const cache = await caches.open(CACHE_NAME);
        const response = await cache.match(`/schedule-cache/${key}`);
        if (!response) return null;

        const cached = await response.json();
        const age = Date.now() - cached.timestamp;

        if (age < CACHE_DURATION) {
            console.log(`[Cache Hit] ${key}`);
            return cached.data;
        }
        cache.delete(`/schedule-cache/${key}`);
        return null;
    } catch (e) {
        return null;
    }
}

function getCacheKey() {

    let d;

    if (state.viewType === 'MONTH') {
        d = new Date(state.currentDate.getFullYear(), state.currentDate.getMonth(), 1);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        return `M_${year}_${month}`;
    } else {
        d = getWeekStart(state.currentDate);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `W_${year}_${month}_${day}`;
    }
}

async function setCache(key, data) {
    try {
        const cache = await caches.open(CACHE_NAME);
        const payload = JSON.stringify({ timestamp: Date.now(), data: data });
        const response = new Response(payload, { headers: { 'Content-Type': 'application/json' } });
        await cache.put(`/schedule-cache/${key}`, response);
    } catch (e) {
        console.warn("Cache write failed", e);
    }
}

window.navigate = navigate;
window.setViewType = setViewType;
window.setMode = setMode;
window.setFilter = setFilter;