import { Button } from "../ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "../ui/tooltip";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { RotateCw, RotateCcw, Navigation2 } from "lucide-react";

export type ViewOrientation = 
  | "axial" 
  | "coronal" 
  | "sagittal"
  | "rotate-cw"
  | "rotate-ccw"
  | "anterior"
  | "posterior"
  | "left-lateral"
  | "right-lateral"
  | "superior"
  | "inferior";

export type Active2DView = "axial" | "coronal" | "sagittal" | null;

interface ViewRotationControlsProps {
  onRotate: (orientation: ViewOrientation) => void;
  onSelectView?: (view: Active2DView) => void;
  currentOrientation?: ViewOrientation;
  activeView?: Active2DView;
}

const twoDViews: { 
  id: Active2DView; 
  label: string; 
  description: string;
}[] = [
  { id: "axial", label: "Axial", description: "Head to toe view" },
  { id: "coronal", label: "Coronal", description: "Front to back view" },
  { id: "sagittal", label: "Sagittal", description: "Left to right view" },
];

export const ViewRotationControls = ({
  onRotate,
  onSelectView,
  currentOrientation,
  activeView,
}: ViewRotationControlsProps) => {
  return (
    <div className="flex items-center gap-2">
      {/* 2D View Selection Dropdown */}
      <DropdownMenu>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm" className="gap-2">
                <Navigation2 className="w-4 h-4" />
                <span className="hidden sm:inline">
                  {activeView 
                    ? twoDViews.find(v => v.id === activeView)?.label 
                    : "Select View"}
                </span>
              </Button>
            </DropdownMenuTrigger>
          </TooltipTrigger>
          <TooltipContent>Select 2D View to Rotate</TooltipContent>
        </Tooltip>
        <DropdownMenuContent align="start" className="w-56">
          <DropdownMenuLabel>2D Views</DropdownMenuLabel>
          {twoDViews.map((view) => (
            <DropdownMenuItem
              key={view.id}
              onClick={() => {
                onSelectView?.(view.id);
                onRotate(view.id as ViewOrientation);
              }}
              className={activeView === view.id ? "bg-accent" : ""}
            >
              <div className="flex flex-col">
                <span className="font-medium">{view.label}</span>
                <span className="text-xs text-muted-foreground">
                  {view.description}
                </span>
              </div>
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      {/* Clockwise Rotation Buttons */}
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            onClick={() => onRotate("rotate-ccw")}
            disabled={!activeView}
            className="gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            <span className="hidden sm:inline">CCW</span>
          </Button>
        </TooltipTrigger>
        <TooltipContent>Rotate Counter-Clockwise</TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="outline"
            size="sm"
            onClick={() => onRotate("rotate-cw")}
            disabled={!activeView}
            className="gap-2"
          >
            <RotateCw className="w-4 h-4" />
            <span className="hidden sm:inline">CW</span>
          </Button>
        </TooltipTrigger>
        <TooltipContent>Rotate Clockwise</TooltipContent>
      </Tooltip>
    </div>
  );
};