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

const COLOR = '#00bcd4';

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

interface Props {
  selected: WindFarm | null;
  onClose: () => void;
}

export function WindFarmLayer({ selected, onClose }: Props) {
  if (!selected) return null;
  return (
    <Popup longitude={selected.lng} latitude={selected.lat}
      onClose={onClose} 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>
  );
}