import type { AppStore } from "@editor/store";
import type { MaskViewMode, ViewportState } from "@editor/state";
import type { BrushSettings, ToolId } from "@editor/tools";
import { BrushControls } from "./bottom-controls/BrushControls";
import { PanControls } from "./bottom-controls/PanControls";
import { TransformControls } from "./bottom-controls/TransformControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
import type { Rect } from "@core/geometry";
import type { TransformTarget } from "@editor/transform";
export type BottomControlsAction = "pan" | "zoom";

export type BottomControlsIslandProps = {
  viewport: ViewportState;
  visible: boolean;
  action: BottomControlsAction;
  activeTool: ToolId;
  brushSettings: BrushSettings;
  editingMask?: boolean;
  maskViewMode?: MaskViewMode;
  transformBounds?: Rect;
  transformTarget?: TransformTarget;
  brushHint?: string;
  dispatch: AppStore["dispatch"]; 
};

export function BottomControlsIsland({ viewport, visible, action, activeTool, brushSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
  const zoomPercent = Math.round(viewport.zoom * 100);
  const x = Math.round(viewport.center.x);
  const y = Math.round(viewport.center.y);

  return (
    <div
      aria-hidden={!visible}
      className={`flex h-20 min-w-96 items-center justify-center gap-4 rounded-full px-4 py-2 text-sm text-white backdrop-blur transition-all duration-200 ${
        visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
      }`}
    >
      {(activeTool === "brush" || activeTool === "eraser") && brushHint ? (
        <BrushHint tool={activeTool} hint={brushHint} />
      ) : activeTool === "brush" || activeTool === "eraser" ? (
        <BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />
      ) : transformBounds && transformTarget ? (
        <TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
      ) : action === "pan" ? (
        <PanControls x={x} y={y} />
      ) : (
        <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />
      )}
    </div>
  );
}

function BrushHint({ tool, hint }: { tool: "brush" | "eraser"; hint: string }) {
  return (
    <div className="flex items-center gap-3 px-4 text-center">
      <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-wide text-white/55">{tool}</span>
      <span className="max-w-[34rem] text-sm font-medium text-white/80">{hint}</span>
    </div>
  );
}