import React from 'react';
import {
  Hexagon,
  MousePointer2,
  Circle as CircleIcon,
  Square,
  type LucideIcon,
} from 'lucide-react';
import { cn } from '../../shared/utils';
import { Button } from '../button';
import { mapOverlayPositionClasses } from '../map/map-overlay-position';
import type { MapDrawMode } from '../map/use-map-drawing';
import type { MapOverlayPosition } from '../map/map.types';

export interface MapDrawToolbarProps extends Omit<
  React.HTMLAttributes<HTMLDivElement>,
  'onChange'
> {
  /** @default ['polygon', 'circle'] */
  modes?: MapDrawMode[];
  /** The armed mode, or `null` when the tool is idle. */
  active: MapDrawMode | null;
  onChange: (mode: MapDrawMode | null) => void;
  labels?: Partial<Record<MapDrawMode | 'idle', string>>;
  /** @default 'overlay' */
  variant?: 'overlay' | 'inline';
  /** @default 'top-left' */
  position?: MapOverlayPosition;
  /** @default "Drawing tools" */
  ariaLabel?: string;
}

const MODE_ICON: Record<MapDrawMode, LucideIcon> = {
  polygon: Hexagon,
  circle: CircleIcon,
  rectangle: Square,
};

const DEFAULT_LABELS: Record<MapDrawMode | 'idle', string> = {
  idle: 'Select',
  polygon: 'Draw polygon',
  circle: 'Draw circle',
  rectangle: 'Draw rectangle',
};

/**
 * Arms and disarms the geofence drawing tool.
 *
 * @description
 * Includes an explicit idle button rather than relying on the user clicking the
 * armed tool again — a drawing mode nobody can see they are in is how stray
 * shapes get created.
 *
 * @ai-rules
 * 1. Keep `active` in the parent and pass it to both this toolbar and `<Map drawing>`.
 * 2. Set it back to `null` inside `onComplete`, or the next click starts another shape.
 * 3. Pair the completed shape with `pointsInShape` to answer containment questions.
 */
export const MapDrawToolbar = React.forwardRef<HTMLDivElement, MapDrawToolbarProps>(
  (
    {
      modes = ['polygon', 'circle'],
      active,
      onChange,
      labels,
      variant = 'overlay',
      position = 'top-left',
      ariaLabel = 'Drawing tools',
      className,
      ...props
    },
    ref
  ) => {
    const labelFor = (key: MapDrawMode | 'idle') => labels?.[key] ?? DEFAULT_LABELS[key];

    return (
      <div
        ref={ref}
        role="group"
        aria-label={ariaLabel}
        className={cn(
          'flex items-center gap-1 rounded-[var(--radius-card)] border border-border bg-background/90 p-1 shadow-sm backdrop-blur-sm',
          variant === 'overlay' && mapOverlayPositionClasses(position),
          className
        )}
        {...props}
      >
        <Button
          type="button"
          size="icon"
          variant={active === null ? 'default' : 'ghost'}
          aria-pressed={active === null}
          aria-label={labelFor('idle')}
          title={labelFor('idle')}
          className="size-8"
          onClick={() => onChange(null)}
        >
          <MousePointer2 aria-hidden="true" />
        </Button>

        {modes.map(mode => {
          const Icon = MODE_ICON[mode];
          const isActive = active === mode;

          return (
            <Button
              key={mode}
              type="button"
              size="icon"
              variant={isActive ? 'default' : 'ghost'}
              aria-pressed={isActive}
              aria-label={labelFor(mode)}
              title={labelFor(mode)}
              className="size-8"
              onClick={() => onChange(isActive ? null : mode)}
            >
              <Icon aria-hidden={true} />
            </Button>
          );
        })}
      </div>
    );
  }
);
MapDrawToolbar.displayName = 'MapDrawToolbar';