import { Button, Space, Tooltip } from 'antd';
import {
  PlusOutlined,
  AimOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  HomeOutlined,
  ReloadOutlined,
  DragOutlined,
} from '@ant-design/icons';

interface Props {
  addMode: boolean;
  onToggleAddMode: () => void;
  moveMode: boolean;
  onCancelMoveMode: () => void;
  showStartLocation: boolean;
  onToggleStartLocation: () => void;
  isFullscreen: boolean;
  onToggleFullscreen: () => void;
  onGeolocate: () => void;
  onRefresh: () => void;
  autoRefresh: boolean;
  onToggleAutoRefresh: () => void;
}

export default function MapControls({
  addMode,
  onToggleAddMode,
  moveMode,
  onCancelMoveMode,
  showStartLocation,
  onToggleStartLocation,
  isFullscreen,
  onToggleFullscreen,
  onGeolocate,
  onRefresh,
  autoRefresh,
  onToggleAutoRefresh,
}: Props) {
  return (
    <div
      style={{
        position: 'absolute',
        top: 10,
        right: 10,
        zIndex: 1000,
        background: 'rgba(26, 16, 37, 0.92)',
        borderRadius: 8,
        padding: 6,
        backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.12)',
      }}
    >
      <Space direction="vertical" size={4}>
        <Tooltip title={addMode ? 'Cancel Add' : 'Add Location'} placement="left">
          <Button
            type={addMode ? 'primary' : 'text'}
            icon={<PlusOutlined />}
            size="small"
            onClick={onToggleAddMode}
            style={{ width: 32, height: 32 }}
          />
        </Tooltip>
        {moveMode && (
          <Tooltip title="Cancel Move" placement="left">
            <Button
              type="primary"
              danger
              icon={<DragOutlined />}
              size="small"
              onClick={onCancelMoveMode}
              style={{ width: 32, height: 32 }}
            />
          </Tooltip>
        )}
        <Tooltip title="My Location" placement="left">
          <Button
            type="text"
            icon={<AimOutlined />}
            size="small"
            onClick={onGeolocate}
            style={{ width: 32, height: 32 }}
          />
        </Tooltip>
        <Tooltip title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'} placement="left">
          <Button
            type="text"
            icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
            size="small"
            onClick={onToggleFullscreen}
            style={{ width: 32, height: 32 }}
          />
        </Tooltip>
        <Tooltip title={showStartLocation ? 'Hide Start' : 'Show Start'} placement="left">
          <Button
            type={showStartLocation ? 'primary' : 'text'}
            icon={<HomeOutlined />}
            size="small"
            onClick={onToggleStartLocation}
            style={{ width: 32, height: 32 }}
          />
        </Tooltip>
        <Tooltip title={autoRefresh ? 'Auto-refresh ON' : 'Refresh'} placement="left">
          <Button
            type={autoRefresh ? 'primary' : 'text'}
            icon={<ReloadOutlined />}
            size="small"
            onClick={onRefresh}
            onDoubleClick={onToggleAutoRefresh}
            style={{ width: 32, height: 32 }}
          />
        </Tooltip>
      </Space>
    </div>
  );
}
