import React, { useRef, useEffect, useState, useCallback } from 'react';
import * as d3 from 'd3';
import './styles.css'; // Assurez-vous d'importer votre CSS

const Map = ({ targetCountry, onCountrySelected, selectedCountry, wrongGuess, correctGuess, isBlinking, isValidated }) => {
	const svgRef = useRef();
	const projectionRef = useRef();
	const pathRef = useRef();

	const [rotation, setRotation] = useState([0, 0, 0]);
	const [countriesData, setCountriesData] = useState(null);

	useEffect(() => {
		// Charger les données simplifiées des pays
		d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson').then(data => {
			setCountriesData(data);
		});
	}, []);

	const getFillColor = useCallback((country) => {
		if (correctGuess === country.properties.name) {
			return isBlinking ? 'green' : 'rgba(255, 255, 255, 0.5)';
		} else if (wrongGuess === country.properties.name) {
			return isBlinking ? 'red' : 'rgba(255, 255, 255, 0.5)';
		} else if (selectedCountry === country.properties.name) {
			return 'yellow';
		} else {
			return 'rgba(255, 255, 255, 0.5)';
		}
	}, [correctGuess, wrongGuess, selectedCountry, isBlinking]);

	useEffect(() => {
		if (!countriesData) return;

		const width = 600;
		const height = 600;

		const svg = d3.select(svgRef.current)
			.attr("width", width)
			.attr("height", height);

		const projection = d3.geoOrthographic()
			.scale(280)
			.translate([width / 2, height / 2])
			.rotate(rotation)
			.clipAngle(90);

		projectionRef.current = projection;

		const path = d3.geoPath().projection(projection);
		pathRef.current = path;

		svg.selectAll("*").remove(); // Clear previous drawings

		// Ajouter l'image de texture de la Terre
		svg.append("defs").append("pattern")
			.attr("id", "earth-texture")
			.attr("patternUnits", "userSpaceOnUse")
			.attr("width", width)
			.attr("height", height)
			.append("image")
			.attr("href", "https://eoimages.gsfc.nasa.gov/images/imagerecords/74000/74750/world.topo.bathy.200412.3x5400x2700.jpg")
			.attr("width", width)
			.attr("height", height)
			.attr("x", 0)
			.attr("y", 0);

		// Dessiner le globe avec la texture de la Terre
		svg.append("path")
			.datum({ type: "Sphere" })
			.attr("d", path)
			.attr("fill", "url(#earth-texture)");

		const g = svg.append("g");

		g.selectAll("path")
			.data(countriesData.features)
			.enter()
			.append("path")
			.attr("d", path)
			.attr("fill", d => getFillColor(d))
			.attr("stroke", "black")
			.attr("stroke-width", 0.5)
			.on("click", (event, d) => {
				if (!isValidated && d) { // Check if 'd' exists to avoid ocean clicks
					onCountrySelected(d.properties.name);
				}
			})
			.on("mouseover", (event, d) => {
				if (!isValidated && d) { // Check if 'd' exists to avoid ocean hovers
					d3.select(event.target).attr("fill", "lightblue");
				}
			})
			.on("mouseout", (event, d) => {
				if (!isValidated && d) { // Check if 'd' exists to avoid ocean hovers
					d3.select(event.target).attr("fill", getFillColor(d));
				}
			});

		const drag = d3.drag()
			.on("drag", (event) => {
				const rotate = projection.rotate();
				const dx = event.dx / width * 360;
				const dy = event.dy / height * 180;
				projection.rotate([rotate[0] + dx, rotate[1] - dy]);
				svg.selectAll("path").attr("d", path);
				setRotation(projection.rotate());
			});

		svg.call(drag);

		const zoom = d3.zoom()
			.scaleExtent([1, 8])
			.on("zoom", (event) => {
				const { transform } = event;
				projection.scale(280 * transform.k);
				svg.selectAll("path").attr("d", path); // redraw sphere and countries
			});

		svg.call(zoom);

		// Ajouter un cercle autour du pays correct après une mauvaise réponse
		if (wrongGuess && targetCountry) {
			const targetFeature = countriesData.features.find(
				feature => feature.properties.name === targetCountry
			);

			if (targetFeature) {
				const [[x0, y0], [x1, y1]] = path.bounds(targetFeature);
				const x = (x0 + x1) / 2;
				const y = (y0 + y1) / 2;
				const radius = Math.max((x1 - x0) / 2, (y1 - y0) / 2);

				svg.append("circle")
					.attr("cx", x)
					.attr("cy", y)
					.attr("r", radius + 10)
					.attr("stroke", "red")
					.attr("stroke-width", 2)
					.attr("fill", "none");
			}
		}
	}, [rotation, targetCountry, selectedCountry, wrongGuess, correctGuess, isBlinking, isValidated, countriesData, getFillColor, onCountrySelected]);

	return (
		<div>
			<svg ref={svgRef}></svg>
		</div>
	);
};

export default Map;
je veux que tu changes l'url : https://eoimages.gsfc.nasa.gov/images/imagerecords/74000/74750/world.topo.bathy.200412.3x5400x2700.jpg pour une vrai topo