import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
    Download,
    Github,
    Sparkles,
    Loader,
    Copy,
    Check,
    StopCircle,
    Activity,
    Leaf
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

/**
 * AuraUI Hero 1 Component
 * Customized for CA Grow Ops Manager
 * Displays the main dashboard header with 'Digital Command Center' branding
 */
const Hero1 = () => {
    const [isVisible, setIsVisible] = useState(false);
    const [currentSentence, setCurrentSentence] = useState(0);
    const [isAnimating, setIsAnimating] = useState(false);
    const [showCorrected, setShowCorrected] = useState(false);
    const [typingText, setTypingText] = useState("");
    const [isTyping, setIsTyping] = useState(false);
    const [isSelected, setIsSelected] = useState(false);
    const [showPopup, setShowPopup] = useState(false);

    // Customized demo text for Grow Ops context
    const demoSentences = [
        {
            original: "Room 4 temp is 82 humidity 65 check veg lighting",
            corrected:
                "Room 4: Temp 82°F, Humidity 65%. Veg lighting inspection required.",
        },
        {
            original: "feed batch 156 with heavy bloom schedule today",
            corrected:
                "Action: Feed Batch B-23-156. Schedule: Heavy Bloom. Date: Today.",
        },
        {
            original: "visitor arrived for checkin name is john doe",
            corrected:
                "Visitor Log: John Doe checked in. NDA signature pending.",
        },
    ];

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(true);
        }, 300);
        return () => clearTimeout(timer);
    }, []);

    useEffect(() => {
        const startDemo = () => {
            // Reset all states
            setIsTyping(true);
            setIsSelected(false);
            setShowCorrected(false);
            setTypingText("");

            // Type the text character by character - much faster
            const text = demoSentences[currentSentence].original;
            let i = 0;

            const typeInterval = setInterval(() => {
                if (i < text.length) {
                    setTypingText(text.substring(0, i + 1));
                    i++;
                } else {
                    clearInterval(typeInterval);
                    setIsTyping(false);

                    // Wait a bit, then select text
                    setTimeout(() => {
                        setIsSelected(true);

                        // Wait for selection, then start refining
                        setTimeout(() => {
                            setIsAnimating(true);

                            // Show refined text after processing
                            setTimeout(() => {
                                setShowCorrected(true);
                                setIsAnimating(false);
                                setIsSelected(false);

                                // Wait before next cycle
                                setTimeout(() => {
                                    setCurrentSentence(
                                        (prev) => (prev + 1) % demoSentences.length,
                                    );
                                }, 2500);
                            }, 1800);
                        }, 1200);
                    }, 800);
                }
            }, 25); // Much faster typing speed
        };

        const interval = setInterval(startDemo, 8500);
        startDemo(); // Start immediately

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

    return (
        <section className="relative w-full overflow-hidden bg-background">
            {/* Extended background gradient with enhanced grid */}
            <div className="cosmic-gradient cosmic-grid-enhanced min-h-[60vh] flex flex-col justify-center items-center relative py-20">

                {/* Hero Content */}
                <div
                    className={cn(
                        "relative z-10 max-w-5xl mx-auto px-6 text-center transition-all duration-700 transform",
                        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
                    )}
                >
                    <div className="flex justify-center mb-6">
                        <Badge variant="secondary" className="gap-2 cosmic-glass">
                            <Activity className="h-3 w-3 animate-pulse text-primary" />
                            System Status: Nominal
                            <Sparkles className="h-3 w-3 text-yellow-400" />
                        </Badge>
                    </div>

                    <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tighter text-balance text-foreground mb-6 max-w-5xl">
                        Command Center for <span className="text-primary">Modern Cultivation</span>
                    </h1>

                    <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 leading-relaxed text-balance">
                        Real-time compliance, environmental monitoring, and task management in a single digital twin interface.
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-2 mb-16">
                        <Button
                            size="lg"
                            className="gap-2 h-12 px-8"
                            onClick={() => { }} // Hook up to actual actions
                        >
                            <Leaf className="h-5 w-5" />
                            Metrc Sync
                        </Button>
                        <Button variant="outline" size="lg" className="gap-2 h-12 px-8">
                            <Activity className="h-5 w-5" />
                            View Alerts
                        </Button>
                    </div>

                    {/* Demo Box - Made taller */}
                    <div className="max-w-4xl mx-auto mb-8 cursor-default select-none pointer-events-none opacity-80 scale-90">
                        <div className="relative">
                            {/* Window-like demo box */}
                            <div className="bg-card/90 backdrop-blur-md rounded-xl border border-border/50 shadow-2xl overflow-hidden">
                                {/* Window header */}
                                <div className="bg-muted/30 px-4 py-3 border-b border-border/30 flex items-center gap-2">
                                    <div className="flex gap-2">
                                        <div className="w-3 h-3 rounded-full bg-red-500/70"></div>
                                        <div className="w-3 h-3 rounded-full bg-yellow-500/70"></div>
                                        <div className="w-3 h-3 rounded-full bg-green-500/70"></div>
                                    </div>
                                    <div className="text-sm text-muted-foreground ml-4">
                                        AI Compliance Assistant
                                    </div>
                                </div>

                                {/* Content area - Made taller */}
                                <div className="p-8 min-h-[120px] flex items-center justify-center">
                                    <div className="w-full max-w-2xl">
                                        <div
                                            className={cn(
                                                "text-lg leading-relaxed transition-all duration-500",
                                                isAnimating ? "bg-accent/30 rounded-md p-3" : "",
                                                isSelected ? "bg-primary/20 rounded-md p-3" : ""
                                            )}
                                        >
                                            {showCorrected ? (
                                                <span className="text-foreground font-mono">
                                                    {demoSentences[currentSentence].corrected}
                                                </span>
                                            ) : (
                                                <span className="text-muted-foreground font-mono">
                                                    {typingText}
                                                    {isTyping && <span className="animate-pulse">_</span>}
                                                </span>
                                            )}
                                        </div>

                                        {/* Status indicator */}
                                        <div className="flex items-center gap-2 mt-4 text-xs font-mono uppercase tracking-widest">
                                            {isAnimating ? (
                                                <>
                                                    <Loader className="h-3 w-3 animate-spin text-primary" />
                                                    <span className="text-muted-foreground">
                                                        Processing SOP...
                                                    </span>
                                                </>
                                            ) : showCorrected ? (
                                                <>
                                                    <Check className="h-3 w-3 text-green-500" />
                                                    <span className="text-muted-foreground">
                                                        Compliance Verified
                                                    </span>
                                                </>
                                            ) : isSelected ? (
                                                <>
                                                    <Copy className="h-3 w-3 text-[var(--color-accent)]" />
                                                    <span className="text-muted-foreground">
                                                        Analyzing Input
                                                    </span>
                                                </>
                                            ) : (
                                                <>
                                                    <span className="text-muted-foreground">
                                                        Awaiting Voice/Text Command...
                                                    </span>
                                                </>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Glow effect below the demo box - moved up and positioned better */}
                            <div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-[600px] h-[120px] opacity-20 bg-primary blur-[80px] rounded-full -z-20"></div>
                        </div>
                    </div>
                </div>
            </div>

            {showPopup && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
                    {/* Popup content */}
                </div>
            )}
        </section>
    );
};

export default Hero1;
