import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer } from 'react-leaflet';
import React, { useEffect, useMemo, useState } from 'react';
import Markers from './Markers';
import AddressSearch from './AddressSearch';
import DepartmentFilter from './DepartmentFilter';
import InfoCard from './InfoCard';

interface Dya {
  id: string | number;
  latitude: number;
  longitude: number;
  dya_text: string;
  agb_dyncol: string | null;
  html_info: string | null;
  type: string;
  department_id: number;
}

interface Department {
  id: number;
  name: string;
}

const MapPage: React.FC = () => {
  const [allDyas, setAllDyas] = useState<Dya[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [selectedDepartments, setSelectedDepartments] = useState<number[]>([]);
  const [selectedDya, setSelectedDya] = useState<Dya | null>(null);

  useEffect(() => {
    fetch('/map/dyas')
      .then((r) => r.json())
      .then((data) => {
        const markers = data.markers || [];
        const deps = data.departments || [];
        setAllDyas(markers);
        setDepartments(deps);
        setSelectedDepartments(deps.map((d: Department) => d.id));
      })
      .catch((e) => console.error('Error fetching dyas:', e));
  }, []);

  const filteredDyas = useMemo(
    () => allDyas.filter((d) => selectedDepartments.includes(d.department_id)),
    [allDyas, selectedDepartments],
  );

  const handleDepartmentToggle = (departmentId: number) => {
    setSelectedDepartments((prev) =>
      prev.includes(departmentId)
        ? prev.filter((id) => id !== departmentId)
        : [...prev, departmentId],
    );
  };

  const handleToggleAll = (selectAll: boolean) => {
    if (selectAll) setSelectedDepartments(departments.map((d) => d.id));
    else setSelectedDepartments([]);
  };

  const handleMarkerClick = (dya: Dya) => {
    setSelectedDya(dya);
  };

  const handleInfoCardClose = () => {
    setSelectedDya(null);
  };

  return (
    <div className='map-content'>
      <MapContainer
        center={[51.1657, 10.4515]}
        zoom={6}
        style={{ width: '100%', height: '100%' }}
        preferCanvas
        zoomControl={true}
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        />
        <Markers dyas={filteredDyas} onMarkerClick={handleMarkerClick} />
        <AddressSearch dyas={filteredDyas} />
      </MapContainer>

      <div className='map-overlay top-left'>
        <DepartmentFilter
          departments={departments}
          selectedDepartments={selectedDepartments}
          onDepartmentToggle={handleDepartmentToggle}
          onToggleAll={handleToggleAll}
        />
      </div>

      <div className='map-overlay bottom-right'>
        <InfoCard dya={selectedDya} onClose={handleInfoCardClose} />
      </div>
    </div>
  );
};

export default MapPage;