import { X } from "lucide-react";
import type { PeqEqUi } from "../constants";

type BandParamDialogMeta = {
  title: string;
  hint: string;
  placeholder: string;
  inputMode: "decimal" | "numeric" | "text";
  rangeMessages: { invalid: string; outOfRange: string };
};

export function BandParamDialog({
  open,
  meta,
  input,
  onInputChange,
  onConfirm,
  onClose,
  eqUi,
}: {
  open: boolean;
  meta: BandParamDialogMeta | null;
  input: string;
  onInputChange: (v: string) => void;
  onConfirm: () => void;
  onClose: () => void;
  eqUi: PeqEqUi;
}) {
  if (!open || !meta) return null;
  return (
    <div
      className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
      onClick={onClose}
    >
      <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-2">
          <h3 className="text-[18px] font-semibold leading-tight text-white/90">{meta.title}</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>
        <p className="mb-4 text-[13px] leading-relaxed text-white/45">{meta.hint}</p>
        <input
          value={input}
          onChange={(e) => onInputChange(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              onConfirm();
            }
          }}
          inputMode={meta.inputMode}
          placeholder={meta.placeholder}
          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-[#00FFF6]/40"
          autoFocus
        />
        <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={onConfirm}
          >
            {eqUi.confirmButton ?? eqUi.save}
          </button>
        </div>
      </div>
    </div>
  );
}