import { useState } from 'react';
import { Button, Badge } from 'antd';
import {
  AimOutlined,
  NodeIndexOutlined,
  ArrowRightOutlined,
  PlusOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  MenuOutlined,
} from '@ant-design/icons';

interface ToolbarButtonProps {
  icon: React.ReactNode;
  onClick: () => void;
  label: string;
  disabled?: boolean;
  type?: 'default' | 'primary' | 'text' | 'link' | 'dashed';
  ghost?: boolean;
  children?: React.ReactNode;
}

function ToolbarButton({
  icon,
  onClick,
  label,
  disabled,
  type = 'default',
  ghost,
  children,
}: ToolbarButtonProps) {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <Button
      type={type}
      icon={icon}
      onClick={onClick}
      disabled={disabled}
      size="middle"
      ghost={ghost}
      aria-label={label}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      onMouseLeave={() => setIsPressed(false)}
      onTouchStart={() => setIsPressed(true)}
      onTouchEnd={() => setIsPressed(false)}
      style={{
        transform: isPressed ? 'scale(0.95)' : 'scale(1)',
        transition: 'transform 0.1s ease',
      }}
    >
      {children}
    </Button>
  );
}

interface CanvassBottomToolbarProps {
  visitedCount: number;
  totalCount: number;
  routeVisible: boolean;
  gpsFollowing: boolean;
  onNextDoor: () => void;
  onToggleRoute: () => void;
  onToggleGps: () => void;
  sessionActive?: boolean;
  onAddAtCenter?: () => void;
  fullscreen?: boolean;
  onToggleFullscreen?: () => void;
  onMenuOpen?: () => void;
  bottomOffset?: number;
}

/**
 * Floating toolbar above the footer nav bar.
 */
export default function CanvassBottomToolbar({
  visitedCount,
  totalCount,
  routeVisible,
  gpsFollowing,
  onNextDoor,
  onToggleRoute,
  onToggleGps,
  sessionActive = true,
  onAddAtCenter,
  fullscreen,
  onToggleFullscreen,
  onMenuOpen,
  bottomOffset = 72,
}: CanvassBottomToolbarProps) {
  return (
    <div
      style={{
        position: 'absolute',
        bottom: `max(${bottomOffset}px, calc(${bottomOffset}px + env(safe-area-inset-bottom)))`,
        paddingBottom: 'env(safe-area-inset-bottom)',
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 1000,
        background: 'rgba(0,0,0,0.8)',
        borderRadius: 12,
        padding: '6px 10px',
        display: 'flex',
        alignItems: 'center',
        gap: 6,
      }}
    >
      {onMenuOpen && (
        <ToolbarButton
          type="default"
          icon={<MenuOutlined />}
          onClick={onMenuOpen}
          label="Open menu"
        />
      )}
      {sessionActive && (
        <>
          <ToolbarButton
            type="primary"
            icon={<ArrowRightOutlined />}
            onClick={onNextDoor}
            label="Next door"
          >
            Next
          </ToolbarButton>
          <ToolbarButton
            type={routeVisible ? 'primary' : 'default'}
            icon={<NodeIndexOutlined />}
            onClick={onToggleRoute}
            ghost={routeVisible}
            label="Toggle walking route"
          />
        </>
      )}
      <ToolbarButton
        type={gpsFollowing ? 'primary' : 'default'}
        icon={<AimOutlined />}
        onClick={onToggleGps}
        ghost={gpsFollowing}
        label="Toggle GPS following"
      />
      {onToggleFullscreen && (
        <ToolbarButton
          type={fullscreen ? 'primary' : 'default'}
          icon={fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          onClick={onToggleFullscreen}
          label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
        />
      )}
      {onAddAtCenter && (
        <ToolbarButton
          type="default"
          icon={<PlusOutlined />}
          onClick={onAddAtCenter}
          label="Add location at crosshair"
        />
      )}
      {sessionActive && (
        <Badge
          count={`${visitedCount}/${totalCount}`}
          style={{
            backgroundColor: visitedCount === totalCount && totalCount > 0 ? '#27ae60' : '#3498db',
            fontSize: 12,
          }}
          overflowCount={99}
        />
      )}
    </div>
  );
}
