import { X } from "lucide-react";
import type { PeqEqUi } from "../types";
import { PEQ_PRESET_NAME_MAX_LENGTH } from "../eqConstants";
import { clampPeqPresetName } from "../peqPresetName";
import { PeqPresetNameLengthHint } from "./PeqPresetNameLengthHint";

export function SaveBDialog({
  open,
  presetName,
  onNameChange,
  onSave,
  onClose,
  eqUi,
}: {
  open: boolean;
  presetName: string;
  onNameChange: (v: string) => void;
  onSave: () => void;
  onClose: () => void;
  eqUi: PeqEqUi;
}) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4">
      <div
        className="w-full max-w-[420px] rounded-[14px] p-5"
        style={{
          background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
          border: "1px solid rgba(255,255,255,0.12)",
          boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
        }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-[18px] font-semibold leading-tight text-white/90">{eqUi.saveBTitle}</h3>
          <button
            type="button"
            className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
            onClick={onClose}
            aria-label={eqUi.closeDrawer}
          >
            <X size={20} />
          </button>
        </div>

        <div>
          <input
            value={presetName}
            onChange={(e) => onNameChange(clampPeqPresetName(e.target.value))}
            maxLength={PEQ_PRESET_NAME_MAX_LENGTH}
            className="h-11 w-full rounded-[10px] border border-white/12 bg-[#15171b] px-3 text-[15px] text-white/90 outline-none placeholder:text-white/30 focus:border-white/15"
            autoFocus
          />
          <PeqPresetNameLengthHint value={presetName} />
        </div>

        <div className="mt-6 flex items-center justify-center gap-4 sm:gap-8">
          <button
            type="button"
            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-medium text-white/85 transition-colors bg-[#3f4349] hover:bg-[#4a4f56] active:scale-[0.98]"
            onClick={onClose}
          >
            {eqUi.cancel}
          </button>
          <button
            type="button"
            className="min-w-[112px] rounded-full px-5 py-2.5 text-[15px] font-semibold text-black transition-all bg-[#00FFF6] hover:brightness-95 active:scale-[0.98]"
            onClick={onSave}
          >
            {eqUi.save}
          </button>
        </div>
      </div>
    </div>
  );
}