import React, { useMemo } from 'react';
import { GoogleMap, useJsApiLoader, Marker } from '@react-google-maps/api';

const containerStyle = {
    width: '100%',
    height: '400px',
    borderRadius: '20px',
    border: '1px solid rgba(255, 255, 255, 0.2)'
};

const defaultCenter = {
    lat: 52.8564,
    lng: -104.6100
};

// Coordinate lookup table
const PLACE_COORDINATES: Record<string, { lat: number; lng: number }> = {
    "Melfort": { lat: 52.8564, lng: -104.6100 },
    "Star City": { lat: 52.9333, lng: -104.3333 },
    "Saskatoon": { lat: 52.1332, lng: -106.6700 },
    "Regina": { lat: 50.4452, lng: -104.6189 },
    "Winnipeg": { lat: 49.8951, lng: -97.1384 },
    "Vancouver": { lat: 49.2827, lng: -123.1207 },
    "Edmonton": { lat: 53.5461, lng: -113.4938 },
    "Calgary": { lat: 51.0447, lng: -114.0719 },
    "Kyiv": { lat: 50.4501, lng: 30.5234 },
    "Torhovytsy": { lat: 50.5560, lng: 25.3989 },
    "Lviv": { lat: 49.8397, lng: 24.0297 },
    "Puerto Vallarta": { lat: 20.6534, lng: -105.2253 },
    "Havana": { lat: 23.1136, lng: -82.3666 },
    "Cancun": { lat: 21.1619, lng: -86.8515 },
    "Waikiki Beach": { lat: 21.2769, lng: -157.8274 },
};

interface VisitedMapProps {
    places: string[];
}

function VisitedMap({ places }: VisitedMapProps) {
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY || ""
    });

    const markers = useMemo(() => {
        return places
            .map(place => ({
                name: place,
                pos: PLACE_COORDINATES[place]
            }))
            .filter(item => item.pos !== undefined);
    }, [places]);

    const mapCenter = useMemo(() => {
        if (markers.length > 0) {
            return markers[0].pos;
        }
        return defaultCenter;
    }, [markers]);

    if (!isLoaded) {
        return <div style={{ color: 'white', textAlign: 'center' }}>Loading Map...</div>;
    }

    if (!process.env.REACT_APP_GOOGLE_MAPS_API_KEY) {
        return (
            <div style={containerStyle}>
                <div style={{ height: "100%", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.5)", color: "white", borderRadius: "20px" }}>
                    Google Maps API Key Missing
                </div>
            </div>
        )
    }

    return (
        <GoogleMap
            mapContainerStyle={containerStyle}
            center={mapCenter}
            zoom={8}
            options={{
                disableDefaultUI: false,
                zoomControl: true,
                streetViewControl: false,
                mapTypeControl: false,
                styles: [
                    {
                        "elementType": "geometry",
                        "stylers": [{ "color": "#242f3e" }]
                    },
                    {
                        "elementType": "labels.text.stroke",
                        "stylers": [{ "color": "#242f3e" }]
                    },
                    {
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#746855" }]
                    },
                    {
                        "featureType": "administrative.locality",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#d59563" }]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#d59563" }]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [{ "color": "#263c3f" }]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#6b9a76" }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [{ "color": "#38414e" }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry.stroke",
                        "stylers": [{ "color": "#212a37" }]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#9ca5b3" }]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry",
                        "stylers": [{ "color": "#746855" }]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.stroke",
                        "stylers": [{ "color": "#1f2835" }]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#f3d19c" }]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "geometry",
                        "stylers": [{ "color": "#2f3948" }]
                    },
                    {
                        "featureType": "transit.station",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#d59563" }]
                    },
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [{ "color": "#17263c" }]
                    },
                    {
                        "featureType": "water",
                        "elementType": "labels.text.fill",
                        "stylers": [{ "color": "#515c6d" }]
                    },
                    {
                        "featureType": "water",
                        "elementType": "labels.text.stroke",
                        "stylers": [{ "color": "#17263c" }]
                    }
                ]
            }}
        >
            {markers.map((marker, index) => (
                <Marker
                    key={index}
                    position={marker.pos}
                    title={marker.name}
                />
            ))}
        </GoogleMap>
    );
}

export default React.memo(VisitedMap);
