'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import {
  ChevronDownIcon,
  ChevronUpIcon,
  MagnifyingGlassIcon,
  BookOpenIcon,
  AcademicCapIcon,
  ClipboardDocumentListIcon,
  TrophyIcon,
  UserIcon,
  CogIcon,
  QuestionMarkCircleIcon,
  ChatBubbleLeftRightIcon,
  PhoneIcon,
  EnvelopeIcon
} from '@heroicons/react/24/outline';

interface FAQItem {
  id: string;
  question: string;
  answer: string;
  category: string;
}

interface GuideSection {
  id: string;
  title: string;
  icon: React.ComponentType<any>;
  description: string;
  steps: string[];
}

const faqData: FAQItem[] = [
  {
    id: '1',
    question: 'Bagaimana cara mendaftar akun baru?',
    answer: 'Untuk mendaftar akun baru, klik tombol "Daftar" di halaman login, kemudian isi formulir pendaftaran dengan data lengkap Anda. Setelah mendaftar, Anda akan menerima email konfirmasi untuk mengaktifkan akun.',
    category: 'Akun'
  },
  {
    id: '2',
    question: 'Bagaimana cara mengakses kursus yang sudah saya daftar?',
    answer: 'Setelah login, klik menu "Kursus Saya" di sidebar. Anda akan melihat semua kursus yang telah Anda daftarkan. Klik pada kursus yang ingin Anda akses untuk mulai belajar.',
    category: 'Kursus'
  },
  {
    id: '3',
    question: 'Bagaimana cara mengerjakan ujian?',
    answer: 'Masuk ke menu "Ujian", pilih ujian yang tersedia, baca instruksi dengan teliti, kemudian klik "Mulai Ujian". Pastikan koneksi internet stabil dan perhatikan waktu yang tersedia.',
    category: 'Ujian'
  },
  {
    id: '4',
    question: 'Bagaimana cara mengunduh sertifikat?',
    answer: 'Setelah menyelesaikan kursus dan lulus ujian, masuk ke menu "Sertifikat". Anda akan melihat sertifikat yang tersedia untuk diunduh dalam format PDF.',
    category: 'Sertifikat'
  },
  {
    id: '5',
    question: 'Apa yang harus dilakukan jika lupa password?',
    answer: 'Klik "Lupa Password" di halaman login, masukkan email Anda, dan ikuti instruksi yang dikirim ke email untuk reset password.',
    category: 'Akun'
  },
  {
    id: '6',
    question: 'Bagaimana cara mengubah informasi profil?',
    answer: 'Masuk ke menu "Profil" atau klik avatar Anda di pojok kanan atas, kemudian pilih "Profil Saya". Anda dapat mengubah informasi personal dan pengaturan keamanan di sana.',
    category: 'Profil'
  },
  {
    id: '7',
    question: 'Bagaimana cara menggunakan AI Assistant?',
    answer: 'Klik menu "AI Assistant" di sidebar. Anda dapat mengajukan pertanyaan tentang materi pembelajaran, meminta rekomendasi kursus, atau bantuan dalam memahami konsep tertentu.',
    category: 'AI Assistant'
  },
  {
    id: '8',
    question: 'Bagaimana cara melihat progress pembelajaran?',
    answer: 'Progress pembelajaran dapat dilihat di Dashboard utama atau di halaman detail setiap kursus. Anda akan melihat persentase penyelesaian dan modul yang sudah dikerjakan.',
    category: 'Progress'
  }
];

