"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { UI_CONFIG } from "@/lib/config";
import type { SiteContent } from "@/types/content";

const VISIBLE_COUNT = UI_CONFIG.faq.visibleCount;

interface FAQProps {
  data: SiteContent["faq"];
}

export function FAQ({ data: faq }: FAQProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [expanded, setExpanded] = useState(false);

  function toggle(index: number) {
    setOpenIndex(openIndex === index ? null : index);
  }

  const visibleItems = expanded ? faq.items : faq.items.slice(0, VISIBLE_COUNT);
  const hasMore = faq.items.length > VISIBLE_COUNT;

  return (
    <section id="faq" className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808]">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container">
        <Reveal>
          <SectionHeading centered>{faq.title}</SectionHeading>
        </Reveal>

        <div className="mx-auto mt-12 max-w-3xl space-y-2.5">
          {visibleItems.map((item, idx) => {
            const isOpen = openIndex === idx;
            return (
              <Reveal key={idx}>
                <div
                  className={`rounded-xl border transition-all duration-300 ${
                    isOpen
                      ? "border-gold/30 bg-gradient-to-br from-gold/[0.06] via-transparent to-gold/[0.03] shadow-md shadow-gold/5"
                      : "border-neutral-200 bg-white hover:border-neutral-300 dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:hover:border-white/[0.12]"
                  }`}
                >
                  <button
                    onClick={() => toggle(idx)}
                    className="flex w-full items-center gap-3 px-5 py-4 text-left cursor-pointer"
                  >
                    {/* Number badge */}
                    <span
                      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors duration-300 ${
                        isOpen
                          ? "bg-gold text-black"
                          : "bg-gold/10 text-gold-dark dark:text-gold-light"
                      }`}
                    >
                      {idx + 1}
                    </span>

                    <span className="flex-1 text-sm sm:text-base font-medium text-neutral-900 dark:text-white leading-snug">
                      {item.question}
                    </span>

                    <ChevronDown
                      size={16}
                      className={`shrink-0 transition-all duration-300 ${
                        isOpen ? "text-gold rotate-180" : "text-neutral-400 dark:text-neutral-500"
                      }`}
                    />
                  </button>

                  <div
                    className={`grid transition-all duration-300 ease-out ${
                      isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                    }`}
                  >
                    <div className="overflow-hidden">
                      <div className="px-5 pb-4 pl-14 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
                        {item.answer}
                      </div>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}

          {/* Show more / less */}
          {hasMore && (
            <Reveal>
              <div className="pt-2 text-center">
                <button
                  onClick={() => {
                    setExpanded(!expanded);
                    if (expanded) setOpenIndex(null);
                  }}
                  className="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-5 py-2 text-sm font-medium text-neutral-600 transition-all hover:border-gold/40 hover:text-gold dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-neutral-400 dark:hover:border-gold/30 dark:hover:text-gold cursor-pointer"
                >
                  {expanded ? "Скрыть" : `Ещё ${faq.items.length - VISIBLE_COUNT} вопросов`}
                  <ChevronDown
                    size={14}
                    className={`transition-transform duration-300 ${expanded ? "rotate-180" : ""}`}
                  />
                </button>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>
  );
}
