import { useRef } from "preact/hooks";
import { useFocusTrap } from "../utils/useFocusTrap.ts";

export type ConfirmAction = "approve" | "reject";

interface LeaseApprovalConfirmDialogProps {
  open: boolean;
  action: ConfirmAction;
  leaseId: string;
  onConfirm: () => void;
  onCancel: () => void;
}

const MESSAGES: Record<ConfirmAction, string> = {
  approve:
    "Are you sure you want to approve this lease? This will make the lease active and the tenant will be able to access the property.",
  reject: "Are you sure you want to reject this lease request?",
};

const CONFIRM_LABELS: Record<ConfirmAction, string> = {
  approve: "Approve",
  reject: "Reject",
};

export default function LeaseApprovalConfirmDialog({
  open,
  action,
  onConfirm,
  onCancel,
}: LeaseApprovalConfirmDialogProps) {
  const modalRef = useRef<HTMLDivElement>(null);
  useFocusTrap(open, modalRef);

  if (!open) return null;

  return (
    <div
      ref={modalRef}
      class="theme-dialog-overlay"
      role="dialog"
      aria-modal="true"
      aria-labelledby="lease-confirm-title"
    >
      <div
        class="theme-dialog-container flex flex-col gap-4"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 id="lease-confirm-title" class="theme-dialog-title">
          {action === "approve" ? "Approve lease" : "Reject lease request"}
        </h2>
        <p class="text-sm opacity-90" style={{ color: "var(--theme-muted)" }}>
          {MESSAGES[action]}
        </p>
        <div class="flex gap-3 justify-end mt-2">
          <button
            type="button"
            class="theme-dialog-cancel-button"
            onClick={onCancel}
          >
            Cancel
          </button>
          <button
            type="button"
            class={action === "reject"
              ? "theme-dialog-submit-button theme-dialog-submit-button--danger"
              : "theme-dialog-submit-button"}
            onClick={onConfirm}
          >
            {CONFIRM_LABELS[action]}
          </button>
        </div>
      </div>
    </div>
  );
}