import { CSSProperties, useState, useEffect } from "react";
import cn from "../utils/classnames.ts";
import { MODEL_FACTS } from "../constants.ts";

export default function ModelLoader({
  progress,
  className = "",
  style,
}: {
  progress: number;
  className?: string;
  style?: CSSProperties;
}) {
  const [shuffledFacts, setShuffledFacts] = useState<readonly string[]>([]);
  const [currentFactIndex, setCurrentFactIndex] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);

  // Shuffle facts on mount
  useEffect(() => {
    const shuffled = [...MODEL_FACTS].sort(() => Math.random() - 0.5);
    setShuffledFacts(shuffled);
  }, []);

  // Rotate facts every 5 seconds
  useEffect(() => {
    if (shuffledFacts.length === 0) return;

    const interval = setInterval(() => {
      setIsTransitioning(true);

      setTimeout(() => {
        setCurrentFactIndex((prev) => (prev + 1) % shuffledFacts.length);
        setIsTransitioning(false);
      }, 400); // Half of transition duration for crossfade
    }, 10_000);

    return () => clearInterval(interval);
  }, [shuffledFacts]);

  return (
    <div className={cn("space-y-4", className)} style={style}>
      {shuffledFacts.length > 0 && (
        <div className="min-h-12 flex items-center justify-center">
          <p
            className={cn(
              "text-lg text-center transition-opacity duration-400",
              isTransitioning ? "opacity-0" : "opacity-100"
            )}
          >
            {shuffledFacts[currentFactIndex]}
          </p>
        </div>
      )}

      {/* Progress */}
      <div className="space-y-2 mt-8">
        <div className="flex justify-between items-center">
          <span className="text-sm font-medium text-muted-foreground">
            Loading model...
          </span>
          <span className="text-sm text-primary animate-pulse-soft font-mono font-bold">
            {progress.toFixed(2)}%
          </span>
        </div>
        <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
          <div
            className="bg-primary h-full transition-all duration-300 ease-out relative overflow-hidden"
            style={{ width: `${progress}%` }}
          >
            <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_infinite]" />
          </div>
        </div>
        <p className="text-xs text-muted-foreground text-center">
          This may take a few moments. Please don't close the page.
        </p>
      </div>
    </div>
  );
}