"use client";

import { useCallback, useRef, useEffect, MouseEventHandler } from "react";
import { useRouter } from "next/navigation";
import { LuX } from "react-icons/lu";

export default function Modal({ children }: { children: React.ReactNode }) {
  const overlay = useRef(null);
  const wrapper = useRef(null);
  const router = useRouter();

  const onDismiss = useCallback(() => {
    router.back();
  }, [router]);

  const onClick: MouseEventHandler = useCallback(
    (e) => {
      if (e.target === overlay.current || e.target === wrapper.current) {
        if (onDismiss) onDismiss();
      }
    },
    [onDismiss, overlay, wrapper]
  );

  const onKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") onDismiss();
    },
    [onDismiss]
  );

  useEffect(() => {
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      ref={overlay}
      // bg-black/60 -> bg-overlay
      className="fixed z-50 left-0 right-0 top-0 bottom-0 mx-auto bg-overlay p-4 sm:p-8 flex items-center justify-center"
      onClick={onClick}
    >
      {/* CONTENEDOR DEL MODAL CON ANCHO MÁXIMO Y SCROLL */}
      <div
        ref={wrapper}
        className="w-full max-w-4xl max-h-[90vh] flex flex-col"
      >
        {/* bg-white -> bg-background */}
        <div className="bg-background rounded-xl shadow-2xl relative flex flex-col">
          <button
            onClick={onDismiss}
            // text-gray-400 -> text-text-muted
            // hover:bg-gray-100 -> hover:bg-background-alt
            className="absolute top-3 right-3 p-2 text-text-muted hover:bg-background-alt rounded-full z-10"
          >
            <LuX />
          </button>
          {/* ÁREA DE CONTENIDO CON SCROLL INTERNO */}
          <div className="overflow-y-auto">{children}</div>
        </div>
      </div>
    </div>
  );
}