import React, { useState, useEffect } from 'react';
import { Shield, Cpu, Target, BookOpen, Wrench, Activity, AlertTriangle, CheckCircle, TrendingUp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { Progress } from '@/components/ui/progress';

const cyberTips = [
  "Never reuse passwords across accounts.",
  "Check URL spelling before logging in.",
  "Avoid clicking unknown file attachments.",
  "Enable 2FA for all important accounts.",
  "Use a password manager for secure storage.",
  "Keep your software and systems updated.",
  "Be cautious of urgent-sounding emails.",
  "Verify sender identity before sharing info.",
];

const cyberQuotes = [
  "Security is not a product, it's a process.",
  "Awareness is the strongest defense.",
  "Phishing attacks target human trust.",
  "Strong passwords protect your identity.",
  "Encryption is your digital shield.",
  "The best defense is constant vigilance.",
];

const Dashboard: React.FC = () => {
  const [currentTip, setCurrentTip] = useState(0);
  const [currentQuote, setCurrentQuote] = useState(0);
  const [tipFade, setTipFade] = useState(true);
  const [quoteFade, setQuoteFade] = useState(true);

  // Rotate tips every 5 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setTipFade(false);
      setTimeout(() => {
        setCurrentTip((prev) => (prev + 1) % cyberTips.length);
        setTipFade(true);
      }, 250);
    }, 3500);
    return () => clearInterval(interval);
  }, []);

  // Rotate quotes every 4 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setQuoteFade(false);
      setTimeout(() => {
        setCurrentQuote((prev) => (prev + 1) % cyberQuotes.length);
        setQuoteFade(true);
      }, 425);
    }, 4500);
    return () => clearInterval(interval);
  }, []);

  const infoCards = [
    {
      icon: Cpu,
      title: 'Cipher-AI',
      description: '24/7 Cyber Help',
      color: 'primary',
      link: '/cipher-ai',
    },
    {
      icon: Target,
      title: 'Threat Detection',
      description: '99.9% Accuracy',
      color: 'secondary',
      link: '/tools',
    },
    {
      icon: BookOpen,
      title: 'Learning Modules',
      description: '8 Security Modules',
      color: 'accent',
      link: '/academy',
    },
    {
      icon: Wrench,
      title: 'Cyber Tools',
      description: 'Interactive Utilities',
      color: 'primary',
      link: '/tools',
    },
  ];

  const simulations = [
    { title: 'Cyber Threat Simulator', icon: AlertTriangle, description: 'Experience simulated attacks' },
    { title: 'Malware Scan Demo', icon: Shield, description: 'See how scanning works' },
    { title: 'Network Packet Visualizer', icon: Activity, description: 'Watch data flow in real-time' },
  ];

  return (
    <div className="min-h-screen py-8 px-4">
      <div className="container mx-auto max-w-7xl space-y-8">
        {/* Welcome Panel */}
        <section className="glass-card p-8 relative overflow-hidden">
          <div className="absolute inset-0 cyber-grid opacity-30" />
          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-secondary/20 rounded-full blur-3xl" />
          
          <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6">
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <Shield className="w-10 h-10 text-primary animate-float" />
                <h1 className="font-display text-3xl lg:text-4xl font-bold text-gradient-primary">
                  Welcome, CyberAgent
                </h1>
              </div>
              <p className="text-muted-foreground max-w-xl">
                Your digital fortress awaits. Monitor your security status, learn new skills, and utilize powerful cyber tools.
              </p>
              <div className="flex gap-4">
                <Link to="/tools">
                  <Button variant="neon">Explore Tools</Button>
                </Link>
                <Link to="/academy">
                  <Button variant="neon-outline">Start Learning</Button>
                </Link>
              </div>
            </div>
            
            {/* Hologram Shield Animation */}
            <div className="relative">
              <div className="w-32 h-32 lg:w-40 lg:h-40 rounded-full bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center animate-float">
                <Shield className="w-16 h-16 lg:w-20 lg:h-20 text-primary" />
                <div className="absolute inset-0 rounded-full border-2 border-primary/50 animate-pulse-ring" />
                <div className="absolute inset-0 rounded-full border border-secondary/30 animate-pulse-ring" style={{ animationDelay: '0.5s' }} />
              </div>
            </div>
          </div>
        </section>

        {/* Information Cards */}
        <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {infoCards.map((card, index) => (
            <Link
              key={index}
              to={card.link}
              className="glass-card-hover p-6 group"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className={cn(
                "w-12 h-12 rounded-lg flex items-center justify-center mb-4 transition-all duration-300",
                card.color === 'primary' && "bg-primary/20 text-primary group-hover:bg-primary group-hover:text-primary-foreground",
                card.color === 'secondary' && "bg-secondary/20 text-secondary group-hover:bg-secondary group-hover:text-secondary-foreground",
                card.color === 'accent' && "bg-accent/20 text-accent group-hover:bg-accent group-hover:text-accent-foreground",
              )}>
                <card.icon className="w-6 h-6" />
              </div>
              <h3 className="font-display font-semibold text-lg mb-1">{card.title}</h3>
              <p className="text-muted-foreground text-sm">{card.description}</p>
            </Link>
          ))}
        </section>

        {/* Security Status Overview */}
        <section className="glass-card p-6">
          <h2 className="font-display text-xl font-semibold mb-6 flex items-center gap-2">
            <Activity className="w-5 h-5 text-primary" />
            Security Status Overview
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Password Safety Score */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Password Safety Score</span>
                <span className="font-display font-semibold text-accent">99.9%</span>
              </div>
              <Progress value={98} className="h-3" />
              <p className="text-xs text-muted-foreground">Strong passwords detected across most accounts</p>
            </div>

            {/* Browser Safety */}
            <div className="flex items-center gap-4 p-4 bg-muted/30 rounded-lg">
              <CheckCircle className="w-8 h-8 text-green-500" />
              <div>
                <p className="font-medium">Browser Safety</p>
                <p className="text-xs text-muted-foreground">All extensions verified</p>
              </div>
            </div>

            {/* Last Activity */}
            <div className="flex items-center gap-4 p-4 bg-muted/30 rounded-lg">
              <TrendingUp className="w-8 h-8 text-accent" />
              <div>
                <p className="font-medium">Last Device Login</p>
                <p className="text-xs text-muted-foreground">Today • Chrome on Windows</p>
              </div>
            </div>
          </div>
        </section>

        {/* Daily Cyber Tip */}
        <section className="glass-card p-6 neon-glow-blue">
          <h2 className="font-display text-lg font-semibold mb-4 text-cyber-blue">
            💡 Daily Cyber Tip
          </h2>
          <p className={cn(
            "text-lg text-foreground transition-all duration-300",
            tipFade ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
          )}>
            {cyberTips[currentTip]}
          </p>
        </section>


        {/* Rotating Cyber Quotes */}
        <section className="glass-card p-8 text-center relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-secondary/5" />
          <div className="relative z-10">
            <p className={cn(
              "font-display text-xl lg:text-2xl text-gradient-accent italic transition-all duration-300",
              quoteFade ? "opacity-100 scale-100" : "opacity-0 scale-95"
            )}>
              "{cyberQuotes[currentQuote]}"
            </p>
          </div>
        </section>
      </div>
    </div>
  );
};

export default Dashboard;
