import { useEffect } from "react";
import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import { Bot, Sparkles, Zap, Brain, MessageCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { GlobalFunctions } from "@/GlobalFunctions";
export default function Dashboard() {
  const today = new Date();
  const formattedDate = format(today, "EEEE, d 'de' MMMM 'de' yyyy", { locale: ptBR });
  const hour = today.getHours();
  
  const getGreeting = () => {
    if (hour < 12) return "Bom dia";
    if (hour < 18) return "Boa tarde";
    return "Boa noite";
  };




  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] text-center px-4">
      {/* Floating particles background effect */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-primary/30 rounded-full animate-pulse" />
        <div className="absolute top-1/3 right-1/3 w-1 h-1 bg-primary/40 rounded-full animate-pulse delay-300" />
        <div className="absolute bottom-1/3 left-1/3 w-1.5 h-1.5 bg-primary/20 rounded-full animate-pulse delay-500" />
        <div className="absolute top-1/2 right-1/4 w-1 h-1 bg-primary/30 rounded-full animate-pulse delay-700" />
      </div>

      {/* AI Agent Avatar */}
      <div className="relative mb-8 animate-fade-in">
        {/* Outer glow ring */}
        <div className="absolute inset-0 w-32 h-32 rounded-full bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 blur-xl animate-pulse" />
        
        {/* Middle ring */}
        <div className="relative w-32 h-32 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 p-1 cyber-glow">
          <div className="w-full h-full rounded-full bg-card border border-primary/30 flex items-center justify-center relative overflow-hidden">
            {/* Inner gradient effect */}
            <div className="absolute inset-0 bg-gradient-to-t from-primary/10 to-transparent" />
            
            {/* Bot icon */}
            <Bot className="w-14 h-14 text-primary relative z-10" />
            
            {/* Scanning line effect */}
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/20 to-transparent h-8 animate-[slide-scan_2s_ease-in-out_infinite]" />
          </div>
        </div>

        {/* Orbiting icons */}
        <div className="absolute -top-2 -right-2 w-10 h-10 rounded-full bg-card border border-border flex items-center justify-center shadow-lg animate-bounce">
          <Sparkles className="w-5 h-5 text-yellow-500" />
        </div>
        <div className="absolute -bottom-1 -left-1 w-8 h-8 rounded-full bg-card border border-border flex items-center justify-center shadow-lg animate-pulse">
          <Zap className="w-4 h-4 text-primary" />
        </div>
        <div className="absolute top-1/2 -right-4 w-8 h-8 rounded-full bg-card border border-border flex items-center justify-center shadow-lg animate-pulse delay-300">
          <Brain className="w-4 h-4 text-primary" />
        </div>
      </div>

      {/* Greeting */}
      <div className="space-y-3 animate-fade-in" style={{ animationDelay: "0.2s" }}>
        <h1 className="text-4xl md:text-5xl font-bold text-foreground">
          {getGreeting()}! 👋
        </h1>
        <p className="text-xl text-muted-foreground">
          Seu agente de IA está pronto para ajudar
        </p>
      </div>

      {/* Date card */}
      <div 
        className="mt-8 px-6 py-3 rounded-full bg-card/50 border border-border backdrop-blur-sm animate-fade-in"
        style={{ animationDelay: "0.4s" }}
      >
        <p className="text-muted-foreground capitalize">
          📅 {formattedDate}
        </p>
      </div>

      {/* Status indicator */}
      <div 
        className="mt-6 flex items-center gap-2 text-sm animate-fade-in"
        style={{ animationDelay: "0.6s" }}
      >
        <span className="relative flex h-3 w-3">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
          <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
        </span>
        <span className="text-muted-foreground">Sistema operacional</span>
      </div>

      {/* WhatsApp Button */}
      <Button
        asChild
        size="lg"
        variant="outline"
        className="mt-8 gap-2 border-[#25D366] text-[#25D366] hover:bg-[#25D366] hover:text-white hover:border-[#25D366] animate-fade-in"
        style={{ animationDelay: "0.8s" }}
      >
        <a href="https://wa.me/5511914382960" target="_blank" rel="noopener noreferrer">
          <MessageCircle className="w-5 h-5" />
          Conversar com o Agente
        </a>
      </Button>
    </div>
  );
}



