'use client';

import { useState } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { FaqItem } from '@/lib/api';
import Card from '@/components/ui/Card';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';

// Receives the FAQ list already fetched on the server so the questions and
// answers are present in the initial HTML for crawlers. The accordion below is
// purely a visual toggle; the answer text stays in the DOM either way.
export default function FaqClient({ initialFaqs }: { initialFaqs: FaqItem[] }) {
  const { locale } = useLanguage();
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div className="section-padding">
      <div className="container-page max-w-3xl">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-primary-dark mb-4">
            {locale === 'es' ? 'Preguntas Frecuentes' : 'Frequently Asked Questions'}
          </h1>
          <p className="text-gray-600">
            {locale === 'es'
              ? 'Encuentra respuestas a las preguntas más comunes sobre Spanglish'
              : 'Find answers to the most common questions about Spanglish'}
          </p>
        </div>

        {initialFaqs.length === 0 ? (
          <Card className="p-8 text-center">
            <p className="text-gray-600">
              {locale === 'es'
                ? 'No hay preguntas frecuentes publicadas en este momento.'
                : 'No FAQ questions are published at the moment.'}
            </p>
          </Card>
        ) : (
          <div className="space-y-4">
            {initialFaqs.map((faq, index) => (
              <Card key={faq.id} className="overflow-hidden">
                <button
                  onClick={() => toggleFAQ(index)}
                  className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
                >
                  <span className="font-semibold text-primary-dark pr-4">
                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
                  </span>
                  <ChevronDownIcon
                    className={clsx(
                      'w-5 h-5 text-gray-500 flex-shrink-0 transition-transform duration-200',
                      openIndex === index && 'transform rotate-180'
                    )}
                  />
                </button>
                <div
                  className={clsx(
                    'overflow-hidden transition-all duration-200',
                    openIndex === index ? 'max-h-96' : 'max-h-0'
                  )}
                >
                  <div className="px-6 pb-4 text-gray-600">
                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
                  </div>
                </div>
              </Card>
            ))}
          </div>
        )}

        <Card className="mt-12 p-8 text-center bg-primary-yellow/10">
          <h2 className="text-xl font-semibold text-primary-dark mb-2">
            {locale === 'es' ? '¿Todavía tienes preguntas?' : 'Still have questions?'}
          </h2>
          <p className="text-gray-600 mb-4">
            {locale === 'es'
              ? 'No dudes en contactarnos. ¡Estamos aquí para ayudarte!'
              : "Don't hesitate to reach out. We're here to help!"}
          </p>
          <a
            href="/contact"
            className="inline-flex items-center justify-center px-6 py-3 bg-primary-yellow text-primary-dark font-semibold rounded-btn hover:bg-primary-yellow/90 transition-colors"
          >
            {locale === 'es' ? 'Contáctanos' : 'Contact Us'}
          </a>
        </Card>
      </div>
    </div>
  );
}