import { useEffect, useState } from "react";
import { updateSEO } from "../utils/seo";
import { HelpCircle, MessageSquare, Phone, Plus, Minus, Search, ShieldAlert, Laptop, Star } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";

const FAQ_CATEGORIES = [
  { id: "all", name: "All FAQs" },
  { id: "security", name: "Data Security" },
  { id: "formats", name: "Supported Formats" },
  { id: "installation", name: "Installation & System" },
];

const FAQS_LIST = [
  {
    id: "faq-0",
    cat: "security",
    question: "Is Lumina Convert 100% free at all times?",
    answer: "Yes, absolutely! Lumina Convert is entirely free, with no hidden subscriptions, trial caps, watermarks, or locked files. Every features, including batch conversions, high quality resolution configurations and dynamic on-device GPU acceleration, is active from the moment of installation.",
  },
  {
    id: "faq-1",
    cat: "security",
    question: "Does my data or files get uploaded to any internet servers?",
    answer: "No, never. Lumina Convert operates as an 'offline-first' software. 100% of the conversions and encodings process locally in your system. This makes our framework highly trusted by healthcare teams (HIPAA guidelines) and legal professionals bound under rigid client-non-disclosure policies.",
  },
  {
    id: "faq-2",
    cat: "formats",
    question: "How many formats can Lumina Convert encode?",
    answer: "Lumina supports over 200+ distinct multimedia extensions. You can convert documents (PDF, DOCX, XLSX, CSV), rich graphic layouts (WebP, SVG, PNG, TIFF, JPG), high frame rate films (MP4, MKV, MOV, GIF), and lossless studio audios (WAV, FLAC, Standard MP3).",
  },
  {
    id: "faq-3",
    cat: "installation",
    question: "Which platforms does the installer require?",
    answer: "Our standard installer supports Windows 10 and Windows 11 (both 64-bit platforms). It integrates pre-compiled architecture assemblies for NVIDIA CUDA, OpenCL cores, and standard CPU multithreading models out-of-the-box, ensuring optimal performance across different hardware configurations.",
  },
  {
    id: "faq-4",
    cat: "security",
    question: "Can I use Lumina Convert on confidential government datasets?",
    answer: "Yes. Because Lumina Convert holds zero networking permission layers on default execution files, it is impossible for compiled data structures to telemetry to external cloud coordinates. It safe-guards strict compliance acts.",
  },
  {
    id: "faq-5",
    cat: "installation",
    question: "How do I trigger folder watch automation channels?",
    answer: "In the desktop settings panel, select 'Watch Directories'. Link your target directories (e.g. ~/Downloads/Inputs). Select a standard encoding profile (e.g., PDF to Lossless WebP). When new items enter that folder path, Lumina Convert triggers automatically behind-the-scenes using minimal background system processing.",
  },
];

