'use client'

import React, { useEffect, useState, useRef } from 'react'
import { AdvancedMarker, Pin } from '@vis.gl/react-google-maps'
import { MarkerClusterer } from '@googlemaps/markerclusterer'
import { Station } from '@/types/stationTypes'
// tap handler removed; rely on direct click/touch for immediacy

/**
 * Props for the StationMarker component
 */
interface StationMarkerProps {
  /** The charging station data */
  readonly station: Station
  /** Callback when marker is clicked */
  readonly onClick?: (station: Station) => void
  /** Whether this station is currently selected */
  readonly isSelected?: boolean
  /** Marker clusterer instance for grouping nearby markers */
  readonly clusterer?: MarkerClusterer | null
}

/**
 * Custom marker component for charging stations with improved design
 * 
 * Features:
 * - Larger, more visible markers
 * - Enhanced custom pin colors based on station status
 * - Smooth hover and selection animations
 * - Integration with marker clustering
 * - Better accessibility support
 * 
 * @example
 * ```tsx
 * <StationMarker
 *   station={station}
 *   onClick={(station) => setSelectedStation(station)}
 *   isSelected={selectedStation?.id === station.id}
 * />
 * ```
 */
export function StationMarker({ 
  station, 
  onClick, 
  isSelected = false,
  clusterer = null  
}: StationMarkerProps) {
  const [marker, setMarker] = useState<google.maps.marker.AdvancedMarkerElement | null>(null)

  // Get pin color based on station status
  const getPinColor = () => {
    if (station.online === false) return '#9CA3AF' // Gray for offline
    
    if (isSelected) return '#FF6B35' // Orange for selected
    
    // Check if any connector is available
    const hasAvailableConnector = station.connectors.some(
      connector => connector.status === 'Available'
    )
    
    if (hasAvailableConnector) return '#10B981' // Green for available
    
    // Check if any connector is charging
    const hasChargingConnector = station.connectors.some(
      connector => connector.status === 'Charging'
    )
    
    if (hasChargingConnector) return '#F59E0B' // Yellow for busy
    
    return '#EF4444' // Red for unavailable
  }

  // Get pin scale based on selection and status
  const getPinScale = () => {
    if (isSelected) return 1.6 // Larger when selected
    return 1.3 // Default larger size
  }

  // Get status text for accessibility
  const getStatusText = () => {
    if (station.online === false) return `${station.name} Offline `
    const availableCount = station.connectors.filter(
      connector => connector.status === 'Available'
    ).length
    
    const totalCount = station.connectors.length
    
    return `${station.name}: ${availableCount} of ${totalCount} connectors available`
  }

  // Handle marker click and unify pointer/touch for mobile immediate activation
  const triggerSelect = () => {
    onClick?.(station);
  };

  const handleClick = () => {
    triggerSelect();
  };

  const handleTouchStart: React.TouchEventHandler<HTMLButtonElement> = (e) => {
    // Single tap immediate selection; prevent delay
    e.stopPropagation();
    touchStartRef.current = {
      x: e.changedTouches[0].clientX,
      y: e.changedTouches[0].clientY,
      time: Date.now()
    };
  };
  const handleTouchEnd: React.TouchEventHandler<HTMLButtonElement> = (e) => {
    e.preventDefault();
    const start = touchStartRef.current;
    if (!start) { triggerSelect(); return; }
    const dx = Math.abs(e.changedTouches[0].clientX - start.x);
    const dy = Math.abs(e.changedTouches[0].clientY - start.y);
    const dt = Date.now() - start.time;
    if (dx < 10 && dy < 10 && dt < 600) {
      triggerSelect();
    }
  };
  const touchStartRef = useRef<{x:number;y:number;time:number}|null>(null);

  // Pointer fallback (mouse & stylus) for consistent tap detection
  const pointerDownRef = useRef<{x:number;y:number;time:number}|null>(null);
  const handlePointerDown: React.PointerEventHandler<HTMLButtonElement> = (e) => {
    pointerDownRef.current = { x: e.clientX, y: e.clientY, time: Date.now() };
  };
  const handlePointerUp: React.PointerEventHandler<HTMLButtonElement> = (e) => {
    const start = pointerDownRef.current;
    if (!start) return;
    const dx = Math.abs(e.clientX - start.x);
    const dy = Math.abs(e.clientY - start.y);
    const dt = Date.now() - start.time;
    if (dx < 6 && dy < 6 && dt < 500) {
      triggerSelect();
    }
  };

  // Add marker to clusterer when marker is created
  useEffect(() => {
    if (marker && clusterer) {
      // Attach station data to marker for cluster access
      (marker as any).station = station;
      clusterer.addMarker(marker);
      
      return () => {
        clusterer.removeMarker(marker);
      };
    }
  }, [marker, clusterer, station]);

  // Removed custom tap handler

  return (
    <AdvancedMarker
      ref={setMarker}
      position={{
        lat: station.location.latitude,
        lng: station.location.longitude
      }}
      onClick={handleClick}
      title={getStatusText()}
      className={`cursor-pointer transition-all duration-200 ${station.online ? 'hover:scale-110' : ''}`}
    >
      <button
        type="button"
        className="relative appearance-none bg-transparent p-0 m-0 border-0 cursor-pointer"
        aria-label={getStatusText()}
        onClick={handleClick}
  onTouchStart={handleTouchStart}
  onTouchEnd={handleTouchEnd}
  onPointerDown={handlePointerDown}
  onPointerUp={handlePointerUp}
        style={{ WebkitTapHighlightColor: 'transparent' }}
      >
        <Pin
          background={getPinColor()}
          borderColor="#FFFFFF"
          glyphColor="#FFFFFF"
          scale={getPinScale()}
        >
          {/* Enhanced charging bolt icon */}
          <svg
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="currentColor"
            className="text-white drop-shadow-sm"
          >
            <path d="M11.5 2L6.5 11H10V22L16.5 13H13L11.5 2Z" />
          </svg>
        </Pin>
        
        {/* Status indicator ring for selected state */}
        {isSelected && (
          <div className="absolute top-0 left-0 w-full h-full">
            <div className="w-full h-full rounded-full border-4 border-orange-400 opacity-60 animate-pulse" 
                 style={{ transform: 'scale(1.2)' }} />
          </div>
        )}
        
        {/* Availability indicator badge */}
        <div className={`
          absolute -top-2 -right-2 w-6 h-6 rounded-full border-2 border-white
          flex items-center justify-center text-xs font-bold text-white
          ${station.connectors.filter(c => c.status === 'Available').length > 0 
            ? 'bg-green-500' 
            : 'bg-red-500'
          }
        `}>
          {station.connectors.filter(c => c.status === 'Available').length}
        </div>
  </button>
    </AdvancedMarker>
  )
}

/**
 * Simple marker variant without custom clustering
 * Use this if you don't need clustering functionality
 */
export function SimpleStationMarker({ 
  station, 
  onClick, 
  isSelected = false 
}: Readonly<Omit<StationMarkerProps, 'clusterer'>>) {
  return (
    <StationMarker
      station={station}
      onClick={onClick}
      isSelected={isSelected}
      clusterer={null}
    />
  )
}