"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { MessagesSquare } from "lucide-react";
import { Container } from "@/components/common/Container";
import { SearchBar } from "@/components/common/SearchBar";
import { AccordionItem } from "@/components/common/Accordion";
import { PageHero } from "@/components/common/PageHero";
import { Reveal } from "@/components/motion/Reveal";
import { FAQS, FAQ_CATEGORIES } from "@/data/faqs";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";

export default function FaqPage() {
  const { t } = useTranslation();
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState<string>("all");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return FAQS.filter((f) => {
      if (category !== "all" && f.categoryKey !== category) return false;
      if (!q) return true;
      return (
        t(f.questionKey).toLowerCase().includes(q) ||
        t(f.answerKey).toLowerCase().includes(q)
      );
    });
  }, [query, category, t]);

  return (
    <>
      <PageHero
        eyebrow={t("nav.faq")}
        title={t("faq.title")}
        subtitle={t("faq.subtitle")}
      >
        <div className="mx-auto max-w-xl">
          <SearchBar
            value={query}
            onChange={setQuery}
            placeholder={t("faq.search")}
            ariaLabel={t("faq.search")}
          />
        </div>
      </PageHero>

      <section className="section">
        <Container>
          {/* Category chips */}
          <Reveal>
            <div
              role="tablist"
              aria-label={t("faq.categoriesAria")}
              className="flex flex-wrap items-center justify-center gap-2"
            >
              <CategoryChip
                active={category === "all"}
                onClick={() => setCategory("all")}
                label={t("faq.allCategories")}
              />
              {FAQ_CATEGORIES.map((cat) => (
                <CategoryChip
                  key={cat}
                  active={category === cat}
                  onClick={() => setCategory(cat)}
                  label={t(`faq.categories.${cat}`)}
                />
              ))}
            </div>
          </Reveal>

          {/* FAQ list */}
          <div className="mx-auto mt-10 max-w-3xl space-y-3">
            {filtered.length === 0 ? (
              <Reveal className="rounded-3xl border border-dashed border-slate-200 bg-white/60 p-12 text-center dark:border-white/[0.06] dark:bg-white/[0.04]">
                <p className="text-sm text-slate-500 dark:text-slate-400">
                  {t("faq.notFound")}
                </p>
                <Link
                  href="/contact"
                  className="mt-4 inline-flex items-center gap-2 text-sm font-bold text-brand-600 transition-colors hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
                >
                  <MessagesSquare className="h-4 w-4" />
                  {t("faq.contactUs")}
                </Link>
              </Reveal>
            ) : (
              filtered.map((faq, idx) => (
                <Reveal key={faq.id} delay={(idx % 3) * 0.05}>
                  <AccordionItem title={t(faq.questionKey)}>
                    <p>{t(faq.answerKey)}</p>
                    <p className="mt-3 text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                      {t(`faq.categories.${faq.categoryKey}`)}
                    </p>
                  </AccordionItem>
                </Reveal>
              ))
            )}
          </div>

          {/* Bottom help CTA */}
          <Reveal className="mx-auto mt-16 max-w-2xl overflow-hidden rounded-3xl bg-gradient-to-br from-brand-50 via-white to-accent-50 p-8 text-center shadow-soft dark:from-brand-500/10 dark:via-white/[0.04] dark:to-accent-500/10">
            <p className="text-base font-bold text-slate-900 dark:text-white">
              {t("faq.notFound")}
            </p>
            <Link
              href="/contact"
              className="group mt-4 inline-flex items-center gap-2 rounded-full bg-brand-600 px-5 py-2.5 text-sm font-bold text-white shadow-soft transition-all duration-200 ease-snappy hover:-translate-y-0.5 hover:bg-brand-700 hover:shadow-glow"
            >
              <MessagesSquare className="h-4 w-4" />
              {t("faq.contactUs")}
            </Link>
          </Reveal>
        </Container>
      </section>
    </>
  );
}

function CategoryChip({
  active,
  onClick,
  label,
}: {
  active: boolean;
  onClick: () => void;
  label: string;
}) {
  return (
    <button
      type="button"
      role="tab"
      aria-selected={active}
      onClick={onClick}
      className={cn(
        "rounded-full border px-4 py-1.5 text-sm font-semibold transition-all duration-200 ease-snappy",
        active
          ? "border-brand-600 bg-brand-600 text-white shadow-soft"
          : "border-slate-200 bg-white text-slate-700 hover:-translate-y-0.5 hover:border-slate-300 hover:text-slate-900 hover:shadow-soft dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-700 dark:hover:text-white",
      )}
    >
      {label}
    </button>
  );
}