import { useState } from 'react';
import { Marker, Popup } from 'react-map-gl/maplibre';
import { KOREA_WIND_FARMS } from '../../data/windFarms';
import type { WindFarm } from '../../data/windFarms';

const COLOR = '#00bcd4';

function WindTurbineIcon({ size = 18 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <line x1="12" y1="10" x2="11" y2="23" stroke={COLOR} strokeWidth="1.5" />
      <line x1="12" y1="10" x2="13" y2="23" stroke={COLOR} strokeWidth="1.5" />
      <circle cx="12" cy="9" r="1.8" fill={COLOR} />
      <path d="M12 9 L11.5 1 Q12 0 12.5 1 Z" fill={COLOR} opacity="0.9" />
      <path d="M12 9 L18 14 Q18.5 13 17.5 12.5 Z" fill={COLOR} opacity="0.9" />
      <path d="M12 9 L6 14 Q5.5 13 6.5 12.5 Z" fill={COLOR} opacity="0.9" />
      <line x1="8" y1="23" x2="16" y2="23" stroke={COLOR} strokeWidth="1.5" />
    </svg>
  );
}

const STATUS_COLOR: Record<string, string> = {
  '운영중': '#22c55e',
  '건설중': '#eab308',
  '계획': '#64748b',
};

export function WindFarmLayer() {
  const [selected, setSelected] = useState<WindFarm | null>(null);

  return (
    <>
      {KOREA_WIND_FARMS.map(wf => (
        <Marker key={wf.id} longitude={wf.lng} latitude={wf.lat} anchor="center"
          onClick={(e) => { e.originalEvent.stopPropagation(); setSelected(wf); }}>
          <div
            className="flex flex-col items-center cursor-pointer"
            style={{ filter: `drop-shadow(0 0 3px ${COLOR}88)` }}
          >
            <WindTurbineIcon size={18} />
            <div style={{
              fontSize: 6, color: COLOR, marginTop: 1,
              textShadow: '0 0 3px #000, 0 0 3px #000',
              whiteSpace: 'nowrap', fontWeight: 700,
            }}>
              {wf.name.length > 10 ? wf.name.slice(0, 10) + '..' : wf.name}
            </div>
          </div>
        </Marker>
      ))}

      {selected && (
        <Popup longitude={selected.lng} latitude={selected.lat}
          onClose={() => setSelected(null)} closeOnClick={false}
          anchor="bottom" maxWidth="280px" className="gl-popup">
          <div className="popup-body-sm" style={{ minWidth: 200 }}>
            <div className="popup-header" style={{ background: COLOR, color: '#000', gap: 6, padding: '6px 10px' }}>
              <span style={{ fontSize: 16 }}>🌀</span>
              <strong>{selected.name}</strong>
            </div>
            <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
              <span style={{
                background: STATUS_COLOR[selected.status] || '#666', color: '#fff',
                padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
              }}>
                {selected.status}
              </span>
              <span style={{
                background: COLOR, color: '#000',
                padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
              }}>
                해상풍력
              </span>
              <span style={{
                background: '#333', color: '#ccc',
                padding: '2px 8px', borderRadius: 3, fontSize: 10,
              }}>
                {selected.region}
              </span>
            </div>
            <div className="popup-grid" style={{ gap: '2px 12px' }}>
              <div><span className="popup-label">용량 : </span><strong>{selected.capacityMW} MW</strong></div>
              <div><span className="popup-label">터빈 : </span><strong>{selected.turbines}기</strong></div>
              {selected.year && <div><span className="popup-label">준공 : </span><strong>{selected.year}년</strong></div>}
              <div><span className="popup-label">지역 : </span>{selected.region}</div>
            </div>
            <div style={{ marginTop: 6, fontSize: 10, color: '#999' }}>
              {selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
            </div>
          </div>
        </Popup>
      )}
    </>
  );
}
