"use client";

import { useEffect, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import { Button } from "@/components/ui";
import { IconAlertTriangle, IconCheckCircle } from "@/components/icons";

export interface ConfirmOptions {
  message: string;
  title?: string;
  /** red confirm button — for delete/destructive actions */
  danger?: boolean;
  confirmLabel?: string;
  cancelLabel?: string;
}

type Listener = (opts: ConfirmOptions | null) => void;

let listener: Listener | null = null;
let resolver: ((ok: boolean) => void) | null = null;

/** Themed replacement for window.confirm — resolves when the user picks. */
export function emsConfirm(opts: ConfirmOptions): Promise<boolean> {
  // no host mounted (e.g. tests) → fall back to the native dialog
  if (!listener) return Promise.resolve(window.confirm(opts.message));
  return new Promise((resolve) => {
    const pending = resolver;
    resolver = resolve;
    pending?.(false); // dismiss any pending dialog
    listener?.(opts);
  });
}

function settle(ok: boolean) {
  resolver?.(ok);
  resolver = null;
  listener?.(null);
}

/** Mount once (root layout) — renders the themed dialog on demand. */
export function ConfirmDialogHost() {
  const { t } = useLang();
  const [opts, setOpts] = useState<ConfirmOptions | null>(null);

  useEffect(() => {
    listener = setOpts;
    return () => {
      listener = null;
    };
  }, []);

  useEffect(() => {
    if (!opts) return;
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") settle(false);
      if (e.key === "Enter") settle(true);
    };
    window.addEventListener("keydown", handler);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", handler);
      document.body.style.overflow = prev;
    };
  }, [opts]);

  if (!opts) return null;

  return (
    <div className="ems-modal ems-modal-opening ems-confirm">
      <div className="ems-modal-backdrop" onClick={() => settle(false)} />
      <div className="modal-dialog modal-dialog-centered" style={{ margin: 0, maxWidth: 440 }}>
        <div className="modal-content">
          <div className="modal-body">
            <div className="ems-confirm-icon">
              {opts.danger ? (
                <IconAlertTriangle className="svg-24" />
              ) : (
                <IconCheckCircle className="svg-24" />
              )}
            </div>
            {opts.title && <h5 className="f-w-700 mb-1">{opts.title}</h5>}
            <p className="mb-0 ems-fs-13 text-muted">{opts.message}</p>
          </div>
          <div className="modal-footer border-0 pt-0">
            <Button variant="secondary" onClick={() => settle(false)}>
              {opts.cancelLabel ?? t.common.cancel}
            </Button>
            <Button variant={opts.danger ? "danger" : "primary"} onClick={() => settle(true)}>
              {opts.confirmLabel ?? t.common.confirm}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}