import {BASE} from '@/services/api.ts';
import Map from 'ol/Map'
import { Feature } from 'ol'
import Point from 'ol/geom/Point'
import { fromLonLat } from 'ol/proj'
import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import { adjustedInterval } from '@ztimson/utils'

const API = BASE + '/api'

const SHIP_COLORS: Record<string, string> = {
	'Base Station':      '#00aaff',
	'Class A':           '#00ff00',
	'Class B':           '#8450ea',
	'SAR Aircraft':      '#ff6600',
	'Aid to Navigation': '#ffff00',
	'Class B CS':        '#8450ea',
	'Sart/Epirb/MOB':   '#ff0000',
	'Unknown':           '#fad106',
}

function buildBoatIcon(boat: any): string {
	const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown']

	if (boat.type === 'Base Station') {
		return `data:image/svg+xml,${encodeURIComponent(`
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <polygon points="16,2 30,16 16,30 2,16" fill="${color}" stroke="#000" stroke-width="1.5"/>
                <circle cx="16" cy="9" r="1.8" fill="#000"/>
                <line x1="16" y1="9" x2="16" y2="23" stroke="#000" stroke-width="1.8"/>
                <line x1="11" y1="12" x2="21" y2="12" stroke="#000" stroke-width="1.8"/>
                <path d="M9,18 Q16,26 23,18" fill="none" stroke="#000" stroke-width="1.5"/>
            </svg>
        `)}`
	}

	return `data:image/svg+xml,${encodeURIComponent(`
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
            <polygon points="12,0 24,28 12,22 0,28" fill="${color}" stroke="#000" stroke-width="1.5"/>
            <circle cx="12" cy="12" r="1.5" fill="#000"/>
            <line x1="12" y1="12" x2="12" y2="22" stroke="#000" stroke-width="1.5"/>
            <line x1="8" y1="14" x2="16" y2="14" stroke="#000" stroke-width="1.5"/>
            <path d="M7,17 Q12,24 17,17" fill="none" stroke="#000" stroke-width="1.3"/>
        </svg>
    `)}`
}

function buildPopupHtml(boat: any): string {
	const name = boat.name?.trim() || boat.callsign?.trim() || `MMSI: ${boat.mmsi}`
	const rows: [string, any][] = [
		['Type',        boat.type],
		['MMSI',        boat.mmsi],
		['Country',     boat.country],
		['Callsign',    boat.callsign || '-'],
		['IMO',         boat.imo || '-'],
		['Ship Type',   boat.ship_type ?? '-'],
		['Speed',       boat.speed != null ? `${boat.speed} kts` : '-'],
		['Heading',     boat.heading != null ? `${boat.heading}°` : '-'],
		['Course',      boat.course != null ? `${boat.course}°` : '-'],
		['Lat / Lon',   `${boat.lat?.toFixed(5)}, ${boat.lon?.toFixed(5)}`],
		['Distance',    `${boat.distance?.toFixed(2)} nmi`],
		['Bearing',     `${boat.bearing}°`],
		['Destination', boat.destination || '-'],
		['ETA',         boat.eta || '-'],
		['Draught',     boat.draught != null ? `${boat.draught}m` : '-'],
		['RSSI',        `${boat.rssi?.toFixed(1)} dB`],
		['Drift',       `${boat.drift?.toFixed(2)} ppm`],
		['Msg Types',   boat.msg_type?.join(', ') || '-'],
		['Channels',    boat.channels || '-'],
		['Sources',     boat.sources],
		['Receiver',    boat.receiver],
		['Count',       boat.count],
		['Last Signal', boat.last_signal != null ? `${boat.last_signal}s ago` : '-'],
		['In Range',    boat.in_range],
	]

	return `
        <div style="font-family:monospace;color:#ccc;min-width:280px">
            <div style="padding:12px 16px;border-bottom:1px solid rgba(200,200,220,0.2)">
                <h3 style="margin:0;color:#7eeee1;font-size:16px">🚢 ${name}</h3>
                <div style="font-size:11px;color:#888;margin-top:4px">${boat.type || 'Unknown'}</div>
            </div>
            <div style="padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px">
                ${rows.map(([label, val]) => `
                    <div>
                        <div style="color:#888;font-size:10px;font-weight:bold">${label}</div>
                        <div style="color:#0f0;font-size:13px">${val ?? '-'}</div>
                    </div>
                `).join('')}
            </div>
        </div>
    `
}

