import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-markup';
import { initOneko } from './oneko';

(() => {
    const toggleButton = document.getElementById('theme-toggle') as HTMLInputElement;
    const html = document.documentElement;

    const sessionTheme = sessionStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    const initialTheme = sessionTheme || (systemPrefersDark ? 'dark' : 'light');

    if (initialTheme === 'dark') {
        html.setAttribute('data-theme', 'dark');
        toggleButton.checked = true;
    }

    toggleButton.addEventListener('change', () => {
        const theme = html.getAttribute('data-theme');

        if (theme === 'dark') {
            html.removeAttribute('data-theme');
            sessionStorage.setItem('theme', 'light');
            toggleButton.checked = false;
        } else {
            html.setAttribute('data-theme', 'dark');
            sessionStorage.setItem('theme', 'dark');
            toggleButton.checked = true;
        }
    });
})();

(() => {
    const colors = ['#ff69b4', '#b19cd9', '#8b6f47', '#ff85c0', '#c4b5fd', '#d4a574'];
    const shapes = ['❀', '✿', '✽', '✾', '✻', '❊', '❋', '✼'];

    document.addEventListener('mousemove', (e: MouseEvent) => {
        createParticle(e.clientX, e.clientY);
    });

    const createParticle = (x: number, y: number) => {
        const particle = document.createElement('div');
        particle.className = 'fairy-dust';

        const shape = shapes[Math.floor(Math.random() * shapes.length)];
        const size = Math.random() * 8 + 6;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const offsetX = (Math.random() - 0.5) * 20;
        const offsetY = (Math.random() - 0.5) * 20;
        const rotation = Math.random() * 360;

        particle.textContent = shape;
        particle.style.cssText = `
      position: fixed;
      left: ${x + offsetX}px;
      top: ${y + offsetY}px;
      font-size: ${size}px;
      color: ${color};
      opacity: 0.4;
      pointer-events: none;
      z-index: 9001; /* it's over 9000 */
      line-height: 1;
      transform: rotate(${rotation}deg);
      animation: fairy-float 0.8s ease-out forwards;
    `;

        document.body.appendChild(particle);
        setTimeout(() => particle.remove(), 800);
    };
})();

document.addEventListener('DOMContentLoaded', () => {
    Prism.highlightAll();
    initOneko();
});