"use client";

import { useState, useMemo } from "react";

interface FAQItem {
    id: string;
    question: string;
    answer: React.ReactNode;
    category: string;
}

const faqData: FAQItem[] = [
    {
        id: "faq-1",
        question: "What services does AASI Technologies provide?",
        answer: (
            <div>
                <p className="mb-3">We offer a comprehensive range of IT solutions tailored to enterprise needs. Our core competencies include:</p>
                <ul className="space-y-2 ml-1">
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span>Custom software development and legacy system modernization.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span>Cloud infrastructure management (AWS, Azure, GCP).</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span>Cybersecurity auditing and implementation.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span>AI & Machine Learning, IoT, AR/VR, and Business Intelligence solutions.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span>Enterprise resource planning (ERP) consulting.</span>
                    </li>
                </ul>
            </div>
        ),
        category: "General",
    },
    {
        id: "faq-2",
        question: "What is your typical project timeline?",
        answer: (
            <p>
                Project timelines vary significantly based on scope and complexity. A simple website refresh might take 4-6 weeks, while a full-scale enterprise software implementation can take 6-12 months. During our initial consultation, we provide a detailed roadmap with key milestones to ensure transparency.
            </p>
        ),
        category: "General",
    },
    {
        id: "faq-3",
        question: "Do you offer 24/7 technical support?",
        answer: (
            <div>
                <p className="mb-3">Yes, we offer several support tiers to match your operational requirements:</p>
                <ul className="space-y-2 ml-1">
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span><strong>Standard:</strong> 9am - 5pm EST, Mon-Fri business hours support.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span><strong>Enterprise:</strong> 24/7/365 critical incident response and monitoring.</span>
                    </li>
                </ul>
            </div>
        ),
        category: "Services",
    },
    {
        id: "faq-4",
        question: "How do you handle data security?",
        answer: (
            <p>
                Security is at the core of everything we build. We follow industry best practices including SOC 2 Type II compliance standards, regular penetration testing, and encrypted data storage both in transit and at rest. All our team members undergo rigorous security training annually.
            </p>
        ),
        category: "Technical",
    },
    {
        id: "faq-5",
        question: "Can you integrate with our existing tools?",
        answer: (
            <p>
                Absolutely. We specialize in API integrations and can connect custom solutions with popular platforms like Salesforce, HubSpot, SAP, Oracle, Slack, and Microsoft 365 to ensure a seamless workflow for your team.
            </p>
        ),
        category: "Technical",
    },
    {
        id: "faq-6",
        question: "What are your pricing models?",
        answer: (
            <div>
                <p className="mb-3">We offer flexible pricing to match your project needs:</p>
                <ul className="space-y-2 ml-1">
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span><strong>Fixed Price:</strong> Best for projects with clearly defined scope and requirements.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span><strong>Time & Materials:</strong> Ideal for agile, iterative projects where requirements evolve.</span>
                    </li>
                    <li className="flex items-start gap-2.5">
                        <span className="mt-1.5 size-1.5 rounded-full bg-primary shrink-0"></span>
                        <span><strong>Dedicated Team:</strong> Full-time engineers working as an extension of your team.</span>
                    </li>
                </ul>
            </div>
        ),
        category: "Pricing",
    },
    {
        id: "faq-7",
        question: "What technologies do you specialize in?",
        answer: (
            <p>
                Our team has deep expertise in React, Next.js, Node.js, Python, AWS, Azure, GCP, TensorFlow, Flutter, React Native, Kubernetes, and Docker. We continuously upskill and adapt to emerging technologies to deliver the best solutions.
            </p>
        ),
        category: "Technical",
    },
    {
        id: "faq-8",
        question: "Do you provide post-launch support?",
        answer: (
            <p>
                Yes. Every project includes a post-launch warranty period, and we offer ongoing maintenance and support contracts. Our support team monitors performance, handles bug fixes, and implements continuous improvements to keep your systems running smoothly.
            </p>
        ),
        category: "Services",
    },
];

