import type React from "react"
import {
  Dialog,
  DialogContent,
  DialogOverlay,
  DialogPortal,
  DialogClose,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogOverlay,
} from "@/components/ui/alert-dialog"
import { useRsi } from "../hooks/useRsi"
import { useState, useCallback } from "react"

type Props = {
  children: React.ReactNode
  isOpen: boolean
  onClose: () => void
}

export const ModalWrapper = ({ children, isOpen, onClose }: Props) => {
  const { rtl, translations } = useRsi()
  const [showCloseAlert, setShowCloseAlert] = useState(false)
  
  // Create a handler that resets scroll positions before closing
  const handleClose = useCallback(() => {
    // Reset all scroll positions in the dialog
    const scrollContainers = document.querySelectorAll('.overflow-auto, .overflow-scroll');
    scrollContainers.forEach(container => {
      if (container instanceof HTMLElement) {
        // Reset scroll position to top-left
        container.scrollTop = 0;
        container.scrollLeft = 0;
      }
    });
    
    // Call the original onClose handler
    onClose();
  }, [onClose]);
  
  return (
    <>
      <Dialog open={isOpen} onOpenChange={() => setShowCloseAlert(true)} modal>
        <DialogPortal>
          <DialogOverlay className="bg-background/80 backdrop-blur-sm" />
          <DialogContent
            onEscapeKeyDown={(e) => {
              e.preventDefault()
              setShowCloseAlert(true)
            }}
            onPointerDownOutside={(e) => e.preventDefault()}
            className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-[calc(100%-2rem)] h-[calc(100%-2rem)] max-w-[100vw] max-h-[100vh] flex flex-col overflow-hidden rounded-lg border bg-background p-0 shadow-lg sm:w-[calc(100%-3rem)] sm:h-[calc(100%-3rem)] md:w-[calc(100%-4rem)] md:h-[calc(100%-4rem)]"
          >
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <DialogClose className="absolute right-4 top-4" onClick={(e) => {
                  e.preventDefault()
                  setShowCloseAlert(true)
                }} />
              </AlertDialogTrigger>
            </AlertDialog>
            <div dir={rtl ? "rtl" : "ltr"} className="flex-1 overflow-auto">
              {children}
            </div>
          </DialogContent>
        </DialogPortal>
      </Dialog>

      <AlertDialog open={showCloseAlert} onOpenChange={setShowCloseAlert}>
        <AlertDialogPortal>
          <AlertDialogOverlay className="z-[1400]" />
          <AlertDialogContent className="z-[1500]">
            <AlertDialogHeader>
              <AlertDialogTitle>
                {translations.alerts.confirmClose.headerTitle}
              </AlertDialogTitle>
              <AlertDialogDescription>
                {translations.alerts.confirmClose.bodyText}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel onClick={() => setShowCloseAlert(false)}>
                {translations.alerts.confirmClose.cancelButtonTitle}
              </AlertDialogCancel>
              <AlertDialogAction onClick={handleClose}>
                {translations.alerts.confirmClose.exitButtonTitle}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogPortal>
      </AlertDialog>
    </>
  )
}
