// src/components/MapDisplay.tsx
import React from 'react';
import { MapContainer, TileLayer, CircleMarker, Tooltip } from 'react-leaflet';
import { HeatmapLayer } from 'react-leaflet-heatmap-layer-v3';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat';
import type { HeatmapPoint, MapMode } from '../App';
import MarkerClusterGroup from 'react-leaflet-cluster';
import Legend from './Legend';

interface MapDisplayProps {
  heatmapData: HeatmapPoint[];
  radiusMultiplier: number;
  viewMode: MapMode;
}

const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier, viewMode }) => {
  const germanyCenter: [number, number] = [51.1657, 10.4515];
  const maxCount = Math.max(...heatmapData.map(p => p.count), 1);

  const calculateRadius = (count: number) => {
    return 3 + Math.log(count + 1) * 5 * radiusMultiplier;
  };
  
  const getColor = (count: number) => {
    const ratio = count / maxCount;
    if (ratio > 0.8) return '#d73027'; // Red
    if (ratio > 0.5) return '#fdae61'; // Orange
    if (ratio > 0.2) return '#fee08b'; // Yellow
    return '#66bd63'; // Green
  };

  const renderPoints = () => (
    <MarkerClusterGroup>
      {heatmapData.map((point, idx) => (
        <CircleMarker
          key={idx}
          center={[point.lat, point.lon]}
          radius={calculateRadius(point.count)}
          pathOptions={{ 
              color: getColor(point.count),
              fillColor: getColor(point.count),
              fillOpacity: 0.7
          }}
        >
          <Tooltip>
            PLZ: {point.plz} <br />
            Count: {point.count}
            {point.attributes_summary && Object.entries(point.attributes_summary).map(([attr, values]) => (
                <div key={attr}>
                  <strong>{attr}:</strong> {values.join(', ')}
                </div>
            ))}
          </Tooltip>
        </CircleMarker>
      ))}
    </MarkerClusterGroup>
  );

  const renderHeatmap = () => (
    <HeatmapLayer
        points={heatmapData}
        longitudeExtractor={(p: HeatmapPoint) => p.lon}
        latitudeExtractor={(p: HeatmapPoint) => p.lat}
        intensityExtractor={(p: HeatmapPoint) => p.count}
        radius={25}
        blur={20}
        max={maxCount * 0.1} // Adjust max intensity for better visualization
    />
  );

  if (heatmapData.length === 0) {
    return (
      <div style={{ textAlign: 'center', paddingTop: '50px' }}>
        <p>No data to display on the map.</p>
        <p>Upload a file and apply filters to see the heatmap.</p>
      </div>
    );
  }

  return (
    <MapContainer key={viewMode} center={germanyCenter} zoom={6} style={{ height: '100%', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {viewMode === 'points' ? renderPoints() : renderHeatmap()}
      {viewMode === 'points' && <Legend getColor={getColor} maxCount={maxCount} />}
    </MapContainer>
  );
};

export default MapDisplay;