export class AISLayer {
	private map:          Map
	private layer!:       VectorLayer<VectorSource>
	private popups:       Record<string, { el: HTMLDivElement, destroy: () => void }> = {}
	private data:         any[] = []
	private clickHandler: ((e: any) => void) | null = null
	private refreshTimer: any = null
	visible = false

	constructor(map: Map) { this.map = map }

	// ── Public ────────────────────────────────────────────────────────────────

	async show() {
		if (this.visible) return
		this.visible = true

		this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
		this.map.addLayer(this.layer)

		await this._fetch()
		this._draw()
		this._attachClick()

		this.refreshTimer = adjustedInterval(async () => {
			await this._fetch()
			this._draw()
			this._refreshPopups()
		}, 5_000)
	}

	hide() {
		if (!this.visible) return
		this.visible = false

		if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
		if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }

		for (const mmsi of Object.keys(this.popups)) this._closePopup(mmsi)
		this.map.removeLayer(this.layer)
	}

	// ── Private ───────────────────────────────────────────────────────────────

	private async _fetch() {
		this.data = await fetch(`${API}/ais`).then(r => r.json()) || []
	}

	private _draw() {
		const source = this.layer.getSource()!
		source.clear()

		for (const boat of this.data) {
			if (boat.lat == null || boat.lon == null) continue
			const coord = fromLonLat([boat.lon, boat.lat])
			const f = new Feature({ geometry: new Point(coord) })
			f.set('mmsi',     boat.mmsi)
			f.set('boatData', boat)
			f.setStyle(new Style({
				image: new Icon({
					src:      buildBoatIcon(boat),
					scale:    1,
					rotation: (boat.heading ?? boat.course ?? 0) * (Math.PI / 180),
					anchor:   [0.5, 0.5],
				}),
			}))
			source.addFeature(f)
		}
	}

	private _openPopup(boat: any) {
		const mmsi = String(boat.mmsi)
		if (this.popups[mmsi]) return

		const el = document.createElement('div')
		el.style.cssText = `
            position:absolute; z-index:9999; pointer-events:auto;
            background:rgba(0,0,0,0.88); border:1px solid rgba(200,200,220,0.3);
            border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,0.5); overflow:hidden;
        `

		const close         = document.createElement('button')
		close.innerHTML     = '✕'
		close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
		close.onclick       = () => this._closePopup(mmsi)

		el.innerHTML = buildPopupHtml(boat)
		el.appendChild(close)
		document.body.appendChild(el)
		this._positionPopup(el, boat)

		this.popups[mmsi] = { el, destroy: () => el.remove() }
	}

	private _positionPopup(el: HTMLDivElement, boat: any) {
		const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
		if (!pixel) return
		const rect    = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
		el.style.left = `${rect.left + pixel[0] + 16}px`
		el.style.top  = `${rect.top  + pixel[1] - 16}px`
	}

	private _closePopup(mmsi: string) {
		const popup = this.popups[mmsi]
		if (popup) { popup.destroy(); delete this.popups[mmsi] }
	}

	private _refreshPopups() {
		for (const mmsi of Object.keys(this.popups)) {
			const boat = this.data.find(b => String(b.mmsi) === mmsi)
			if (!boat) { this._closePopup(mmsi); continue }
			const { el } = <any>this.popups[mmsi]
			el.innerHTML  = buildPopupHtml(boat)
			const close   = document.createElement('button')
			close.innerHTML     = '✕'
			close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
			close.onclick       = () => this._closePopup(mmsi)
			el.appendChild(close)
			this._positionPopup(el, boat)
		}
	}

	private _attachClick() {
		this.clickHandler = (evt) => {
			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('boatData') ? f : null)
			if (!f) return
			const boat = f.get('boatData')
			const mmsi = String(boat.mmsi)
			if (this.popups[mmsi]) { this._closePopup(mmsi); return }
			this._openPopup(boat)
		}
		this.map.on('singleclick', this.clickHandler)
	}
}