import 'leaflet/dist/leaflet.css';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import Markers from '../../MapPage/Markers';
import AddressSearch from '../../MapPage/AddressSearch';
import InfoCard from '../../MapPage/InfoCard';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import { Trans } from '@lingui/macro';
import './MapCard.css';
import SearchIcon from '@mui/icons-material/Search';

export 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;
}

type MapCardProps = {
  departmentId: number;
  zoom?: number;
  center?: [number, number];
};

const MIN_MAP_HEIGHT = 180;

const MapCard: React.FC<MapCardProps> = ({
  departmentId,
  zoom = 11,
  center = [51.1657, 10.4515],
}) => {
  const [allDyas, setAllDyas] = useState<Dya[]>([]);
  const [selectedDya, setSelectedDya] = useState<Dya | null>(null);
  const [sizeVersion, setSizeVersion] = useState(0);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [showSearch, setShowSearch] = useState(false);

  useEffect(() => {
    let mounted = true;
    fetch('/map/dyas')
      .then((r) => r.json())
      .then((data) => {
        console.log('Fetched dyas for MapCard:', data); // Debug-Log
        const markers: Dya[] = data.markers || [];
        if (mounted) setAllDyas(markers);
      })
      .catch((e) => console.error('Error fetching dyas:', e));
    return () => {
      mounted = false;
    };
  }, []);

  useEffect(() => {
    const node = containerRef.current;
    if (!node) return;

    const trigger = () => setSizeVersion((v) => v + 1);
    trigger();

    let resizeObserver: ResizeObserver | null = null;
    let fallbackListenerAttached = false;

    if (typeof ResizeObserver !== 'undefined') {
      resizeObserver = new ResizeObserver(trigger);
      resizeObserver.observe(node);
    } else if (typeof window !== 'undefined') {
      window.addEventListener('resize', trigger);
      fallbackListenerAttached = true;
    }

    return () => {
      resizeObserver?.disconnect();
      if (!resizeObserver && fallbackListenerAttached && typeof window !== 'undefined') {
        window.removeEventListener('resize', trigger);
      }
    };
  }, []);

  const filteredDyas = useMemo(
    () => allDyas.filter((d) => Number(d.department_id) === Number(departmentId)),
    [allDyas, departmentId]
  );
  const visibleTasks = useMemo(() => filteredDyas.slice(0, 6), [filteredDyas]);

  const handleMarkerClick = (dya: Dya) => setSelectedDya(dya);
  const handleInfoCardClose = () => setSelectedDya(null);

  return (
    <div
      className='dash-map-card-root'
      ref={containerRef}
      style={{ width: '100%', height: '100%', position: 'relative', minHeight: MIN_MAP_HEIGHT }}
    >
      <MapContainer
        center={center}
        zoom={zoom}
        style={{ width: '100%', height: '100%' }}
        preferCanvas
        zoomControl={false}
      >
        <ResizeInvalidator version={sizeVersion} />
        <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 optional im Card-Kontext – hilfreich bei vielen Markern */}
        {showSearch && <AddressSearch dyas={filteredDyas} />}
      </MapContainer>
      {!showSearch && (
        <div className='map-overlay top-right' style={{ padding: 8 }}>
          <Tooltip title={<Trans>Adresse/Strasse suchen</Trans>}>
            <IconButton color='primary' onClick={() => setShowSearch(true)}>
              <SearchIcon />
            </IconButton>
          </Tooltip>
        </div>
      )}

      {/* kompakte InfoCard unten rechts */}
      <div className='map-overlay bottom-right'>
        <InfoCard dya={selectedDya} onClose={handleInfoCardClose} />
      </div>

      {/* Aufgabenliste für den Bereich */}
      <div className='map-overlay top-left' style={{ maxWidth: 360 }}>
        <Paper elevation={1} sx={{ p: 1.5, maxHeight: 220, overflowY: 'auto' }}>
          <Typography variant='subtitle2' gutterBottom>
            <Trans>Aufgaben im Bereich</Trans> ({filteredDyas.length})
          </Typography>
          {filteredDyas.length === 0 ? (
            <Typography variant='body2' color='textSecondary'>
              <Trans>Keine Aufgaben verfügbar.</Trans>
            </Typography>
          ) : (
            <List dense disablePadding>
              {visibleTasks.map((task, idx) => (
                <React.Fragment key={task.id}>
                  <ListItem disableGutters>
                    <ListItemText
                      primary={task.dya_text || `ID ${task.id}`}
                      secondary={task.type}
                    />
                  </ListItem>
                  {idx < visibleTasks.length - 1 && <Divider component='li' />}
                </React.Fragment>
              ))}
            </List>
          )}
          {filteredDyas.length > visibleTasks.length && (
            <Typography variant='caption' color='textSecondary'>
              +{filteredDyas.length - visibleTasks.length}{' '}
              <Trans>weitere Aufgaben auf der Karte</Trans>
            </Typography>
          )}
        </Paper>
      </div>
    </div>
  );
};

const ResizeInvalidator: React.FC<{ version: number }> = ({ version }) => {
  const map = useMap();
  useEffect(() => {
    map.invalidateSize();
  }, [map, version]);
  return null;
};

export default MapCard;