import { useEffect, useState } from "react";

type ResetLinkModalProps = {
  variant?: "invite" | "reset";
  email: string;
  resetLink: string;
  expiresAt: string;
  onClose: () => void;
};

export default function ResetLinkModal({
  variant = "reset",
  email,
  resetLink,
  expiresAt,
  onClose
}: ResetLinkModalProps) {
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [onClose]);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(resetLink);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback: select the field so the user can copy manually.
      setCopied(false);
    }
  };

  const isInvite = variant === "invite";

  return (
    <div className="modal-backdrop" role="presentation" onClick={onClose}>
      <div
        className="modal-card"
        role="dialog"
        aria-modal="true"
        aria-labelledby="reset-link-title"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="modal-header">
          <div>
            <h2 id="reset-link-title">{isInvite ? "Mailbox setup link" : "Temporary reset link"}</h2>
            <p>
              {isInvite
                ? <>Share this one-time setup link for <strong>{email}</strong>. The mailbox will only be created after the user chooses a password.</>
                : <>No email was sent for <strong>{email}</strong>. Share this one-time link yourself.</>}
            </p>
          </div>
          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
            ✕
          </button>
        </div>

        <div className="stack">
          <div className="link-field">
            <label className="field">
              <span>{isInvite ? "Setup link" : "One-time link"}</span>
              <div className="link-row">
                <input type="text" readOnly value={resetLink} onFocus={(e) => e.target.select()} />
                <button type="button" className="ghost-button" onClick={handleCopy}>
                  {copied ? "Copied ✓" : "Copy"}
                </button>
              </div>
            </label>
            <span className="copy-feedback" aria-live="polite">{copied ? "Link copied to clipboard." : ""}</span>
          </div>

          <p className="modal-copy">
            This link expires at {expiresAt} and becomes invalid after first use.
          </p>

          <div className="modal-actions">
            <button type="button" className="primary-button" onClick={onClose}>
              Done
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}