import { memo, useState } from 'react';
import { Marker, Popup } from 'react-map-gl/maplibre';
import { ME_FACILITIES, ME_FACILITY_TYPE_META } from '../../data/middleEastFacilities';
import type { MEFacility } from '../../data/middleEastFacilities';

export const MEFacilityLayer = memo(function MEFacilityLayer() {
  const [selected, setSelected] = useState<MEFacility | null>(null);

  return (
    <>
      {ME_FACILITIES.map(f => {
        const meta = ME_FACILITY_TYPE_META[f.type];
        return (
          <Marker key={f.id} longitude={f.lng} latitude={f.lat} anchor="center"
            onClick={(e) => { e.originalEvent.stopPropagation(); setSelected(f); }}>
            <div
              className="flex flex-col items-center cursor-pointer"
              style={{ filter: `drop-shadow(0 0 3px ${meta.color}88)` }}
            >
              <div style={{
                width: 16, height: 16, borderRadius: 3,
                background: 'rgba(0,0,0,0.7)', border: `1.5px solid ${meta.color}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 9,
              }}>
                {meta.icon}
              </div>
              <div style={{
                fontSize: 5, color: meta.color, marginTop: 1,
                textShadow: '0 0 3px #000, 0 0 3px #000',
                whiteSpace: 'nowrap', fontWeight: 700,
              }}>
                {f.nameKo.length > 12 ? f.nameKo.slice(0, 12) + '..' : f.nameKo}
              </div>
            </div>
          </Marker>
        );
      })}

      {selected && (() => {
        const meta = ME_FACILITY_TYPE_META[selected.type];
        return (
          <Popup longitude={selected.lng} latitude={selected.lat}
            onClose={() => setSelected(null)} closeOnClick={false}
            anchor="bottom" maxWidth="320px" className="gl-popup">
            <div className="popup-body-sm" style={{ minWidth: 240 }}>
              <div className="popup-header" style={{ background: meta.color, color: '#fff', gap: 6, padding: '6px 10px' }}>
                <span style={{ fontSize: 16 }}>{selected.flag}</span>
                <strong style={{ fontSize: 13 }}>{meta.icon} {selected.nameKo}</strong>
              </div>
              <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
                <span style={{
                  background: meta.color, color: '#fff',
                  padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
                }}>
                  {meta.label}
                </span>
                <span style={{
                  background: '#333', color: '#ccc',
                  padding: '2px 8px', borderRadius: 3, fontSize: 10,
                }}>
                  {selected.country}
                </span>
              </div>
              <div style={{ fontSize: 11, color: '#ccc', lineHeight: 1.4, marginBottom: 6 }}>
                {selected.description}
              </div>
              <div style={{ fontSize: 11, color: 'var(--kcg-muted)', marginBottom: 4 }}>
                {selected.name}
              </div>
              <div style={{ fontSize: 10, color: '#999' }}>
                {selected.lat.toFixed(4)}°{selected.lat >= 0 ? 'N' : 'S'}, {selected.lng.toFixed(4)}°E
              </div>
            </div>
          </Popup>
        );
      })()}
    </>
  );
});