import { cn } from "@/lib/utils"
import { CircleNotch } from "@phosphor-icons/react"
import { useEffect, useState } from "react"

interface SpinnerProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export function Spinner({ size = "md", className }: SpinnerProps) {
  const sizeClasses = {
    sm: "h-4 w-4",
    md: "h-6 w-6", 
    lg: "h-8 w-8"
  }

  return (
    <CircleNotch 
      className={cn(
        "animate-spin text-primary",
        sizeClasses[size],
        className
      )} 
    />
  )
}

interface LoadingSpinnerProps {
  message?: string
  className?: string
  dynamicText?: boolean
}

const loadingMessages = [
  "Loading API documentation...",
  "Fetching endpoint specifications...",
  "Preparing interactive documentation...",
  "Compiling API reference...",
  "Initializing documentation viewer...",
  "Loading schema definitions...",
  "Rendering API endpoints...",
  "Setting up interactive examples...",
  "Organizing API methods...",
  "Building comprehensive docs...",
  "Configuring API explorer...",
  "Loading request/response models...",
]

export function LoadingSpinner({ 
  message = "Loading...", 
  className, 
  dynamicText = false
}: LoadingSpinnerProps) {
  const [currentMessage, setCurrentMessage] = useState(message)

  useEffect(() => {
    if (!dynamicText) {
      setCurrentMessage(message)
      return
    }

    // Initialize with a random message
    const initialIndex = Math.floor(Math.random() * loadingMessages.length)
    setCurrentMessage(loadingMessages[initialIndex])

    const messageInterval = setInterval(() => {
      setCurrentMessage(prevMessage => {
        const currentIndex = loadingMessages.indexOf(prevMessage)
        const nextIndex = (currentIndex + 1) % loadingMessages.length
        return loadingMessages[nextIndex]
      })
    }, 2000) // Change message every 2 seconds

    return () => {
      clearInterval(messageInterval)
    }
  }, [dynamicText, message])

  return (
    <div className={cn("flex flex-col items-center justify-center space-y-6", className)}>
      <div className="relative">
        <Spinner 
          size="lg" 
          className="drop-shadow-sm"
        />
        {/* Subtle glow effect */}
        <div className="absolute inset-0 bg-primary/10 rounded-full blur-lg scale-150 animate-pulse" />
      </div>
      
      <div className="text-center max-w-xs">
        <p 
          key={currentMessage}
          className="text-sm text-muted-foreground animate-in fade-in-0 duration-500 font-medium"
        >
          {currentMessage}
        </p>
        {dynamicText && (
          <div className="flex justify-center mt-3 space-x-1">
            {[...Array(3)].map((_, i) => (
              <div
                key={i}
                className="w-1 h-1 bg-primary/60 rounded-full animate-pulse"
                style={{
                  animationDelay: `${i * 0.3}s`,
                  animationDuration: '1.8s'
                }}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