const categories = ["All", "General", "Services", "Technical", "Pricing"];

export default function FAQAccordion() {
    const [openId, setOpenId] = useState<string | null>("faq-1");
    const [search, setSearch] = useState("");
    const [activeCategory, setActiveCategory] = useState("All");

    const filteredFaqs = useMemo(() => {
        return faqData.filter((faq) => {
            const matchCategory = activeCategory === "All" || faq.category === activeCategory;
            const matchSearch =
                search.trim() === "" ||
                faq.question.toLowerCase().includes(search.toLowerCase());
            return matchCategory && matchSearch;
        });
    }, [search, activeCategory]);

    const toggle = (id: string) => {
        setOpenId((prev) => (prev === id ? null : id));
    };

    return (
        <div className="w-full">
            {/* Search */}
            <div className="relative max-w-xl mx-auto mb-8">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-primary-light">
                    <span className="material-symbols-outlined">search</span>
                </div>
                <input
                    className="block w-full pl-12 pr-4 py-3.5 bg-dark-bg border border-white/10 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 rounded-xl text-light-surface placeholder-gray-500 transition-colors shadow-inner"
                    placeholder="Search for answers..."
                    type="text"
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
            </div>

            {/* Category Tabs */}
            <div className="flex flex-wrap gap-2 mb-10 justify-center">
                {categories.map((cat) => (
                    <button
                        key={cat}
                        onClick={() => setActiveCategory(cat)}
                        className={`px-5 py-2 rounded-full text-sm font-semibold transition-all ${activeCategory === cat
                            ? "bg-primary text-white shadow-glow-green"
                            : "bg-white/5 text-text-light-muted border border-white/10 hover:border-primary/40 hover:text-light-surface"
                            }`}
                    >
                        {cat}
                    </button>
                ))}
            </div>

            {/* FAQ Items */}
            <div className="space-y-4 max-w-3xl mx-auto gsap-stagger">
                {filteredFaqs.length === 0 && (
                    <div className="text-center py-12">
                        <span className="material-symbols-outlined text-5xl text-gray-300 mb-4 block">search_off</span>
                        <p className="text-text-muted">No results found. Try a different search term.</p>
                    </div>
                )}
                {filteredFaqs.map((faq, idx) => {
                    const isOpen = openId === faq.id;
                    return (
                        <div key={faq.id} className="card-glass-dark mb-4 overflow-hidden">
                            <button
                                id={`faq-btn-${faq.id}`}
                                aria-expanded={isOpen}
                                aria-controls={`faq-panel-${faq.id}`}
                                onClick={() => toggle(faq.id)}
                                onKeyDown={(e) => {
                                    if (e.key === "Enter" || e.key === " ") {
                                        e.preventDefault();
                                        toggle(faq.id);
                                    }
                                }}
                                className="w-full flex items-center justify-between px-6 py-5 text-left cursor-pointer group"
                            >
                                <div className="flex items-center gap-4">
                                    <div className={`size-10 rounded-xl flex items-center justify-center transition-colors shrink-0 border border-white/10 ${isOpen ? "bg-primary text-white border-primary" : "bg-white/5 text-primary-light"
                                        }`}>
                                        <span className="material-symbols-outlined text-xl">help</span>
                                    </div>
                                    <span className="text-base font-semibold text-light-surface transition-colors pr-4">
                                        {faq.question}
                                    </span>
                                </div>
                                <span className={`material-symbols-outlined text-primary-light text-2xl transition-transform duration-300 shrink-0 ${isOpen ? "rotate-180" : ""
                                    }`}>
                                    expand_more
                                </span>
                            </button>
                            <div
                                id={`faq-panel-${faq.id}`}
                                role="region"
                                aria-labelledby={`faq-btn-${faq.id}`}
                                className={`faq-answer ${isOpen ? "faq-answer-open" : ""}`}
                            >
                                <div>
                                    <div className="px-6 pb-6 pl-20 text-text-light-muted leading-relaxed text-[15px]">
                                        {faq.answer}
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}
