"use client";

import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";

interface FAQItem {
  id: string;
  question: string;
  answer: string;
}

const faqData: FAQItem[] = [
  {
    id: "1",
    question: "How does the 1:1 AI mentorship work?",
    answer: "Our AI mentor analyzes your performance on tests and assignments. It pinpoints exactly what you did wrong, explains why it was incorrect, and provides step-by-step guidance on how to solve similar problems correctly in the future."
  },
  {
    id: "2",
    question: "What kind of feedback can I expect?",
    answer: "You'll receive an in-depth report that goes beyond just a score. The feedback highlights your specific strengths (e.g., strong in thermodynamics) and weaknesses (e.g., struggles with organic chemistry reactions), offering a detailed breakdown of areas you need to focus on."
  },
  {
    id: "3",
    question: "Is the feedback personalized?",
    answer: "Yes, absolutely. The AI creates a personalized feedback loop based on your unique learning patterns. It identifies common mistakes you make and suggests tailored strategies and resources to help you overcome them. It’s like having a private tutor who knows your study habits inside and out."
  },
  {
    id: "4",
    question: "How does the AI help me improve?",
    answer: "The AI provides more than just a report; it gives you a personalized action plan. This plan includes targeted practice questions, recommended video lessons, and a study schedule designed to help you efficiently address your weaknesses and build upon your strengths."
  },
  {
    id: "5",
    question: "Can I attempt a test any time or is it mandatory to attempt it on the particular date & time mentioned in the schedule?",
    answer: "You have complete flexibility! While we provide a recommended schedule for optimal preparation, you can attempt any test at any time according to your convenience. The tests are available 24/7 on our platform."
  },
  {
    id: "6",
    question: "Are the full tests going to have the Latest NTA Pattern?",
    answer: "Yes, absolutely! All our tests strictly follow the latest NTA pattern and syllabus. We update our question bank regularly to match the current exam format, marking scheme, and difficulty level."
  },
  {
    id: "7",
    question: "What is the price and validity of the test series?",
    answer: "The price is mentioned in above pricing section. Please refer to it."
  },
  {
    id: "8",
    question: "Is there any refund policy?",
    answer: "Yes, we offer a 100% money-back guarantee if you score 99+ percentile in your target exam."
  },
  {
    id: "9",
    question: "Can I take the tests on mobile?",
    answer: "Yes! Our platform is fully responsive and works seamlessly on mobile devices, tablets, and desktops. However, we recommend using a larger screen or desktop mode for the best experience."
  },
  {
    id: "10",
    question: "How many times can I attempt a test?",
    answer: "You can attempt a test only once. We do not allow re-attempting the same test. However, you can review the test and its solutions as many times as you want until the test series expires."
  },
  {
    id: "11",
    question: "What is included in the detailed analysis report?",
    answer: "The detailed analysis includes: overall performance metrics, subject-wise breakdown, topic-wise analysis, time management report, difficulty-wise performance, comparison with toppers, improvement suggestions, and personalized study recommendations."
  },
  {
    id: "12",
    question: "Is there any scholarship available?",
    answer: "Yes! We offer a 100% money-back scholarship for students who score 99+ percentile. Additionally, we have merit-based scholarships and financial aid programs for deserving students. Contact our support team for more details."
  },
  {
    id: "13",
    question: "I have purchased the test series but can't see it in my dashboard. What should I do?",
    answer: "Please check your email for activation instructions. If you still can't access, contact our 24/7 support team at support@prejee.com or use the live chat feature. We'll resolve this within 30 minutes."
  }
];

interface TestFAQProps {
  selectedSeries?: string;
}

export default function TestFAQ({}: TestFAQProps) {
  const [openItems, setOpenItems] = useState<Set<string>>(new Set());

  const toggleItem = (id: string) => {
    const newOpenItems = new Set(openItems);
    if (newOpenItems.has(id)) {
      newOpenItems.delete(id);
    } else {
      newOpenItems.add(id);
    }
    setOpenItems(newOpenItems);
  };

  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <div className="inline-flex justify-center gap-x-1.5 py-2 px-3 rounded-full text-xs font-bold bg-blue-100 text-blue-800 mb-4">
            Support
          </div>
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            Frequently Asked Questions
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Here are some frequently asked questions by students. If you can&apos;t find an answer for your query here, feel free to contact us.
          </p>
        </div>

        <div className="max-w-4xl mx-auto">
          <div className="space-y-2">
            {faqData.map((item) => (
              <div key={item.id} className="bg-white border border-gray-200 rounded-lg shadow-sm">
                <button
                  onClick={() => toggleItem(item.id)}
                  className="w-full p-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors duration-200"
                >
                  <span className="text-base font-medium text-gray-900 pr-4">
                    {item.question}
                  </span>
                  {openItems.has(item.id) ? (
                    <ChevronUp className="h-4 w-4 text-gray-500 flex-shrink-0" />
                  ) : (
                    <ChevronDown className="h-4 w-4 text-gray-500 flex-shrink-0" />
                  )}
                </button>
                
                <AnimatePresence>
                  {openItems.has(item.id) && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.3, ease: "easeInOut" }}
                      className="overflow-hidden"
                    >
                      <div className="px-4 pb-4 text-gray-700 leading-relaxed text-sm">
                        {item.answer}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            ))}
          </div>
        </div>

        {/* Contact Section */}
        <div className="mt-16 text-center">
          <Card className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-8 border-0">
            <h3 className="text-2xl font-bold mb-4">
              Still Have Questions?
            </h3>
            <p className="text-indigo-100 mb-8 max-w-2xl mx-auto">
              Can&apos;t find the answer you&apos;re looking for? Our support team is here to help you 24/7.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="mailto:support@prejee.com" passHref>
                <Button
                  size="lg"
                  variant="secondary"
                  className="bg-white text-indigo-600 hover:bg-gray-100 cursor-pointer"
                >
                  Email Us (support@prejee.com)
                </Button>
              </Link>
              <Link href="https://discord.gg/yNpAa5J6gQ" passHref>
              <Button 
                size="lg" 
                variant="outline" 
                className="border-white text-gray-800 hover:text-gray-200 cursor-pointer hover:bg-white/10"
              >
                Live Chat Support
              </Button>
              </Link>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
}