Termix/src/ui/desktop/apps/features/terminal/SudoPasswordPopup.tsx

import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { KeyRound } from "lucide-react";
import { Button } from "@/components/ui/button.tsx";

interface SudoPasswordPopupProps {
  isOpen: boolean;
  hostPassword: string;
  backgroundColor: string;
  onConfirm: (password: string) => void;
  onDismiss: () => void;
}

export function SudoPasswordPopup({
  isOpen,
  hostPassword,
  backgroundColor,
  onConfirm,
  onDismiss,
}: SudoPasswordPopupProps) {
  const { t } = useTranslation();

  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        onConfirm(hostPassword);
      } else if (e.key === "Escape") {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        onDismiss();
      }
    };

    window.addEventListener("keydown", handleKeyDown, true);
    return () => window.removeEventListener("keydown", handleKeyDown, true);
  }, [isOpen, onConfirm, onDismiss, hostPassword]);

  if (!isOpen) return null;

  return (
    <div
      className="absolute bottom-4 right-4 z-50 backdrop-blur-sm border border-border rounded-lg shadow-lg p-4 min-w-[280px]"
      style={{ backgroundColor: backgroundColor }}
    >
      <div className="flex items-center gap-3 mb-3">
        <div className="p-2 bg-primary/10 rounded-full">
          <KeyRound className="h-5 w-5 text-primary" />
        </div>
        <div>
          <h4 className="font-medium text-sm">
            {t("terminal.sudoPasswordPopupTitle", "Insert password?")}
          </h4>
          <p className="text-xs text-muted-foreground">
            {t(
              "terminal.sudoPasswordPopupHint",
              "Press Enter to insert, Esc to dismiss",
            )}
          </p>
        </div>
      </div>
      <div className="flex gap-2 justify-end">
        <Button variant="ghost" size="sm" onClick={onDismiss}>
          {t("terminal.sudoPasswordPopupDismiss", "Dismiss")}
        </Button>
        <Button
          variant="default"
          size="sm"
          onClick={() => onConfirm(hostPassword)}
        >
          {t("terminal.sudoPasswordPopupConfirm", "Insert")}
        </Button>
      </div>
    </div>
  );
}