export default function FAQ() {
  const [searchTerm, setSearchTerm] = useState("");
  const [activeCat, setActiveCat] = useState("all");
  const [openId, setOpenId] = useState<string | null>("faq-0");

  useEffect(() => {
    updateSEO({
      title: "Help Center & FAQs | Lumina Convert Local Desktop Application",
      description: "Find instant answers to offline file security, HIPAA compliance protocols, multi-thread system processing hardware minimums, and folder automation pipelines on Lumina Convert.",
      keywords: "Lumina convert FAQ, HIPAA compliant PDF converter, offline file converter support, watch folders tutorial",
    });
  }, []);

  const filteredFaqs = FAQS_LIST.filter((faq) => {
    const matchesSearch =
      faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
      faq.answer.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCat = activeCat === "all" || faq.cat === activeCat;
    return matchesSearch && matchesCat;
  });

  return (
    <section className="py-12 bg-gradient-to-b from-[#FBFBFD] to-white min-h-screen">
      <div className="max-w-4xl mx-auto px-4 md:px-8 mt-12 pb-24 text-left">
        {/* Badge */}
        <div className="mb-6 flex justify-center lg:justify-start">
          <div className="inline-flex items-center space-x-2 bg-violet-50 border border-violet-100 px-3.5 py-1.5 rounded-full">
            <HelpCircle className="w-3.5 h-3.5 text-violet-600" />
            <span className="text-xs font-bold font-mono text-violet-700 uppercase tracking-widest">
              Lumina Support Registry
            </span>
          </div>
        </div>

        {/* Title */}
        <h1 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 tracking-tight leading-tight mb-5 text-center lg:text-left">
          Interactive Help Center &{" "}
          <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent font-extrabold">
            Knowledge Hub
          </span>
        </h1>
        <p className="text-slate-600 text-base md:text-lg font-light max-w-3xl mb-12 text-center lg:text-left">
          Have queries about dynamic on-device hardware acceleration, CUDA installation, folder watcher configurations, or offline licensing agreements? Browse our expert library.
        </p>

        {/* Search & Category Filter */}
        <div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm mb-10 space-y-4">
          <div className="relative">
            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-slate-400" />
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search through help topics (e.g., HIPAA, GPU, watch folders)..."
              className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200/80 rounded-2xl text-slate-800 text-sm focus:outline-none focus:ring-1 focus:ring-violet-500 focus:border-violet-500 focus:bg-white transition"
            />
          </div>

          <div className="flex flex-wrap gap-2 pt-2 border-t border-slate-100">
            {FAQ_CATEGORIES.map((cat) => (
              <button
                key={cat.id}
                onClick={() => {
                  setActiveCat(cat.id);
                  setOpenId(null);
                }}
                className={`text-xs font-semibold py-2 px-4 rounded-xl transition cursor-pointer border ${
                  activeCat === cat.id
                    ? "bg-violet-600 text-white border-violet-600"
                    : "bg-white text-slate-600 border-slate-200/60 hover:bg-slate-50"
                }`}
              >
                {cat.name}
              </button>
            ))}
          </div>
        </div>

        {/* FAQ Accordion Grid */}
        <div className="space-y-4" id="faq-interactive-accordion">
          {filteredFaqs.length > 0 ? (
            filteredFaqs.map((faq) => {
              const isOpen = openId === faq.id;
              return (
                <div
                  key={faq.id}
                  className={`rounded-2xl border transition-all duration-300 overflow-hidden ${
                    isOpen
                      ? "bg-slate-50-60 border-violet-100 shadow-sm"
                      : "bg-white border-slate-100 hover:border-slate-200"
                  }`}
                  id={faq.id}
                >
                  <button
                    onClick={() => setOpenId(isOpen ? null : faq.id)}
                    className="w-full py-5 px-6 md:px-8 flex items-center justify-between text-left focus:outline-none cursor-pointer"
                  >
                    <span className="font-display font-semibold text-sm md:text-base text-slate-800 pr-4">
                      {faq.question}
                    </span>
                    <div
                      className={`w-7 h-7 rounded-full border flex items-center justify-center transition-transform duration-300 flex-shrink-0 ${
                        isOpen ? "bg-violet-600 text-white border-violet-600" : "text-slate-400 bg-white"
                      }`}
                    >
                      {isOpen ? (
                        <Minus className="w-3.5 h-3.5 stroke-[2.5]" />
                      ) : (
                        <Plus className="w-3.5 h-3.5 stroke-[2.5]" />
                      )}
                    </div>
                  </button>

                  <AnimatePresence initial={false}>
                    {isOpen && (
                      <motion.div
                        initial={{ height: 0 }}
                        animate={{ height: "auto" }}
                        exit={{ height: 0 }}
                        transition={{ duration: 0.2, ease: "easeInOut" }}
                      >
                        <div className="px-6 md:px-8 pb-6 text-xs md:text-sm text-slate-500 font-light leading-relaxed border-t border-slate-100/30 pt-3">
                          {faq.answer}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })
          ) : (
            <div className="text-center py-12 bg-white rounded-3xl border border-dashed border-slate-200/85">
              <ShieldAlert className="w-8 h-8 text-slate-300 mx-auto mb-2" />
              <p className="text-sm font-semibold text-slate-700">No help logs matched search</p>
              <p className="text-xs text-slate-400 mt-1">Try other general keywords like 'free' or 'offline'.</p>
            </div>
          )}
        </div>

        {/* Support contacts banner */}
        <div className="mt-16 bg-white border border-slate-100 p-6 rounded-[28px] flex flex-col sm:flex-row items-center justify-between gap-6 shadow-sm">
          <div className="flex items-center space-x-4 text-left">
            <div className="w-12 h-12 rounded-2xl bg-indigo-50 border border-indigo-100 text-indigo-600 flex items-center justify-center shadow-inner">
              <MessageSquare className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-semibold text-sm text-slate-900">Still have custom script questions?</h4>
              <p className="text-xs text-slate-500 font-light mt-0.5">Speak with our local developers directly via WhatsApp.</p>
            </div>
          </div>
          <div className="flex gap-3">
            <a
              href="https://wa.me/923034572298"
              target="_blank"
              rel="noopener noreferrer"
              className="py-2 px-5 rounded-xl bg-emerald-600 hover:bg-emerald-700 transition text-white text-xs font-semibold shadow-sm"
            >
              WhatsApp (+92 303 4572298)
            </a>
            <a
              href="mailto:bahaduralimunnabhai@gmail.com"
              className="py-2 px-5 rounded-xl border border-slate-200 text-slate-700 hover:bg-slate-50 transition text-xs font-semibold"
            >
              Email Inbox
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}