"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import { Search, ChevronRight } from "lucide-react";
import Link from "next/link";

export default function HelpPage() {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("tümü");

  const navItems = [
    { name: "Ana Sayfa", id: "/" },
    { name: "Öğretmenler", id: "/teachers" },
    { name: "Etkinlikler", id: "/events" },
    { name: "Çalışma Programı", id: "/schedule" },
  ];

  const categories = [
    { id: "tümü", name: "Tüm Kategoriler", icon: "📚" },
    { id: "başlangıç", name: "Başlangıç Rehberi", icon: "🚀" },
    { id: "ödeme", name: "Ödeme & Faturalama", icon: "💳" },
    { id: "ders", name: "Dersler", icon: "📖" },
    { id: "teknik", name: "Teknik Destek", icon: "🔧" },
    { id: "hesap", name: "Hesap Yönetimi", icon: "👤" },
  ];

  const helpArticles = [
    {
      id: "1",      category: "başlangıç",      title: "Nasıl Başlarım?",      excerpt: "Platformda yeni misiniz? Adım adım başlangıç rehberimizi takip edin.",      content: "Kayıt olun, profil oluşturun ve ilk öğretmeninizi seçin..."},
    {
      id: "2",      category: "ödeme",      title: "Ödeme Yöntemleri",      excerpt: "Hangi ödeme yöntemlerini destekliyoruz?",      content: "Kredi kartı, banka transferi, e-cüzdan ve daha fazlası..."},
    {
      id: "3",      category: "ders",      title: "Ders Rezervasyonu",      excerpt: "Ders nasıl ayırılır?",      content: "Öğretmen seçin, uygun saati bulun ve dersi rezerve edin..."},
    {
      id: "4",      category: "teknik",      title: "Video Konferans Problemi",      excerpt: "Kamera veya mikrofon çalışmıyor mu?",      content: "Tarayıcı izinlerini kontrol edin ve bağlantıyı yenileyin..."},
    {
      id: "5",      category: "hesap",      title: "Şifre Sıfırlama",      excerpt: "Şifrenizi unuttuysanız ne yapmalısınız?",      content: "Giriş sayfasında 'Şifremi Unuttum' seçeneğine tıklayın..."},
    {
      id: "6",      category: "başlangıç",      title: "Profil Oluşturma",      excerpt: "Profilinizi nasıl tamamlayabilirsiniz?",      content: "Fotoğraf yükleyin, hedeflerinizi belirtin ve tercihlerinizi ayarlayın..."},
  ];

  const faqData = [
    {
      id: "1",      title: "Ders iptal etmek istiyorum. Ne yapmalıyım?",      content: "Dersin başlamadan 24 saat önce iptal edebilirsiniz. Uygulamada 'Derslerim' bölümüne giderek iptal düğmesine tıklayın. Geç iptaller geri iade edilmeyebilir."},
    {
      id: "2",      title: "Öğretmen değiştirmek istiyorum.",      content: "Evet, istediğiniz zaman öğretmen değiştirebilirsiniz. Destek ekibimizle iletişime geçerek veya uygulama içinden yeni bir öğretmen seçebilirsiniz."},
    {
      id: "3",      title: "Sertifikat nasıl alırım?",      content: "Kurs tamamlandıktan sonra sertifika otomatik olarak hesabınıza gönderilir. Sertifikayı indirip yazdırabilirsiniz."},
    {
      id: "4",      title: "Para iadesi nasıl talep ederim?",      content: "Tamamlanmamış dersler için 30 gün içinde para iade talebinde bulunabilirsiniz. Destek ekibimizle iletişime geçin."},
    {
      id: "5",      title: "Grup dersine katılabilir miyim?",      content: "Evet! Bireysel dersler dışında grup dersleri de bulunmaktadır. Platform üzerinde grup derslerine ayrı olarak kaydolabilirsiniz."},
    {
      id: "6",      title: "Teknik sorularım için ne yapmalıyım?",      content: "Canlı sohbet, email veya telefon aracılığıyla teknik desteğimize ulaşabilirsiniz. Ortalama yanıt süresi 5 dakikadır."},
  ];

  const filteredArticles = helpArticles.filter((article) => {
    const matchesCategory = selectedCategory === "tümü" || article.category === selectedCategory;
    const matchesSearch = article.title.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      {/* Breadcrumb */}
      <nav className="hidden md:flex items-center gap-2 p-4 text-sm text-gray-600" aria-label="Breadcrumb">
        <Link href="/" className="hover:text-primary-cta">Ana Sayfa</Link>
        <span>/</span>
        <span className="text-gray-900 font-semibold">Yardım Merkezi</span>
      </nav>

      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Öğretmen Platformu"
          bottomLeftText="Eğitim Topluluğu"
          bottomRightText="info@platform.com"
        />
      </div>

      <div className="py-12 px-4 md:py-20">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Yardım Merkezi</h1>
            <p className="text-lg text-gray-600 mb-8">Soruların cevaplarını ve rehberleri burada bulabilirsiniz.</p>

            {/* Search */}
            <div className="max-w-2xl mx-auto">
              <div className="flex items-center gap-2 bg-card border border-border rounded-lg px-4 py-3">
                <Search size={20} className="text-gray-400" />
                <input
                  type="text"
                  placeholder="Makaleler ve cevapları arayın..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full bg-transparent outline-none text-foreground"
                  aria-label="Yardım arama"
                />
              </div>
            </div>
          </div>

          {/* Categories */}
          <div className="flex flex-wrap gap-2 justify-center mb-12 pb-8 border-b border-border">
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.id)}
                className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${
                  selectedCategory === cat.id
                    ? "bg-primary-cta text-white"
                    : "bg-card text-foreground border border-border hover:bg-background"
                }`}
                aria-pressed={selectedCategory === cat.id}
              >
                {cat.icon} {cat.name}
              </button>
            ))}
          </div>

          {/* Articles Grid */}
          {filteredArticles.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
              {filteredArticles.map((article) => (
                <div
                  key={article.id}
                  className="bg-card border border-border rounded-lg p-6 hover:border-primary-cta/50 cursor-pointer transition-colors group"
                >
                  <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-primary-cta transition-colors">
                    {article.title}
                  </h3>
                  <p className="text-sm text-gray-600 mb-4">{article.excerpt}</p>
                  <div className="flex items-center gap-2 text-primary-cta text-sm font-semibold">
                    Okuyun
                    <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <p className="text-gray-600 text-lg">Aradığınız makaleler bulunamadı.</p>
            </div>
          )}

          {/* FAQ Section */}
          <div id="faq" data-section="faq" className="mt-20">
            <h2 className="text-3xl font-bold text-foreground mb-8 text-center">Sıkça Sorulan Sorular</h2>
            <FaqDouble
              faqs={faqData}
              title=""
              description=""
              faqsAnimation="slide-up"
              textboxLayout="default"
              useInvertedBackground={false}
            />
          </div>

          {/* Contact CTA */}
          <div className="mt-16 bg-card border border-border rounded-lg p-8 text-center">
            <h3 className="text-2xl font-bold text-foreground mb-2">Hala yardıma mı ihtiyacınız var?</h3>
            <p className="text-gray-600 mb-6">Destek ekibimiz 24/7 burada sizin için.</p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Link
                href="/contact"
                className="px-6 py-3 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity font-semibold"
              >
                Bize Ulaşın
              </Link>
              <a
                href="#"
                className="px-6 py-3 bg-card border border-border text-foreground rounded-lg hover:bg-background transition-colors font-semibold"
              >
                Canlı Sohbet Başlat
              </a>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Öğretmen Platformu"
          leftLink={{
            text: "Gizlilik Politikası",            href: "#"}}
          rightLink={{
            text: "Kullanım Şartları",            href: "#"}}
        />
      </div>
    </ThemeProvider>
  );
}
