"use client"

import { useEffect, useState } from "react"
import { Marker } from "react-map-gl/mapbox"

interface TimeZoneMarker {
  name: string
  offset: number
  longitude: number
  latitude: number
}

const TIME_ZONES: TimeZoneMarker[] = [
    { name: "WIB", offset: 7, longitude: 110.5, latitude: -3.3 },    // Between Java and Sumatra
    { name: "WITA", offset: 8, longitude: 118.8, latitude: -2.5 },    // Between Java and Kalimantan
    { name: "WIT", offset: 9, longitude: 128.0, latitude: -2.0 },    // Between Sulawesi and Papua
]

export default function TimeZonesDisplay() {
  const [currentTimes, setCurrentTimes] = useState<Record<string, string>>({})

  useEffect(() => {
    const updateTimes = () => {
      const now = new Date()
      const times: Record<string, string> = {}

      TIME_ZONES.forEach((zone) => {
        const localTime = new Date(now.getTime())
        localTime.setHours(now.getUTCHours() + zone.offset)
        
        const hours = localTime.getHours().toString().padStart(2, "0")
        const minutes = localTime.getMinutes().toString().padStart(2, "0")
        const seconds = localTime.getSeconds().toString().padStart(2, "0")
        
        times[zone.name] = `${hours}:${minutes}:${seconds}`
      })

      setCurrentTimes(times)
    }

    // Update immediately and then every second
    updateTimes()
    const interval = setInterval(updateTimes, 1000)

    return () => clearInterval(interval)
  }, [])

  return (
    <>
      {TIME_ZONES.map((zone) => (
        <Marker key={zone.name} longitude={zone.longitude} latitude={zone.latitude}>
              <div className="relative">
                  <div className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none">
                      <div className="bg-black/90 border-2 border-orange-600/70 rounded-lg p-2 shadow-lg">
                          <div className="text-center text-orange-500 text-xs font-bold">{zone.name} / GMT+{zone.offset}</div>
                          <div
                              className="digital-clock font-mono font-bold text-amber-500 text-xl md:text-2xl tracking-wider"
                              style={{
                                  textShadow: '0 0 5px rgba(255,170,0,0.7)',
                                  fontFamily: "'Digital', monospace"
                              }}
                          >
                              {currentTimes[zone.name] || "00:00:00"}
                          </div>
              </div>
            </div>
          </div>
        </Marker>
      ))}
    </>
  )
}