import { AlertCircle, CheckCircle2 } from "lucide-react";
import React, { useEffect, useState } from "react";

interface SyncLoaderProps {
  isVisible: boolean;
  progress: number; // 0-100
  total: number;
  processed: number;
  status: "running" | "completed" | "error";
  statusMessage?: string;
  title?: string;
  description?: string;
}

export const SyncLoader: React.FC<SyncLoaderProps> = ({
  isVisible,
  progress,
  total,
  processed,
  status,
  statusMessage = "",
  title = "Sincronizando kits...",
  description = "Aguarde enquanto os dados estão sendo processados",
}) => {
  const [displayProgress, setDisplayProgress] = useState(0);

  // Smoothly animate progress bar
  useEffect(() => {
    if (progress !== displayProgress) {
      const timer = setTimeout(() => {
        setDisplayProgress(progress);
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [progress, displayProgress]);

  if (!isVisible) {
    return null;
  }

  const getStatusColor = () => {
    switch (status) {
      case "completed":
        return "border-green-400 bg-green-50";
      case "error":
        return "border-red-400 bg-red-50";
      default:
        return "border-blue-400 bg-blue-50";
    }
  };

  const getProgressBarColor = () => {
    switch (status) {
      case "completed":
        return "bg-gradient-to-r from-green-400 to-green-500";
      case "error":
        return "bg-gradient-to-r from-red-400 to-red-500";
      default:
        return "bg-gradient-to-r from-blue-400 to-blue-500";
    }
  };

  const getStatusIcon = () => {
    switch (status) {
      case "completed":
        return <CheckCircle2 className="w-5 h-5 text-green-600" />;
      case "error":
        return <AlertCircle className="w-5 h-5 text-red-600" />;
      default:
        return null;
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
      <div
        className={`w-96 rounded-lg border-2 shadow-lg p-6 ${getStatusColor()}`}
      >
        {/* Header */}
        <div className="flex items-center gap-3 mb-4">
          {status !== "running" && getStatusIcon()}
          <div>
            <h2 className="text-lg font-semibold text-gray-800">{title}</h2>
            <p className="text-sm text-gray-600">{description}</p>
          </div>
        </div>

        {/* Stats */}
        <div className="mb-4 space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-gray-700">
              <strong>{processed}</strong> / <strong>{total}</strong> kits
            </span>
            <span className="font-semibold text-gray-800">
              {displayProgress}%
            </span>
          </div>

          {/* Progress Bar */}
          <div className="w-full bg-gray-200 rounded-full overflow-hidden h-3">
            <div
              className={`h-full transition-all duration-500 ease-out ${getProgressBarColor()}`}
              style={{ width: `${displayProgress}%` }}
            />
          </div>
        </div>

        {/* Status Message */}
        {statusMessage && (
          <div className="mb-4 text-sm text-gray-700 bg-white/50 rounded p-2">
            {statusMessage}
          </div>
        )}

        {/* Status Text */}
        <div className="text-center">
          {status === "running" && (
            <>
              <p className="text-sm text-gray-700 mb-2">Processando...</p>
              <div className="flex justify-center gap-1">
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" />
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-200" />
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-400" />
              </div>
            </>
          )}
          {status === "completed" && (
            <p className="text-sm font-semibold text-green-700">
              ✓ Sincronização concluída com sucesso!
            </p>
          )}
          {status === "error" && (
            <p className="text-sm font-semibold text-red-700">
              ✗ Erro na sincronização
            </p>
          )}
        </div>
      </div>

      <style jsx>{`
        @keyframes bounce-delayed {
          0%,
          80%,
          100% {
            opacity: 1;
            transform: translateY(0);
          }
          40% {
            opacity: 0.5;
            transform: translateY(-8px);
          }
        }

        .animation-delay-200 {
          animation-delay: 0.2s;
        }

        .animation-delay-400 {
          animation-delay: 0.4s;
        }
      `}</style>
    </div>
  );
};

export default SyncLoader;