import './bootstrap';
import 'bootstrap';
import './api-keys';
import '../css/api-keys.css';
import '../css/api-key-status.css';

const icons = { light: '☀', dark: '☾', system: '◐' };

function updateThemeControls(event) {
    const state = event?.detail ?? {
        preference: window.ThemeManager.getPreference(),
        resolved: window.ThemeManager.getResolvedTheme(),
    };

    document.querySelectorAll('[data-theme-value]').forEach((button) => {
        const active = button.dataset.themeValue === state.preference;
        button.classList.toggle('active', active);
        button.setAttribute('aria-pressed', String(active));
        button.setAttribute('aria-current', active ? 'true' : 'false');
        const check = button.querySelector('[data-theme-check]');
        if (check) check.hidden = !active;
    });
    document.querySelectorAll('[data-theme-current-label]').forEach((node) => {
        node.textContent = document.querySelector(`[data-theme-value="${state.preference}"]`)?.dataset.themeLabel ?? state.preference;
    });
    document.querySelectorAll('[data-theme-current-icon]').forEach((node) => {
        node.textContent = icons[state.preference];
    });
    document.querySelectorAll('[data-theme-preference]').forEach((node) => {
        node.textContent = document.querySelector(`[data-theme-value="${state.preference}"]`)?.dataset.themeLabel ?? state.preference;
    });
    document.querySelectorAll('[data-theme-resolved]').forEach((node) => {
        node.textContent = document.querySelector(`[data-theme-value="${state.resolved}"]`)?.dataset.themeLabel ?? state.resolved;
    });
}

document.addEventListener('click', (event) => {
    const button = event.target.closest('[data-theme-value]');
    if (button) {
        window.ThemeManager.setPreference(button.dataset.themeValue);
    }
});
document.querySelector('[data-settings-theme]')?.addEventListener('change', event => window.ThemeManager.setPreference(event.target.value));
if (document.querySelector('input[name="reduced_motion"]:checked')) document.documentElement.dataset.reducedMotion = 'true';

window.addEventListener('trafficpumper:theme-change', updateThemeControls);
updateThemeControls();

function renderRankingCharts() {
    document.querySelectorAll('[data-ranking-chart]').forEach((container) => {
        const series = JSON.parse(container.dataset.rankingChart || '[]');
        const colors = ['#6d5dfc', '#16a085', '#e45175', '#e6a23c', '#2d8cf0', '#8e44ad'];
        const width = 900, height = 320, pad = 38;
        const points = series.flatMap((item) => item.points);
        if (!points.length) return;
        const dates = points.map((point) => new Date(point.date).getTime());
        const minDate = Math.min(...dates), maxDate = Math.max(...dates);
        const x = (date) => pad + ((new Date(date).getTime() - minDate) / Math.max(1, maxDate - minDate)) * (width - pad * 2);
        const y = (rank) => pad + ((rank - 1) / 99) * (height - pad * 2);
        const grid = [1, 10, 20, 50, 100].map((rank) => `<line x1="${pad}" y1="${y(rank)}" x2="${width-pad}" y2="${y(rank)}"/><text x="4" y="${y(rank)+4}">${rank}</text>`).join('');
        const paths = series.map((item, index) => {
            const coordinates = item.points.map((point) => `${x(point.date)},${y(point.rank)}`).join(' ');
            const dots = item.points.map((point) => `<circle cx="${x(point.date)}" cy="${y(point.rank)}" r="4"><title>${item.keyword} · ${item.project} · #${point.rank} · ${new Date(point.date).toLocaleString()}</title></circle>`).join('');
            return `<g style="--series:${colors[index%colors.length]}"><polyline points="${coordinates}"/>${dots}</g>`;
        }).join('');
        const legend = series.map((item,index)=>`<span><i style="background:${colors[index%colors.length]}"></i>${item.keyword}</span>`).join('');
        container.innerHTML = `<svg viewBox="0 0 ${width} ${height}" aria-hidden="true"><g class="tp-chart-grid">${grid}</g>${paths}</svg><div class="tp-chart-legend">${legend}</div>`;
    });
}
renderRankingCharts();
window.addEventListener('trafficpumper:theme-change', renderRankingCharts);
function renderVisibilityCharts(){document.querySelectorAll('[data-visibility-chart]').forEach(container=>{const data=JSON.parse(container.dataset.visibilityChart||'{}');const all=[...(data.current||[]),...(data.previous||[])];if(!all.length)return;const w=900,h=300,p=35;const dates=all.map(x=>new Date(x.date).getTime()),min=Math.min(...dates),max=Math.max(...dates);const x=d=>p+(new Date(d).getTime()-min)/Math.max(1,max-min)*(w-p*2),y=v=>h-p-(v/100)*(h-p*2);const series=(points,color,dash='')=>`<polyline style="stroke:${color};stroke-dasharray:${dash}" points="${points.map(q=>`${x(q.date)},${y(q.score)}`).join(' ')}"/>`+points.map(q=>`<circle style="--series:${color}" cx="${x(q.date)}" cy="${y(q.score)}" r="4"><title>${q.date} · ${q.score}% · ${q.measured}</title></circle>`).join('');container.innerHTML=`<svg viewBox="0 0 ${w} ${h}"><g class="tp-chart-grid">${[0,25,50,75,100].map(v=>`<line x1="${p}" y1="${y(v)}" x2="${w-p}" y2="${y(v)}"/><text x="2" y="${y(v)+4}">${v}%</text>`).join('')}</g>${series(data.current||[],'#6d5dfc')}${series(data.previous||[],'#16a085','7 5')}</svg>`;});}renderVisibilityCharts();window.addEventListener('trafficpumper:theme-change',renderVisibilityCharts);