const guideData: GuideSection[] = [
  {
    id: 'getting-started',
    title: 'Memulai Pembelajaran',
    icon: BookOpenIcon,
    description: 'Panduan lengkap untuk memulai perjalanan pembelajaran Anda',
    steps: [
      'Daftar akun baru atau login dengan akun yang sudah ada',
      'Lengkapi profil Anda dengan informasi yang akurat',
      'Jelajahi katalog kursus yang tersedia',
      'Pilih dan daftarkan diri ke kursus yang diminati',
      'Mulai pembelajaran dengan mengikuti modul secara berurutan'
    ]
  },
  {
    id: 'taking-exams',
    title: 'Mengikuti Ujian',
    icon: ClipboardDocumentListIcon,
    description: 'Cara mengikuti ujian dan tips untuk mendapatkan hasil terbaik',
    steps: [
      'Pastikan Anda telah menyelesaikan semua modul pembelajaran',
      'Periksa jadwal ujian di menu "Jadwal"',
      'Siapkan koneksi internet yang stabil',
      'Masuk ke menu "Ujian" dan pilih ujian yang tersedia',
      'Baca instruksi dengan teliti sebelum memulai',
      'Kerjakan soal dengan tenang dan perhatikan waktu',
      'Submit jawaban sebelum waktu habis'
    ]
  },
  {
    id: 'certificates',
    title: 'Mendapatkan Sertifikat',
    icon: TrophyIcon,
    description: 'Proses mendapatkan dan mengunduh sertifikat digital',
    steps: [
      'Selesaikan semua modul dalam kursus',
      'Lulus ujian dengan nilai minimum yang ditentukan',
      'Tunggu proses verifikasi (biasanya 1-2 hari kerja)',
      'Cek menu "Sertifikat" untuk melihat sertifikat yang tersedia',
      'Unduh sertifikat dalam format PDF',
      'Sertifikat dapat diverifikasi melalui QR code yang tersedia'
    ]
  },
  {
    id: 'profile-settings',
    title: 'Pengaturan Profil',
    icon: UserIcon,
    description: 'Mengelola informasi profil dan pengaturan akun',
    steps: [
      'Klik avatar Anda di pojok kanan atas',
      'Pilih "Profil Saya" dari dropdown menu',
      'Update informasi personal di tab "Informasi Profil"',
      'Ubah password di tab "Keamanan" jika diperlukan',
      'Upload foto profil untuk personalisasi akun',
      'Simpan perubahan yang telah dibuat'
    ]
  }
];

const categories = ['Semua', 'Akun', 'Kursus', 'Ujian', 'Sertifikat', 'Profil', 'AI Assistant', 'Progress'];

