"use client";

import { useState, useEffect } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Loader2, HelpCircle } from "lucide-react";
import { Dictionary } from "@/lib/IDict";
import { pb } from "@/lib/pb";

interface PBFaq {
  id: string;
  question: string;
  answer: string;
  lang: string;
  order: number;
}

export function FAQ({ dict, lang }: { dict: Dictionary["faq"]; lang: string }) {
  const [faqs, setFaqs] = useState<PBFaq[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchFaqs() {
      try {
        setLoading(true);
        const records = await pb.collection(`faqs_${lang}`).getFullList<PBFaq>({
          sort: "order",
          requestKey: null,
        });
        setFaqs(records);
      } catch (error) {
        console.error("Ошибка загрузки FAQ:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchFaqs();
  }, [lang]);

  // Функция для красивого рендеринга текста с поддержкой переносов и буллитов
  const formatAnswer = (text: string) => {
    return text.split("\n").map((line, i) => {
      const trimmedLine = line.trim();

      // Если строка начинается с буллита
      if (trimmedLine.startsWith("•")) {
        return (
          <div key={i} className="flex gap-3 mb-2 pl-2 group">
            <span className="text-secondary font-bold group-hover:animate-pulse">
              •
            </span>
            <span className="text-muted-foreground/90">
              {trimmedLine.replace("•", "").trim()}
            </span>
          </div>
        );
      }

      // Если строка пустая — это отступ между абзацами
      if (!trimmedLine) return <div key={i} className="h-4" />;

      // Обычный параграф
      return (
        <p
          key={i}
          className="mb-3 last:mb-0 text-muted-foreground/90 leading-relaxed"
        >
          {line}
        </p>
      );
    });
  };

  return (
    <section
      id="faq"
      className="py-32 px-4 container mx-auto max-w-4xl relative overflow-hidden"
    >
      {/* Мягкий фон */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[100vw] h-[500px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10" />

      <div className="flex flex-col items-center mb-16">
        <div className="bg-primary/10 p-3 rounded-2xl mb-6 border border-primary/20">
          <HelpCircle className="w-8 h-8 text-primary" />
        </div>
        <h2 className="text-4xl md:text-5xl font-black tracking-tight text-center">
          {dict.title}
        </h2>
      </div>

      {loading ? (
        <div className="flex flex-col items-center justify-center py-20 text-primary opacity-50">
          <Loader2 className="w-10 h-10 animate-spin mb-4" />
          <span className="text-xs tracking-[0.3em] uppercase font-mono">
            Synchronizing_Knowledge...
          </span>
        </div>
      ) : faqs.length === 0 ? (
        <div className="text-center py-20 border border-dashed border-border/50 rounded-[2.5rem] bg-card/20">
          <p className="text-muted-foreground font-mono text-sm uppercase tracking-widest">
            0 protocols found in cache.
          </p>
        </div>
      ) : (
        <Accordion type="single" collapsible className="w-full space-y-4">
          {faqs.map((faq) => (
            <AccordionItem
              key={faq.id}
              value={`item-${faq.id}`}
              className="border border-border/40 bg-card/30 backdrop-blur-md rounded-[1.5rem] px-6 transition-all duration-300 hover:border-primary/30 data-[state=open]:border-primary/50 data-[state=open]:bg-card/50 shadow-sm"
            >
              <AccordionTrigger className="text-left text-foreground hover:no-underline hover:text-primary transition-colors font-bold text-lg md:text-xl py-6">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="pb-8 text-base antialiased">
                <div className="border-t border-border/30 pt-6">
                  {formatAnswer(faq.answer)}
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      )}
    </section>
  );
}