"use client";

import { Loader2, CheckCircle, X } from "lucide-react";
import { useRegisterModal, ModalPortal } from "./modal/ModalStackProvider";
import { useEffect, useRef } from "react";
import { Button } from "./ui/button";

interface LoadingModalProps {
  isOpen: boolean;
  action?: string;
  logs?: string[];
  isComplete?: boolean;
  title?: string;
  onClose?: () => void;
}

export function LoadingModal({
  isOpen,
  action,
  logs = [],
  isComplete = false,
  title,
  onClose,
}: LoadingModalProps) {
  // Allow dismissing with ESC only when complete, prevent during running
  const zIndex = useRegisterModal(isOpen, {
    id: "loading-modal",
    allowEscape: isComplete,
    onClose: onClose ?? (() => null),
  });
  const logsEndRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when new logs arrive
  useEffect(() => {
    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [logs]);

  if (!isOpen) return null;

  return (
    <ModalPortal>
      <div
        className="fixed inset-0 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
        style={{ zIndex }}
      >
        <div className="bg-card border-border relative flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg border p-8 shadow-xl">
          {/* Close button - only show when complete */}
          {isComplete && onClose && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onClose}
              className="absolute top-4 right-4 h-6 w-6 p-0"
            >
              <X className="h-4 w-4" />
            </Button>
          )}

          <div className="flex flex-col items-center space-y-4">
            <div className="relative">
              {isComplete ? (
                <CheckCircle className="text-success h-12 w-12" />
              ) : (
                <>
                  <Loader2 className="text-primary h-12 w-12 animate-spin" />
                  <div className="border-primary/20 absolute inset-0 animate-pulse rounded-full border-2"></div>
                </>
              )}
            </div>

            {/* Action text - displayed prominently */}
            {action && (
              <p className="text-foreground text-base font-medium">{action}</p>
            )}

            {/* Static title text */}
            {title && <p className="text-muted-foreground text-sm">{title}</p>}

            {/* Log output */}
            {logs.length > 0 && (
              <div className="bg-card border-border text-chart-2 terminal-output max-h-[60vh] w-full overflow-y-auto rounded-lg border p-4 font-mono text-xs">
                {logs.map((log, index) => (
                  <div
                    key={index}
                    className="mb-1 break-words whitespace-pre-wrap"
                  >
                    {log}
                  </div>
                ))}
                <div ref={logsEndRef} />
              </div>
            )}

            {!isComplete && (
              <div className="flex space-x-1">
                <div className="bg-primary h-2 w-2 animate-bounce rounded-full"></div>
                <div
                  className="bg-primary h-2 w-2 animate-bounce rounded-full"
                  style={{ animationDelay: "0.1s" }}
                ></div>
                <div
                  className="bg-primary h-2 w-2 animate-bounce rounded-full"
                  style={{ animationDelay: "0.2s" }}
                ></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </ModalPortal>
  );
}
