import { useEffect } from "react";
import { X } from "lucide-react";
import { PartnerLoginCard } from "./PartnerLoginCard";

export function PartnerLoginDialog({
  open,
  onClose,
  initialStep = 0,
}: {
  open: boolean;
  onClose: () => void;
  initialStep?: 0 | 1 | 2;
}) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="Partner login"
      className="fixed inset-0 z-[110] flex items-center justify-center px-4 py-8 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200"
      onClick={onClose}
    >
      <div className="relative w-full max-w-md" onClick={(e) => e.stopPropagation()}>
        <button
          type="button"
          aria-label="Close"
          onClick={onClose}
          className="absolute -top-3 -right-3 z-10 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white text-gray-900 border border-gray-200 shadow-lg hover:bg-gray-50"
        >
          <X className="h-4 w-4" />
        </button>
        <div className="rounded-2xl bg-white shadow-[0_40px_120px_-30px_rgba(0,0,0,0.25)]">
          <PartnerLoginCard
            key={initialStep}
            initialStep={initialStep}
            className="max-h-[85vh] overflow-y-auto rounded-2xl"
          />
        </div>
      </div>
    </div>
  );
}