"use client";

import { useState, useEffect } from "react";
import {
  Search,
  Menu,
  Download,
  ExternalLink,
  Calendar,
  User,
  Tag,
  ChevronUp,
  Globe,
  Mail,
  Phone,
} from "lucide-react";

export default function JournalPage() {
  const [showScrollTop, setShowScrollTop] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [activeFilter, setActiveFilter] = useState("all");

  useEffect(() => {
    const handleScroll = () => {
      setShowScrollTop(window.scrollY > 400);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const articles = [
    {
      id: 1,
      title: "تطوير منهج تعليم اللغة العربية في العصر الرقمي",
      author: "أ.د. محمد أحمد السيد",
      abstract:
        "هذا البحث يناقش تطوير منهج تعليم اللغة العربية باستخدام التكنولوجيا الحديثة...",
      date: "2024-10-15",
      volume: "Vol. 15",
      issue: "No. 2",
      pages: "45-78",
      category: "التربية",
      downloads: 245,
    },
    {
      id: 2,
      title: "الذكاء الاصطناعي وتأثيره على التعليم العالي",
      author: "د. فاطمة عبد الرحمن",
      abstract:
        "دراسة تحليلية لتأثير تقنيات الذكاء الاصطناعي على أساليب التعليم في الجامعات...",
      date: "2024-10-10",
      volume: "Vol. 15",
      issue: "No. 2",
      pages: "12-35",
      category: "التكنولوجيا",
      downloads: 187,
    },
    {
      id: 3,
      title: "منهجية البحث العلمي في الدراسات الإسلامية",
      author: "أ.د. عبد الله محمد علي",
      abstract:
        "بحث يركز على تطوير منهجيات البحث العلمي المناسبة للدراسات الإسلامية المعاصرة...",
      date: "2024-10-05",
      volume: "Vol. 15",
      issue: "No. 1",
      pages: "89-112",
      category: "الدراسات الإسلامية",
      downloads: 312,
    },
  ];

  const filteredArticles = articles.filter((article) => {
    const matchesSearch =
      article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      article.author.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesFilter =
      activeFilter === "all" || article.category === activeFilter;
    return matchesSearch && matchesFilter;
  });

  return (
    <div
      className="min-h-screen bg-white font-[Inter]"
      style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='batik' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cg fill='%231995DC' fill-opacity='0.04'%3E%3Ccircle cx='25' cy='25' r='8'/%3E%3Ccircle cx='75' cy='75' r='8'/%3E%3Ccircle cx='25' cy='75' r='6'/%3E%3Ccircle cx='75' cy='25' r='6'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3Cpath d='M20 20l10 10M70 70l10 10M20 80l10-10M70 30l10-10' stroke='%231995DC' stroke-width='1' stroke-opacity='0.03'/%3E%3Cpath d='M35 15c0 5-5 10-10 10s-10-5-10-10 5-10 10-10 10 5 10 10zM85 65c0 5-5 10-10 10s-10-5-10-10 5-10 10-10 10 5 10 10zM35 85c0 5-5 10-10 10s-10-5-10-10 5-10 10-10 10 5 10 10zM85 35c0 5-5 10-10 10s-10-5-10-10 5-10 10-10 10 5 10 10z' fill='%231995DC' fill-opacity='0.02'/%3E%3Cpath d='M45 40c2 2 2 6 0 8s-6 2-8 0-2-6 0-8 6-2 8 0zM55 60c2 2 2 6 0 8s-6 2-8 0-2-6 0-8 6-2 8 0z' fill='%231995DC' fill-opacity='0.03'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23batik)'/%3E%3C/svg%3E")`,
        backgroundSize: "200px 200px",
      }}
    >
      {/* Header */}
      <header className="bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Top Header */}
          <div className="flex items-center justify-between py-4">
            {/* University Logo & Title */}
            <div className="flex items-center space-x-4">
              <div className="w-12 h-12 bg-[#1995DC] rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">UIN</span>
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                  An-Nahdah Al-'Arabiyah
                </h1>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Jurnal Pendidikan Bahasa Arab dan Keislaman
                </p>
              </div>
            </div>

            {/* Quick Info */}
            <div className="hidden lg:flex items-center space-x-6 text-sm text-gray-600 dark:text-gray-400">
              <div className="flex items-center space-x-1">
                <Globe className="w-4 h-4" />
                <span>ISSN: 2528-2611</span>
              </div>
              <div className="flex items-center space-x-1">
                <Mail className="w-4 h-4" />
                <span>journal@ar-raniry.ac.id</span>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <nav className="border-t border-gray-200 dark:border-gray-700">
            <div className="flex items-center justify-between py-4">
              <div className="flex items-center space-x-8">
                <a
                  href="#"
                  className="text-[#1995DC] font-medium border-b-2 border-[#1995DC] pb-2"
                >
                  Beranda
                </a>
                <a
                  href="#"
                  className="text-gray-700 dark:text-gray-300 hover:text-[#1995DC] transition-colors pb-2"
                >
                  Edisi Terkini
                </a>
                <a
                  href="#"
                  className="text-gray-700 dark:text-gray-300 hover:text-[#1995DC] transition-colors pb-2"
                >
                  Arsip
                </a>
                <a
                  href="#"
                  className="text-gray-700 dark:text-gray-300 hover:text-[#1995DC] transition-colors pb-2"
                >
                  Submit Artikel
                </a>
                <a
                  href="#"
                  className="text-gray-700 dark:text-gray-300 hover:text-[#1995DC] transition-colors pb-2"
                >
                  Panduan Penulis
                </a>
                <a
                  href="#"
                  className="text-gray-700 dark:text-gray-300 hover:text-[#1995DC] transition-colors pb-2"
                >
                  Tentang
                </a>
              </div>

              <button className="lg:hidden p-2 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
                <Menu className="w-6 h-6" />
              </button>
            </div>
          </nav>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Main Content */}
          <main className="flex-1">
            {/* Hero Section */}
            <div className="bg-gradient-to-r from-[#1995DC] to-[#1473B3] rounded-xl p-8 text-white mb-8 shadow-lg">
              <div className="max-w-3xl">
                <h2 className="text-3xl font-bold mb-4">
                  Jurnal An-Nahdah Al-'Arabiyah
                </h2>
                <p className="text-blue-100 text-lg leading-relaxed mb-6">
                  Jurnal ilmiah yang memuat kajian mendalam tentang pendidikan
                  bahasa Arab, keislaman, dan pengembangan metodologi
                  pembelajaran di era modern.
                </p>
                <div className="flex flex-wrap gap-4">
                  <button className="bg-white text-[#1995DC] px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors shadow-md">
                    Submit Artikel
                  </button>
                  <button className="border border-white/30 text-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition-colors">
                    Download Panduan
                  </button>
                </div>
              </div>
            </div>

            {/* Search & Filter */}
            <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
              <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
                <div className="relative flex-1 max-w-md">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                  <input
                    type="text"
                    placeholder="Cari artikel, penulis, atau kata kunci..."
                    className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#1995DC] focus:border-transparent dark:bg-gray-700 dark:text-white"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>

                <div className="flex gap-2">
                  {["all", "التربية", "التكنولوجيا", "الدراسات الإسلامية"].map(
                    (filter) => (
                      <button
                        key={filter}
                        onClick={() => setActiveFilter(filter)}
                        className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                          activeFilter === filter
                            ? "bg-[#1995DC] text-white shadow-md"
                            : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
                        }`}
                      >
                        {filter === "all" ? "Semua" : filter}
                      </button>
                    ),
                  )}
                </div>
              </div>
            </div>

            {/* Articles List */}
            <div className="space-y-6">
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
                Artikel Terbaru
              </h3>

              {filteredArticles.map((article) => (
                <article
                  key={article.id}
                  className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:bg-white/95 dark:hover:bg-gray-800/95 transition-all"
                >
                  <div className="flex flex-col lg:flex-row gap-6">
                    <div className="flex-1">
                      <div className="flex items-start justify-between mb-4">
                        <div className="flex-1">
                          <span className="inline-block bg-blue-100 dark:bg-blue-900 text-[#1995DC] dark:text-blue-200 text-xs px-3 py-1 rounded-full mb-3">
                            {article.category}
                          </span>
                          <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-2 line-clamp-2">
                            {article.title}
                          </h4>
                          <div className="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400 mb-3">
                            <div className="flex items-center space-x-1">
                              <User className="w-4 h-4" />
                              <span>{article.author}</span>
                            </div>
                            <div className="flex items-center space-x-1">
                              <Calendar className="w-4 h-4" />
                              <span>
                                {new Date(article.date).toLocaleDateString(
                                  "id-ID",
                                )}
                              </span>
                            </div>
                            <div className="flex items-center space-x-1">
                              <Download className="w-4 h-4" />
                              <span>{article.downloads} downloads</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <p className="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4 line-clamp-3">
                        {article.abstract}
                      </p>

                      <div className="flex items-center justify-between">
                        <div className="text-xs text-gray-500 dark:text-gray-400">
                          {article.volume}, {article.issue} • Pages{" "}
                          {article.pages}
                        </div>
                        <div className="flex space-x-2">
                          <button className="flex items-center space-x-1 text-[#1995DC] hover:text-[#1473B3] text-sm font-medium">
                            <ExternalLink className="w-4 h-4" />
                            <span>Baca Selengkapnya</span>
                          </button>
                          <button className="flex items-center space-x-1 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 text-sm font-medium">
                            <Download className="w-4 h-4" />
                            <span>PDF</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
              ))}
            </div>

            {/* Pagination */}
            <div className="flex justify-center mt-12">
              <nav className="flex space-x-2">
                <button className="px-4 py-2 text-sm font-medium text-gray-500 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                  Previous
                </button>
                <button className="px-4 py-2 text-sm font-medium text-white bg-[#1995DC] border border-[#1995DC] rounded-lg shadow-md">
                  1
                </button>
                <button className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                  2
                </button>
                <button className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                  3
                </button>
                <button className="px-4 py-2 text-sm font-medium text-gray-500 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                  Next
                </button>
              </nav>
            </div>
          </main>

          {/* Sidebar */}
          <aside className="lg:w-80 space-y-6">
            {/* Current Issue */}
            <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                Edisi Terkini
              </h3>
              <div className="space-y-4">
                <div className="border-2 border-blue-200 dark:border-blue-800 rounded-lg p-4 bg-blue-50/80 dark:bg-blue-900/20 backdrop-blur-sm">
                  <div className="text-center mb-3">
                    <div className="w-16 h-20 bg-[#1995DC] rounded-lg mx-auto mb-2 flex items-center justify-center shadow-md">
                      <span className="text-white font-bold text-xs">
                        Vol 15
                      </span>
                    </div>
                    <h4 className="font-semibold text-gray-900 dark:text-white text-sm">
                      Volume 15, Nomor 2
                    </h4>
                    <p className="text-xs text-gray-600 dark:text-gray-400">
                      Oktober 2024
                    </p>
                  </div>
                  <button className="w-full bg-[#1995DC] text-white text-sm font-medium py-2 rounded-lg hover:bg-[#1473B3] transition-colors shadow-md">
                    Lihat Edisi
                  </button>
                </div>
              </div>
            </div>

            {/* Journal Info */}
            <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                Informasi Jurnal
              </h3>
              <div className="space-y-3 text-sm">
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">
                    ISSN:
                  </span>
                  <span className="ml-2 text-gray-600 dark:text-gray-400">
                    2528-2611 (Online)
                  </span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">
                    DOI:
                  </span>
                  <span className="ml-2 text-gray-600 dark:text-gray-400">
                    10.22373
                  </span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">
                    Frekuensi:
                  </span>
                  <span className="ml-2 text-gray-600 dark:text-gray-400">
                    2 kali per tahun
                  </span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">
                    Editor:
                  </span>
                  <span className="ml-2 text-gray-600 dark:text-gray-400">
                    Prof. Dr. Ahmad Yusuf
                  </span>
                </div>
                <div>
                  <span className="font-medium text-gray-700 dark:text-gray-300">
                    Penerbit:
                  </span>
                  <span className="ml-2 text-gray-600 dark:text-gray-400">
                    UIN Ar-Raniry
                  </span>
                </div>
              </div>
            </div>

            {/* Tools & Resources */}
            <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                Tools & Resources
              </h3>
              <div className="space-y-3">
                <a
                  href="#"
                  className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50/80 dark:hover:bg-gray-700/80 backdrop-blur-sm transition-colors"
                >
                  <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center shadow-sm">
                    <span className="text-white text-xs font-bold">T</span>
                  </div>
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Turnitin
                  </span>
                </a>
                <a
                  href="#"
                  className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50/80 dark:hover:bg-gray-700/80 backdrop-blur-sm transition-colors"
                >
                  <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
                    <span className="text-white text-xs font-bold">M</span>
                  </div>
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Mendeley
                  </span>
                </a>
                <a
                  href="#"
                  className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50/80 dark:hover:bg-gray-700/80 backdrop-blur-sm transition-colors"
                >
                  <div className="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center shadow-sm">
                    <span className="text-white text-xs font-bold">G</span>
                  </div>
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Grammarly
                  </span>
                </a>
              </div>
            </div>

            {/* Quick Stats */}
            <div className="bg-gradient-to-br from-blue-50/80 to-blue-100/80 dark:from-blue-900/20 dark:to-blue-800/20 backdrop-blur-sm rounded-xl border border-blue-200 dark:border-blue-800 p-6 shadow-sm">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">
                Statistik
              </h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#1995DC]">127</div>
                  <div className="text-xs text-gray-600 dark:text-gray-400">
                    Total Artikel
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#1995DC]">8.4K</div>
                  <div className="text-xs text-gray-600 dark:text-gray-400">
                    Total Downloads
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#1995DC]">89</div>
                  <div className="text-xs text-gray-600 dark:text-gray-400">
                    Authors
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#1995DC]">15</div>
                  <div className="text-xs text-gray-600 dark:text-gray-400">
                    Volumes
                  </div>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-white mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="col-span-2">
              <div className="flex items-center space-x-3 mb-4">
                <div className="w-10 h-10 bg-[#1995DC] rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold">UIN</span>
                </div>
                <div>
                  <h4 className="font-bold">An-Nahdah Al-'Arabiyah</h4>
                  <p className="text-sm text-gray-400">
                    Jurnal Pendidikan Bahasa Arab
                  </p>
                </div>
              </div>
              <p className="text-gray-400 text-sm leading-relaxed mb-4">
                Jurnal ilmiah yang diterbitkan oleh Fakultas Tarbiyah dan
                Keguruan UIN Ar-Raniry Banda Aceh sebagai wadah publikasi hasil
                penelitian dalam bidang pendidikan bahasa Arab dan keislaman.
              </p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-white">
                  <Globe className="w-5 h-5" />
                </a>
                <a href="#" className="text-gray-400 hover:text-white">
                  <Mail className="w-5 h-5" />
                </a>
                <a href="#" className="text-gray-400 hover:text-white">
                  <Phone className="w-5 h-5" />
                </a>
              </div>
            </div>

            <div>
              <h5 className="font-semibold mb-4">Quick Links</h5>
              <ul className="space-y-2 text-sm text-gray-400">
                <li>
                  <a href="#" className="hover:text-white">
                    Submit Article
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Author Guidelines
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Peer Review
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Editorial Board
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Archives
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h5 className="font-semibold mb-4">Resources</h5>
              <ul className="space-y-2 text-sm text-gray-400">
                <li>
                  <a href="#" className="hover:text-white">
                    Template Article
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Citation Style
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Ethical Guidelines
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    FAQ
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
            <p>
              &copy; 2024 An-Nahdah Al-'Arabiyah. All rights reserved. | ISSN:
              2528-2611
            </p>
          </div>
        </div>
      </footer>

      {/* Scroll to Top Button */}
      {showScrollTop && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-6 right-6 w-12 h-12 bg-[#1995DC] text-white rounded-full shadow-lg hover:bg-[#1473B3] active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#1995DC] focus:ring-offset-2"
          aria-label="Scroll to top"
        >
          <ChevronUp className="w-5 h-5 mx-auto" />
        </button>
      )}

      {/* Google Fonts */}
      <style jsx global>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
        
        .font-\[Inter\] {
          font-family: 'Inter', sans-serif;
        }
        
        .line-clamp-2 {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .line-clamp-3 {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      `}</style>
    </div>
  );
}