export default function HelpPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('Semua');
  const [expandedFAQ, setExpandedFAQ] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'faq' | 'guide'>('faq');

  const filteredFAQs = faqData.filter(faq => {
    const matchesSearch = faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'Semua' || faq.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const toggleFAQ = (id: string) => {
    setExpandedFAQ(expandedFAQ === id ? null : id);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center">
            <QuestionMarkCircleIcon className="mx-auto h-12 w-12 text-primary-600 mb-4" />
            <h1 className="text-3xl font-bold text-gray-900 mb-2">Pusat Bantuan</h1>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Temukan jawaban untuk pertanyaan Anda atau pelajari cara menggunakan platform LMS BGN
            </p>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Tab Navigation */}
        <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg mb-8 max-w-md mx-auto">
          <button
            onClick={() => setActiveTab('faq')}
            className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
              activeTab === 'faq'
                ? 'bg-white text-primary-600 shadow-sm'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            FAQ
          </button>
          <button
            onClick={() => setActiveTab('guide')}
            className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
              activeTab === 'guide'
                ? 'bg-white text-primary-600 shadow-sm'
                : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            Panduan
          </button>
        </div>

        {activeTab === 'faq' && (
          <>
            {/* Search and Filter */}
            <div className="mb-8">
              <div className="max-w-2xl mx-auto">
                <div className="relative mb-6">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
                  </div>
                  <input
                    type="text"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-primary-500 focus:border-primary-500"
                    placeholder="Cari pertanyaan atau topik..."
                  />
                </div>

                {/* Category Filter */}
                <div className="flex flex-wrap gap-2 justify-center">
                  {categories.map((category) => (
                    <button
                      key={category}
                      onClick={() => setSelectedCategory(category)}
                      className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                        selectedCategory === category
                          ? 'bg-primary-600 text-white'
                          : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-300'
                      }`}
                    >
                      {category}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* FAQ List */}
            <div className="max-w-4xl mx-auto">
              {filteredFAQs.length === 0 ? (
                <div className="text-center py-12">
                  <QuestionMarkCircleIcon className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 mb-2">Tidak ada hasil ditemukan</h3>
                  <p className="text-gray-600">Coba ubah kata kunci pencarian atau kategori filter.</p>
                </div>
              ) : (
                <div className="space-y-4">
                  {filteredFAQs.map((faq) => (
                    <div key={faq.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                      <button
                        onClick={() => toggleFAQ(faq.id)}
                        className="w-full px-6 py-4 text-left hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors"
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <h3 className="text-lg font-medium text-gray-900 mb-1">{faq.question}</h3>
                            <span className="inline-block px-2 py-1 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">
                              {faq.category}
                            </span>
                          </div>
                          <div className="ml-4">
                            {expandedFAQ === faq.id ? (
                              <ChevronUpIcon className="h-5 w-5 text-gray-500" />
                            ) : (
                              <ChevronDownIcon className="h-5 w-5 text-gray-500" />
                            )}
                          </div>
                        </div>
                      </button>
                      {expandedFAQ === faq.id && (
                        <div className="px-6 pb-4">
                          <div className="border-t border-gray-200 pt-4">
                            <p className="text-gray-700 leading-relaxed">{faq.answer}</p>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </>
        )}

        {activeTab === 'guide' && (
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {guideData.map((guide) => {
                const IconComponent = guide.icon;
                return (
                  <div key={guide.id} className="bg-white rounded-lg border border-gray-200 p-6">
                    <div className="flex items-center mb-4">
                      <div className="flex-shrink-0">
                        <div className="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-primary-600" />
                        </div>
                      </div>
                      <div className="ml-4">
                        <h3 className="text-xl font-semibold text-gray-900">{guide.title}</h3>
                        <p className="text-gray-600 text-sm mt-1">{guide.description}</p>
                      </div>
                    </div>
                    <div className="space-y-3">
                      {guide.steps.map((step, index) => (
                        <div key={index} className="flex items-start">
                          <div className="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm font-medium mr-3 mt-0.5">
                            {index + 1}
                          </div>
                          <p className="text-gray-700 text-sm leading-relaxed">{step}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* Contact Support */}
        <div className="mt-16 bg-gradient-to-r from-primary-600 to-secondary-600 rounded-2xl p-8 text-center">
          <ChatBubbleLeftRightIcon className="mx-auto h-12 w-12 text-white mb-4" />
          <h2 className="text-2xl font-bold text-white mb-2">Masih Butuh Bantuan?</h2>
          <p className="text-primary-100 mb-6 max-w-2xl mx-auto">
            Tim support kami siap membantu Anda 24/7. Hubungi kami melalui berbagai channel yang tersedia.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="mailto:support@lms-bgn.go.id"
              className="inline-flex items-center px-6 py-3 bg-white text-primary-600 rounded-lg font-medium hover:bg-gray-50 transition-colors"
            >
              <EnvelopeIcon className="w-5 h-5 mr-2" />
              Email Support
            </a>
            <a
              href="tel:+62-21-1234-5678"
              className="inline-flex items-center px-6 py-3 bg-primary-700 text-white rounded-lg font-medium hover:bg-primary-800 transition-colors"
            >
              <PhoneIcon className="w-5 h-5 mr-2" />
              Telepon Support
            </a>
          </div>
        </div>

        {/* Quick Links */}
        <div className="mt-12 text-center">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Link Cepat</h3>
          <div className="flex flex-wrap gap-4 justify-center">
            <Link
              href="/login"
              className="text-primary-600 hover:text-primary-700 font-medium"
            >
              Kembali ke Login
            </Link>
            <Link
              href="/register"
              className="text-primary-600 hover:text-primary-700 font-medium"
            >
              Daftar Akun Baru
            </Link>
            <Link
              href="/forgot-password"
              className="text-primary-600 hover:text-primary-700 font-medium"
            >
              Reset Password
            </Link>
            <Link
              href="/"
              className="text-primary-600 hover:text-primary-700 font-medium"
            >
              Kembali ke Dashboard
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}