import { useEffect } from "react";
import { Button } from "@/ui/button";
import Keybinding from "@/ui/keybinding";
import { cn } from "@/utils/cn";
import { useKeybindingRecorder } from "../hooks/use-keybinding-recorder";

interface KeybindingInputProps {
  commandId: string;
  value?: string;
  onSave: (keybinding: string) => void;
  onCancel: () => void;
  autoFocus?: boolean;
}

export function KeybindingInput({
  commandId,
  value,
  onSave,
  onCancel,
  autoFocus = true,
}: KeybindingInputProps) {
  const { isRecording, keys, keybindingString, startRecording, stopRecording, reset } =
    useKeybindingRecorder(commandId);

  useEffect(() => {
    if (autoFocus) {
      startRecording();
    }
  }, [autoFocus, startRecording]);

  useEffect(() => {
    if (!isRecording && keybindingString) {
      onSave(keybindingString);
      reset();
    }
  }, [isRecording, keybindingString, onSave, reset]);

  const handleClick = () => {
    if (!isRecording) {
      startRecording();
    }
  };

  const handleCancel = () => {
    stopRecording();
    reset();
    onCancel();
  };

  return (
    <div
      className={cn(
        "flex h-7 w-full min-w-0 items-center justify-between gap-1 rounded border px-2",
        isRecording ? "border-accent bg-accent/5" : "border-border bg-secondary-bg",
      )}
      onClick={handleClick}
      onKeyDown={(e) => {
        if (e.key === "Escape") {
          e.preventDefault();
          e.stopPropagation();
          handleCancel();
        }
      }}
      role="textbox"
      aria-label="Record keybinding"
      tabIndex={0}
    >
      <div className="min-w-0 flex-1 truncate">
        {keys.length > 0 ? (
          <Keybinding keys={keys} />
        ) : (
          <span className="ui-font ui-text-xs text-text-lighter">
            {isRecording ? "Press keys..." : value || "Not assigned"}
          </span>
        )}
      </div>
      {isRecording && (
        <Button
          type="button"
          variant="ghost"
          size="xs"
          onClick={(e) => {
            e.stopPropagation();
            handleCancel();
          }}
          className="ui-text-xs shrink-0 px-1 text-text-lighter hover:bg-transparent hover:text-text"
          aria-label="Cancel recording"
        >
          ESC
        </Button>
      )}
    </div>
  );
}
