import { useState, useEffect, useRef } from "react";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import LoadingScreen from "@/components/LoadingScreen";
import { aethexToast } from "@/lib/aethex-toast";
import { Link } from "react-router-dom";
import {
  Headphones,
  MessageCircle,
  Clock,
  CheckCircle,
  ArrowRight,
  Search,
  Book,
  Video,
  Mail,
  Phone,
  HelpCircle,
  FileText,
  Settings,
  Bug,
  Sparkles,
  Shield,
  Zap,
} from "lucide-react";

export default function Support() {
  const [isLoading, setIsLoading] = useState(true);
  const [selectedCategory, setSelectedCategory] = useState("all");
  const toastShownRef = useRef(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
      if (!toastShownRef.current) {
        aethexToast.system("Support center loaded successfully");
        toastShownRef.current = true;
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  const supportOptions = [
    {
      title: "Live Chat Support",
      description: "Get instant help from our support team",
      icon: MessageCircle,
      availability: "24/7",
      responseTime: "< 5 minutes",
      bestFor: "Urgent issues, quick questions",
      color: "from-green-500 to-emerald-600",
    },
    {
      title: "Email Support",
      description: "Detailed assistance for complex problems",
      icon: Mail,
      availability: "Business hours",
      responseTime: "< 4 hours",
      bestFor: "Technical issues, account problems",
      color: "from-blue-500 to-cyan-600",
    },
    {
      title: "Phone Support",
      description: "Direct conversation with technical experts",
      icon: Phone,
      availability: "Mon-Fri 9AM-6PM PST",
      responseTime: "Immediate",
      bestFor: "Enterprise customers, urgent issues",
      color: "from-purple-500 to-indigo-600",
    },
    {
      title: "Community Forum",
      description: "Get help from the community and experts",
      icon: Headphones,
      availability: "24/7",
      responseTime: "< 2 hours",
      bestFor: "General questions, discussions",
      color: "from-orange-500 to-red-600",
    },
  ];

  const faqs = [
    {
      category: "Getting Started",
      questions: [
        {
          question: "How do I create my first AeThex project?",
          answer:
            "Install the AeThex CLI with 'npm install -g @aethex/cli', then run 'aethex create my-project' to get started.",
          helpful: 89,
        },
        {
          question: "What are the system requirements?",
          answer:
            "AeThex works on Windows 10+, macOS 10.15+, and Ubuntu 18.04+. You'll need Node.js 16+ and 4GB RAM minimum.",
          helpful: 76,
        },
      ],
    },
    {
      category: "Technical Issues",
      questions: [
        {
          question: "My game is running slowly, how can I optimize it?",
          answer:
            "Check our performance optimization guide. Common fixes include reducing texture sizes, optimizing scripts, and using object pooling.",
          helpful: 94,
        },
        {
          question: "How do I fix deployment errors?",
          answer:
            "Most deployment errors are due to configuration issues. Check your environment variables and API keys in the AeThex dashboard.",
          helpful: 82,
        },
      ],
    },
    {
      category: "Billing & Account",
      questions: [
        {
          question: "How do I upgrade my plan?",
          answer:
            "Visit your account dashboard and click 'Upgrade Plan'. Changes take effect immediately with prorated billing.",
          helpful: 91,
        },
        {
          question: "Can I cancel my subscription anytime?",
          answer:
            "Yes, you can cancel anytime from your account settings. You'll retain access until the end of your billing period.",
          helpful: 88,
        },
      ],
    },
    {
      category: "Sentinel & Warden",
      questions: [
        {
          question: "Why is the Sentinel extension blocking a website?",
          answer:
            "Sentinel may block websites that match your security policy rules. Check your extension settings to whitelist trusted domains. If you believe this is an error, contact support with the website URL.",
          helpful: 86,
        },
        {
          question: "What data does the Sentinel extension collect?",
          answer:
            "Sentinel processes text locally in your browser to detect sensitive data patterns. Data is NOT sent to our servers unless a security violation is triggered. See our Privacy Policy for full details.",
          helpful: 92,
        },
        {
          question: "How do I link my Discord account?",
          answer:
            "Go to any Discord server with the AeThex bot, type /verify, and follow the link provided. Enter the 6-digit code on our verification page while logged into your AeThex account.",
          helpful: 89,
        },
      ],
    },
  ];

  const resources = [
    {
      title: "Documentation",
      description: "Comprehensive guides and API references",
      icon: Book,
      link: "/docs",
      color: "from-blue-500 to-cyan-600",
    },
    {
      title: "Video Tutorials",
      description: "Step-by-step visual learning",
      icon: Video,
      link: "/tutorials",
      color: "from-red-500 to-pink-600",
    },
    {
      title: "System Status",
      description: "Real-time service status and updates",
      icon: Settings,
      link: "/status",
      color: "from-green-500 to-emerald-600",
    },
    {
      title: "Feature Requests",
      description: "Suggest new features and improvements",
      icon: Sparkles,
      link: "/feedback",
      color: "from-yellow-500 to-orange-600",
    },
  ];

  const categories = [
    "all",
    "getting-started",
    "technical",
    "billing",
    "account",
    "sentinel-warden",
  ];

  const filteredFaqs =
    selectedCategory === "all"
      ? faqs
      : faqs.filter((faq) =>
          faq.category
            .toLowerCase()
            .replace(/\s+/g, "-")
            .includes(selectedCategory.replace("-", " ")),
        );

  if (isLoading) {
    return (
      <LoadingScreen
        message="Loading Support Center..."
        showProgress={true}
        duration={1000}
      />
    );
  }

  return (
    <Layout>
      <div className="min-h-screen bg-aethex-gradient">
        {/* Hero Section */}
        <section className="relative py-20 lg:py-32">
          <div className="container mx-auto px-4 text-center relative z-10">
            <div className="max-w-4xl mx-auto space-y-8">
              <Badge
                variant="outline"
                className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
              >
                <Headphones className="h-3 w-3 mr-1" />
                Support Center
              </Badge>

              <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
                <span className="text-gradient-purple">We're Here to Help</span>
              </h1>

              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
                Get the support you need to succeed with AeThex. Our team of
                experts is ready to help you overcome any challenge.
              </p>

              {/* Search Bar */}
              <div className="relative max-w-lg mx-auto">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                <input
                  type="text"
                  placeholder="Search for help..."
                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-background/50 backdrop-blur-sm focus:border-aethex-400 focus:outline-none text-foreground placeholder:text-muted-foreground"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Support Options */}
        <section className="py-20 bg-background/30">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16 animate-slide-up">
              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
                Choose Your Support Channel
              </h2>
              <p className="text-lg text-muted-foreground">
                Multiple ways to get help based on your needs
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
              {supportOptions.map((option, index) => {
                const Icon = option.icon;
                return (
                  <Card
                    key={index}
                    className="border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift animate-scale-in"
                    style={{ animationDelay: `${index * 0.1}s` }}
                  >
                    <CardHeader>
                      <div className="flex items-center space-x-4">
                        <div
                          className={`p-3 rounded-lg bg-gradient-to-r ${option.color}`}
                        >
                          <Icon className="h-6 w-6 text-white" />
                        </div>
                        <div className="flex-1">
                          <CardTitle className="text-xl">
                            {option.title}
                          </CardTitle>
                          <CardDescription className="mt-1">
                            {option.description}
                          </CardDescription>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 gap-3 text-sm">
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">
                            Availability:
                          </span>
                          <span className="font-semibold text-aethex-400">
                            {option.availability}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">
                            Response Time:
                          </span>
                          <span className="font-semibold text-aethex-400">
                            {option.responseTime}
                          </span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">
                            Best For:
                          </span>
                          <span className="font-semibold">
                            {option.bestFor}
                          </span>
                        </div>
                      </div>

                      <Button asChild className="w-full">
                        <Link to="/contact">
                          Get Support
                          <ArrowRight className="h-4 w-4 ml-2" />
                        </Link>
                      </Button>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section className="py-20">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16 animate-slide-up">
              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
                Frequently Asked Questions
              </h2>
              <p className="text-lg text-muted-foreground">
                Quick answers to common questions
              </p>
            </div>

            <div className="max-w-4xl mx-auto">
              {/* Category Filter */}
              <div className="flex flex-wrap justify-center gap-2 mb-12">
                {categories.map((category, index) => (
                  <Button
                    key={category}
                    variant={
                      selectedCategory === category ? "default" : "outline"
                    }
                    size="sm"
                    onClick={() => setSelectedCategory(category)}
                    className={`animate-scale-in ${
                      selectedCategory === category
                        ? "bg-gradient-to-r from-aethex-500 to-neon-blue"
                        : ""
                    }`}
                    style={{ animationDelay: `${index * 0.1}s` }}
                  >
                    {category.charAt(0).toUpperCase() +
                      category.slice(1).replace("-", " ")}
                  </Button>
                ))}
              </div>

              {/* FAQ Cards */}
              <div className="space-y-8">
                {filteredFaqs.map((category, categoryIndex) => (
                  <div key={categoryIndex}>
                    <h3 className="text-xl font-semibold text-gradient mb-4">
                      {category.category}
                    </h3>
                    <div className="space-y-4">
                      {category.questions.map((faq, faqIndex) => (
                        <Card
                          key={faqIndex}
                          className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-slide-right"
                          style={{ animationDelay: `${faqIndex * 0.1}s` }}
                        >
                          <CardContent className="p-6">
                            <div className="space-y-3">
                              <div className="flex items-start justify-between">
                                <h4 className="font-semibold text-lg">
                                  {faq.question}
                                </h4>
                                <HelpCircle className="h-5 w-5 text-aethex-400 flex-shrink-0 mt-0.5" />
                              </div>
                              <p className="text-muted-foreground">
                                {faq.answer}
                              </p>
                              <div className="flex items-center justify-between pt-3 border-t border-border/30">
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                  <CheckCircle className="h-4 w-4 text-green-400" />
                                  <span>{faq.helpful}% found this helpful</span>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <Button size="sm" variant="ghost">
                                    👍 Helpful
                                  </Button>
                                  <Button size="sm" variant="ghost">
                                    👎 Not helpful
                                  </Button>
                                </div>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Resources */}
        <section className="py-20 bg-background/30">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16 animate-slide-up">
              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
                Self-Help Resources
              </h2>
              <p className="text-lg text-muted-foreground">
                Everything you need to succeed with AeThex
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
              {resources.map((resource, index) => {
                const Icon = resource.icon;
                return (
                  <Card
                    key={index}
                    className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
                    style={{ animationDelay: `${index * 0.1}s` }}
                  >
                    <CardHeader>
                      <div
                        className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
                      >
                        <Icon className="h-8 w-8 text-white" />
                      </div>
                      <CardTitle className="text-lg">
                        {resource.title}
                      </CardTitle>
                      <CardDescription>{resource.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <Button asChild size="sm" className="w-full">
                        <Link to={resource.link}>
                          Access Resource
                          <ArrowRight className="h-3 w-3 ml-1" />
                        </Link>
                      </Button>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        </section>

        {/* Security & Abuse Reporting */}
        <section className="py-20">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16 animate-slide-up">
              <h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
                Security & Abuse Reporting
              </h2>
              <p className="text-lg text-muted-foreground">
                Report security vulnerabilities, abuse, or policy violations
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-5xl mx-auto">
              <Card className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in">
                <CardHeader>
                  <div className="flex items-center space-x-4">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-red-500 to-orange-600">
                      <Shield className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <CardTitle className="text-xl">Report Security Vulnerability</CardTitle>
                      <CardDescription>
                        Found a security issue? Let us know responsibly.
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    If you've discovered a security vulnerability in AeThex services,
                    please report it to our security team. We take all reports seriously
                    and will respond promptly.
                  </p>
                  <Button asChild className="w-full bg-red-500 hover:bg-red-600">
                    <a href="mailto:security@aethex.dev">
                      <Mail className="h-4 w-4 mr-2" />
                      security@aethex.dev
                    </a>
                  </Button>
                </CardContent>
              </Card>

              <Card className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 animate-scale-in">
                <CardHeader>
                  <div className="flex items-center space-x-4">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-yellow-500 to-amber-600">
                      <Bug className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <CardTitle className="text-xl">Report Abuse or Violations</CardTitle>
                      <CardDescription>
                        Report harassment, spam, or policy violations.
                      </CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    If you've encountered abuse, harassment, spam, or Terms of Service
                    violations, report them to our Trust & Safety team.
                  </p>
                  <Button asChild className="w-full bg-yellow-500 hover:bg-yellow-600 text-black">
                    <a href="mailto:abuse@aethex.dev">
                      <Mail className="h-4 w-4 mr-2" />
                      abuse@aethex.dev
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </div>

            <Card className="max-w-5xl mx-auto mt-8 border-border/50 animate-slide-up">
              <CardHeader>
                <CardTitle className="text-xl text-gradient">Incident Response Process</CardTitle>
                <CardDescription>
                  What happens after you report a security issue or abuse
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                  <div className="text-center space-y-2">
                    <div className="mx-auto w-12 h-12 rounded-full bg-aethex-400/20 flex items-center justify-center">
                      <span className="text-xl font-bold text-aethex-400">1</span>
                    </div>
                    <h4 className="font-semibold">Acknowledgment</h4>
                    <p className="text-sm text-muted-foreground">
                      We acknowledge receipt within 24 hours for security reports,
                      48 hours for abuse reports.
                    </p>
                  </div>
                  <div className="text-center space-y-2">
                    <div className="mx-auto w-12 h-12 rounded-full bg-aethex-400/20 flex items-center justify-center">
                      <span className="text-xl font-bold text-aethex-400">2</span>
                    </div>
                    <h4 className="font-semibold">Investigation</h4>
                    <p className="text-sm text-muted-foreground">
                      Our team investigates the report, gathers evidence, and
                      assesses severity.
                    </p>
                  </div>
                  <div className="text-center space-y-2">
                    <div className="mx-auto w-12 h-12 rounded-full bg-aethex-400/20 flex items-center justify-center">
                      <span className="text-xl font-bold text-aethex-400">3</span>
                    </div>
                    <h4 className="font-semibold">Resolution</h4>
                    <p className="text-sm text-muted-foreground">
                      We take appropriate action - patching vulnerabilities or
                      enforcing policies against violators.
                    </p>
                  </div>
                  <div className="text-center space-y-2">
                    <div className="mx-auto w-12 h-12 rounded-full bg-aethex-400/20 flex items-center justify-center">
                      <span className="text-xl font-bold text-aethex-400">4</span>
                    </div>
                    <h4 className="font-semibold">Follow-Up</h4>
                    <p className="text-sm text-muted-foreground">
                      We notify you of the outcome and any actions taken (where
                      appropriate).
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="max-w-5xl mx-auto mt-8 border-border/50 animate-slide-up">
              <CardHeader>
                <CardTitle className="text-xl text-gradient">Escalation Steps</CardTitle>
                <CardDescription>
                  If your report isn't addressed or you disagree with the outcome
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ol className="space-y-4 text-sm text-muted-foreground">
                  <li className="flex items-start gap-3">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-aethex-400/20 flex items-center justify-center text-xs font-bold text-aethex-400">1</span>
                    <div>
                      <strong className="text-foreground">Reply to your original report</strong>
                      <p>Reference your ticket number and explain why you believe further action is needed.</p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-aethex-400/20 flex items-center justify-center text-xs font-bold text-aethex-400">2</span>
                    <div>
                      <strong className="text-foreground">Contact escalations@aethex.dev</strong>
                      <p>For unresolved issues, escalate to our senior Trust & Safety team with your ticket number.</p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-aethex-400/20 flex items-center justify-center text-xs font-bold text-aethex-400">3</span>
                    <div>
                      <strong className="text-foreground">Executive Review</strong>
                      <p>For serious unresolved matters, contact legal@aethex.dev for executive review.</p>
                    </div>
                  </li>
                </ol>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* Emergency Support */}
        <section className="py-20 bg-background/30">
          <div className="container mx-auto px-4">
            <Card className="max-w-4xl mx-auto bg-gradient-to-r from-red-500/10 to-orange-500/10 border-red-500/30 animate-scale-in">
              <CardContent className="p-8 text-center">
                <div className="flex justify-center mb-4">
                  <div className="p-3 rounded-full bg-red-500/20 border border-red-500/30">
                    <Zap className="h-8 w-8 text-red-400" />
                  </div>
                </div>
                <h3 className="text-2xl font-bold text-gradient mb-4">
                  Critical Issue?
                </h3>
                <p className="text-muted-foreground mb-6">
                  If you're experiencing a critical production issue that's
                  affecting your users, contact our emergency support line for
                  immediate assistance.
                </p>
                <div className="flex flex-col sm:flex-row justify-center gap-4">
                  <Button size="lg" className="bg-red-500 hover:bg-red-600">
                    <Phone className="h-5 w-5 mr-2" />
                    Emergency Hotline
                  </Button>
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-red-500/50 text-red-400 hover:bg-red-500/10"
                  >
                    <Bug className="h-5 w-5 mr-2" />
                    Report Critical Bug
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 bg-background/30">
          <div className="container mx-auto px-4 text-center">
            <div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
              <h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
                Still Need Help?
              </h2>
              <p className="text-xl text-muted-foreground">
                Our support team is standing by to help you succeed. Don't
                hesitate to reach out with any questions or concerns.
              </p>

              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <Button
                  asChild
                  size="lg"
                  className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
                >
                  <Link to="/contact" className="flex items-center space-x-2">
                    <MessageCircle className="h-5 w-5" />
                    <span>Contact Support</span>
                    <ArrowRight className="h-5 w-5" />
                  </Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
                >
                  <Link to="/community">Join Community</Link>
                </Button>
              </div>

              <div className="grid grid-cols-3 gap-8 mt-12">
                <div className="text-center">
                  <Clock className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                  <h3 className="font-semibold">24/7 Availability</h3>
                  <p className="text-sm text-muted-foreground">
                    Always here for you
                  </p>
                </div>
                <div className="text-center">
                  <Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                  <h3 className="font-semibold">Expert Team</h3>
                  <p className="text-sm text-muted-foreground">
                    Technical specialists
                  </p>
                </div>
                <div className="text-center">
                  <FileText className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
                  <h3 className="font-semibold">Comprehensive Docs</h3>
                  <p className="text-sm text-muted-foreground">
                    Detailed guides
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </Layout>
  );
}