import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import { useEffect } from 'react';
import { Loader2, Shield, Zap } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useTranslation } from "react-i18next";

const PrivateRoute = () => {
  const { isAuthenticated, check_auth, loading, authStep } = useAuth();
  const { t } = useTranslation();

  useEffect(() => {
    check_auth(null);
  }, []);

  if (loading) {
    return (
        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
            <div className="w-full max-w-md">
                {/* Logo */}
                <div className="text-center mb-8">
                    <div className="flex items-center justify-center gap-3 mb-6">
                        <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-12 h-12" />
                        <span className="text-3xl font-bold text-white">ShopCall.ai</span>
                    </div>
                    <Badge className="bg-[#52b3d0]/20 text-[#52b3d0] border-[#52b3d0]/30">
                        <Zap className="w-3 h-3 mr-1" />
                        {t('privateRoute.aiPowered')}
                    </Badge>
                </div>

                {/* Loading Card */}
                <Card className="bg-slate-800/50 border-slate-700 backdrop-blur-sm">
                    <CardContent className="p-8">
                        <div className="text-center space-y-6">
                            {/* Animated Icon */}
                            <div className="relative mx-auto w-16 h-16">
                                <div className="absolute inset-0 rounded-full border-4 border-[#52b3d0]/20"></div>
                                <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[#52b3d0] animate-spin"></div>
                                <div className="absolute inset-2 rounded-full bg-[#52b3d0]/10 flex items-center justify-center">
                                    <Shield className="w-6 h-6 text-[#52b3d0]" />
                                </div>
                            </div>

                            {/* Status Text */}
                            <div className="space-y-3">
                                <h2 className="text-xl font-semibold text-white">{t('privateRoute.securingSession')}</h2>
                                <p className="text-slate-400 text-sm leading-relaxed">
                                    {authStep}...
                                </p>
                            </div>

                            {/* Progress Dots */}
                            <div className="flex items-center justify-center space-x-2">
                                <div className="w-2 h-2 bg-[#52b3d0] rounded-full animate-pulse"></div>
                                <div className="w-2 h-2 bg-[#52b3d0]/60 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
                                <div className="w-2 h-2 bg-[#52b3d0]/30 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
                            </div>

                            {/* Security Features */}
                            <div className="pt-4 space-y-2">
                                <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
                                    <Shield className="w-3 h-3" />
                                    <span>{t('privateRoute.bankLevelEncryption')}</span>
                                </div>
                                <div className="flex items-center justify-center gap-2 text-xs text-slate-500">
                                    <Zap className="w-3 h-3" />
                                    <span>{t('privateRoute.lightningFastAuth')}</span>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Footer */}
                <div className="text-center mt-6">
                    <p className="text-slate-500 text-xs">
                        {t('privateRoute.poweredByAI')}
                    </p>
                </div>
            </div>
        </div>
    );
}
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

export default PrivateRoute;