'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { faqs, faqCategories } from '@/data/faqs';
import { useLanguage } from '@/context/LanguageContext';

export default function FAQPage() {
  const [selectedCategory, setSelectedCategory] = useState('');
  const [openAccordion, setOpenAccordion] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const { t } = useLanguage();

  const filteredFAQs = faqs.filter((faq) => {
    const matchCategory = !selectedCategory || faq.category === selectedCategory;
    const matchSearch = faq.question.toLowerCase().includes(searchQuery.toLowerCase()) || faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
    return matchCategory && matchSearch;
  });

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase">❓ {t('faq.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('faq.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase">
            <Link href="/" className="hover:text-gold transition">{t('breadcrumb.home')}</Link>
            <span className="mx-2">/</span>
            <span className="text-ivory/60">{t('breadcrumb.faq')}</span>
          </nav>
        </div>
      </section>

      <section className="sticky top-16 z-40 bg-ivory border-b border-blush py-6">
        <div className="container-custom">
          <div className="mb-4">
            <input type="text" placeholder={t('faq.search.placeholder')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="input-field w-full" />
            <p className="text-xs text-grey mt-2">{t('faq.popular')}</p>
          </div>
          <div className="flex flex-wrap gap-2">
            <button onClick={() => setSelectedCategory('')} className={`px-4 py-2 rounded-full text-xs uppercase tracking-wider font-semibold transition ${!selectedCategory ? 'bg-gold text-white' : 'border border-gold text-gold hover:bg-gold hover:text-white'}`}>{t('faq.filter.all')}</button>
            {faqCategories.map((cat) => (
              <button key={cat.id} onClick={() => setSelectedCategory(cat.id)} className={`px-4 py-2 rounded-full text-xs uppercase tracking-wider font-semibold transition ${selectedCategory === cat.id ? 'bg-gold text-white' : 'border border-gold text-gold hover:bg-gold hover:text-white'}`}>{cat.name}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom max-w-3xl">
          {filteredFAQs.length > 0 ? (
            <div className="space-y-3">
              {filteredFAQs.map((faq) => (
                <div key={faq.id} className="border border-blush rounded-lg overflow-hidden hover:shadow-sm transition">
                  <button onClick={() => setOpenAccordion(openAccordion === faq.id ? null : faq.id)} className="w-full px-6 py-4 bg-white hover:bg-ivory transition flex items-center justify-between text-left">
                    <h3 className="font-semibold text-espresso">{faq.question}</h3>
                    <span className={`text-gold text-xl transition-transform duration-300 ${openAccordion === faq.id ? 'rotate-180' : ''}`}>▼</span>
                  </button>
                  {openAccordion === faq.id && (
                    <div className="px-6 py-4 bg-ivory border-t border-blush">
                      <p className="text-grey-dark whitespace-pre-wrap">{faq.answer}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <p className="text-grey-dark text-lg mb-4">No results found.</p>
              <button onClick={() => { setSearchQuery(''); setSelectedCategory(''); }} className="text-gold font-semibold hover:underline">Try again with different filters</button>
            </div>
          )}
        </div>
      </section>

      <section className="bg-blush py-12 md:py-16">
        <div className="container-custom text-center">
          <h2 className="font-cormorant text-2xl md:text-3xl font-bold text-espresso mb-4">{t('faq.contact.title')}</h2>
          <p className="text-espresso mb-8 max-w-2xl mx-auto">{t('faq.contact.subtitle')}</p>
          <Link href="/contact" className="btn-primary">{t('faq.contact.btn')}</Link>
        </div>
      </section>
      <Footer />
    </main>
  );
}