import L from 'leaflet';
import confetti from 'canvas-confetti';

// Target Grand Opening Date: Jumat, 23 Oktober 2026, 10:00 WIB
const TARGET_DATE = new Date('2026-10-23T10:00:00+07:00').getTime();

// Address: Ruko PTC Mall, Blok B No. 6 Palembang
const STORE_LAT = -2.95525;
const STORE_LNG = 104.75665;
const STORE_ADDRESS = 'Ruko PTC Mall, Blok B No. 6, Jl. R. Sukamto, 8 Ilir, Kec. Ilir Timur II, Kota Palembang, Sumatera Selatan 30114';
const STORE_PHONE = '0811-788-866';
const STORE_WA_LINK = 'https://wa.me/62811788866';

document.addEventListener('DOMContentLoaded', () => {
  if ((window as any).__MW_INITIALIZED__) return;
  (window as any).__MW_INITIALIZED__ = true;

  initCountdown();
  initMap();
  initCopyAddress();
  initMobileMenu();
  initConfettiTriggers();
});

// 1. Countdown Timer (Target: 23 Oktober 2026)
function initCountdown() {
  const daysEl = document.getElementById('count-days');
  const hoursEl = document.getElementById('count-hours');
  const minutesEl = document.getElementById('count-minutes');
  const secondsEl = document.getElementById('count-seconds');

  if (!daysEl || !hoursEl || !minutesEl || !secondsEl) return;

  function update() {
    const now = new Date().getTime();
    const diff = TARGET_DATE - now;

    if (diff <= 0) {
      daysEl!.textContent = '00';
      hoursEl!.textContent = '00';
      minutesEl!.textContent = '00';
      secondsEl!.textContent = '00';
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / 1000 / 60) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    daysEl!.textContent = String(days).padStart(2, '0');
    hoursEl!.textContent = String(hours).padStart(2, '0');
    minutesEl!.textContent = String(minutes).padStart(2, '0');
    secondsEl!.textContent = String(seconds).padStart(2, '0');
  }

  update();
  setInterval(update, 1000);
}

// 2. Interactive Leaflet Map for Ruko PTC Mall Blok B No. 6
function initMap() {
  const mapEl = document.getElementById('leaflet-map');
  if (!mapEl) return;

  // Custom Icon with Logo Theme (Red and Black with Crown Pin)
  const customIcon = L.divIcon({
    className: 'custom-mahkota-pin',
    html: `
      <div class="relative flex items-center justify-center">
        <div class="absolute -inset-2 bg-red-600/40 rounded-full animate-ping"></div>
        <div class="w-12 h-12 rounded-xl bg-gradient-to-tr from-black via-neutral-900 to-red-600 border-2 border-white shadow-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition-transform">
          <svg class="w-7 h-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14" fill="#ffffff" fill-opacity="0.3"/>
          </svg>
        </div>
        <div class="absolute -bottom-2 w-2 h-2 bg-red-600 rotate-45 border-r border-b border-white"></div>
      </div>
    `,
    iconSize: [48, 48],
    iconAnchor: [24, 48],
    popupAnchor: [0, -48],
  });

  const map = L.map('leaflet-map', {
    center: [STORE_LAT, STORE_LNG],
    zoom: 16,
    scrollWheelZoom: false,
  });

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 19,
  }).addTo(map);

  const marker = L.marker([STORE_LAT, STORE_LNG], { icon: customIcon }).addTo(map);

  const popupContent = `
    <div style="font-family: 'Plus Jakarta Sans', sans-serif; color: #111; min-width: 230px; padding: 4px;">
      <div style="display:flex; align-items:center; gap:6px; margin-bottom: 6px;">
        <span style="background:#dc2626; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase;">Grand Opening</span>
        <span style="font-size:11px; color:#666;">23 Okt 2026</span>
      </div>
      <h4 style="font-size: 15px; font-weight: 800; margin: 0 0 4px; color: #b91c1c;">MAHKOTA WATCH</h4>
      <p style="font-size: 12px; margin: 0 0 4px; color: #333; line-height: 1.4;">
        <strong>Ruko PTC Mall, Blok B No. 6</strong><br/>
        Jl. R. Sukamto, Palembang
      </p>
      <p style="font-size: 11px; margin: 0 0 8px; color: #166534; font-weight: 700;">
        WA: ${STORE_PHONE}
      </p>
      <div style="display:flex; gap:6px;">
        <a href="https://www.google.com/maps/search/?api=1&query=${STORE_LAT},${STORE_LNG}" target="_blank" rel="noopener noreferrer" style="background:#dc2626; color:#fff; text-decoration:none; padding:6px 12px; border-radius:6px; font-size:11px; font-weight:700; text-align:center; flex:1;">
          Petunjuk Arah Google Maps
        </a>
      </div>
    </div>
  `;

  marker.bindPopup(popupContent).openPopup();

  // Invalidate size after layout settles
  setTimeout(() => {
    map.invalidateSize();
  }, 400);

  // Recenter button
  const recenterBtn = document.getElementById('btn-recenter-map');
  if (recenterBtn) {
    recenterBtn.addEventListener('click', () => {
      map.flyTo([STORE_LAT, STORE_LNG], 17, { duration: 1.2 });
      marker.openPopup();
    });
  }
}

// 3. Copy Address
function initCopyAddress() {
  const copyBtn = document.getElementById('btn-copy-address');
  const copyFeedback = document.getElementById('copy-feedback');

  if (!copyBtn || !copyFeedback) return;

  copyBtn.addEventListener('click', () => {
    navigator.clipboard.writeText(STORE_ADDRESS).then(() => {
      copyFeedback.classList.remove('hidden');
      setTimeout(() => {
        copyFeedback.classList.add('hidden');
      }, 2500);
    });
  });
}

// 4. Mobile Menu Toggle
function initMobileMenu() {
  const toggleBtn = document.getElementById('mobile-menu-btn');
  const mobileNav = document.getElementById('mobile-nav');

  if (!toggleBtn || !mobileNav) return;

  toggleBtn.addEventListener('click', () => {
    mobileNav.classList.toggle('hidden');
  });

  const links = mobileNav.querySelectorAll('a');
  links.forEach((link) => {
    link.addEventListener('click', () => {
      mobileNav.classList.add('hidden');
    });
  });
}

// 5. Confetti celebration on primary buttons
function initConfettiTriggers() {
  const celebrateBtns = document.querySelectorAll('.trigger-celebrate');
  celebrateBtns.forEach((btn) => {
    btn.addEventListener('click', () => {
      confetti({
        particleCount: 40,
        spread: 60,
        origin: { y: 0.7 },
        colors: ['#dc2626', '#ffffff', '#fbbf24'],
      });
    });
  });
}