frontend/app/components/LoadingScreen.tsx

"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { Card } from "./ui/card";
import { Loader2, Zap } from "lucide-react";

export default function LoadingScreen() {
  const [progress, setProgress] = useState(0);
  const [loadingText, setLoadingText] = useState("Initializing Roger Platform...");

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 95) {
          return prev;
        }
        return prev + 5;
      });
    }, 200);

    const textInterval = setInterval(() => {
      setLoadingText((prev) => {
        const texts = [
          "Initializing Roger Platform...",
          "Connecting to Intelligence Agents...",
          "Loading Social Media Monitor...",
          "Loading Political Intelligence...",
          "Loading Economic Analysis...",
          "Loading Meteorological Data...",
          "Establishing WebSocket Connection...",
          "Syncing with Database...",
          "Preparing Real-Time Dashboard..."
        ];
        const currentIndex = texts.indexOf(prev);
        return texts[(currentIndex + 1) % texts.length];
      });
    }, 1500);

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

  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-background via-background/95 to-primary/5">
      <Card className="p-12 bg-card/95 backdrop-blur border-border max-w-lg w-full mx-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="space-y-8"
        >
          {/* Logo/Icon */}
          <div className="flex items-center justify-center gap-3">
            <motion.div
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            >
              <Zap className="w-12 h-12 text-primary" />
            </motion.div>
            <h1 className="text-3xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
              ROGER
            </h1>
          </div>

          {/* Progress Bar */}
          <div className="space-y-3">
            <div className="h-2 bg-muted rounded-full overflow-hidden">
              <motion.div
                className="h-full bg-gradient-to-r from-primary via-primary/80 to-primary/60"
                initial={{ width: 0 }}
                animate={{ width: `${progress}%` }}
                transition={{ duration: 0.3 }}
              />
            </div>
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>{progress}%</span>
              <span>Loading Intelligence Platform</span>
            </div>
          </div>

          {/* Loading Text */}
          <motion.div
            key={loadingText}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="text-center"
          >
            <div className="flex items-center justify-center gap-2 text-muted-foreground">
              <Loader2 className="w-4 h-4 animate-spin" />
              <p className="text-sm font-mono">{loadingText}</p>
            </div>
          </motion.div>

          {/* Info */}
          <div className="text-center space-y-2 pt-4 border-t border-border">
            <p className="text-xs text-muted-foreground">
              Real-Time Situational Awareness for Sri Lanka
            </p>
            <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
              <span>6 Domain Agents</span>
              <span>•</span>
              <span>47+ Data Sources</span>
              <span>•</span>
              <span>Live Updates</span>
            </div>
          </div>
        </motion.div>
      </Card>
    </div>
  );
}