"use client";

import { Loader2 } from "lucide-react";
import { useState, useEffect } from "react";

interface RescheduleLoadingOverlayProps {
  isVisible: boolean;
  lang: "en" | "ar";
}

export default function RescheduleLoadingOverlay({
  isVisible,
  lang,
}: RescheduleLoadingOverlayProps) {
  const isAr = lang === "ar";
  const [messageIndex, setMessageIndex] = useState(0);

  const messages = [
    isAr ? "جاري تحديث الموعد..." : "Updating appointment...",
    isAr ? "جاري المزامنة مع التقويم..." : "Syncing with calendar...",
    isAr ? "أوشكنا على الانتهاء..." : "Almost done...",
  ];

  // Progress through messages
  useEffect(() => {
    if (!isVisible) {
      setMessageIndex(0);
      return;
    }

    // Show first message immediately
    setMessageIndex(0);

    // Progress to second message after 1s
    const timer1 = setTimeout(() => {
      setMessageIndex(1);
    }, 1000);

    // Progress to third message after 3s
    const timer2 = setTimeout(() => {
      setMessageIndex(2);
    }, 3000);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
    };
  }, [isVisible]);

  if (!isVisible) return null;

  return (
    <div
      className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-slate-900/70 backdrop-blur-sm animate-fadeIn"
      dir={isAr ? "rtl" : "ltr"}
    >
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-sm w-full text-center space-y-6">
        {/* Spinner */}
        <div className="flex justify-center">
          <div className="relative">
            <Loader2 className="w-16 h-16 text-violet-600 animate-spin" />
            <div className="absolute inset-0 w-16 h-16 rounded-full border-4 border-violet-200 opacity-25" />
          </div>
        </div>

        {/* Progressive Message */}
        <div className="space-y-2">
          <p className="text-lg font-semibold text-slate-900 animate-pulse">
            {messages[messageIndex]}
          </p>

          {/* Progress Dots */}
          <div className="flex items-center justify-center gap-2 pt-2">
            {[0, 1, 2].map((i) => (
              <div
                key={i}
                className={`h-2 rounded-full transition-all duration-300 ${
                  i <= messageIndex ? "w-8 bg-violet-600" : "w-2 bg-slate-300"
                }`}
              />
            ))}
          </div>
        </div>

        {/* Helper Text */}
        <p className="text-xs text-slate-500">
          {isAr
            ? "يرجى عدم إغلاق هذه النافذة"
            : "Please do not close this window"}
        </p>
      </div>
    </div>
  );
}