import { FileText, Download, Calendar, User, ArrowLeft, ArrowRight } from "lucide-react";
import Link from "next/link";
import HeroSection from "@/components/ui/hero-section";

export default async function PublicationsPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const isArabic = lang === "ar";
  const dir = isArabic ? "rtl" : "ltr";

  const publications = [
    {
      id: 1,
      title: isArabic ? "دليل الخريجين 2024" : "Alumni Guide 2024",
      description: isArabic
        ? "دليل شامل للخريجين يتضمن معلومات عن الخدمات المتوفرة والبرامج والأنشطة"
        : "Comprehensive guide for graduates including information about available services, programs, and activities",
      author: isArabic ? "إدارة الرابطة" : "Association Management",
      date: isArabic ? "يناير 2024" : "January 2024",
      type: "PDF",
      size: "2.5 MB",
    },
    {
      id: 2,
      title: isArabic ? "تقرير السنوي 2023" : "Annual Report 2023",
      description: isArabic
        ? "تقرير شامل عن أنشطة وإنجازات الرابطة خلال عام 2023"
        : "Comprehensive report on the association's activities and achievements during 2023",
      author: isArabic ? "قسم التقارير" : "Reports Department",
      date: isArabic ? "ديسمبر 2023" : "December 2023",
      type: "PDF",
      size: "5.2 MB",
    },
    {
      id: 3,
      title: isArabic ? " مجلة الخريجين - العدد الخامس" : "Alumni Magazine - Issue 5",
      description: isArabic
        ? "مجلة فصلية تتضمن أخبار الخريجين والمقالات والمقابلات"
        : "Quarterly magazine featuring alumni news, articles, and interviews",
      author: isArabic ? "تحرير المجلة" : "Magazine Editorial",
      date: isArabic ? "مارس 2024" : "March 2024",
      type: "PDF",
      size: "8.1 MB",
    },
    {
      id: 4,
      title: isArabic ? "بحث: مستقبل التعليم العالي في أفريقيا" : "Research: Future of Higher Education in Africa",
      description: isArabic
        ? "بحث أكاديمي يستعرض تحديات وفرص التعليم العالي في القارة الأفريقية"
        : "Academic research examining challenges and opportunities of higher education in Africa",
      author: isArabic ? "د. أحمد محمد" : "Dr. Ahmed Mohammed",
      date: isArabic ? "يونيو 2024" : "June 2024",
      type: "PDF",
      size: "1.8 MB",
    },
    {
      id: 5,
      title: isArabic ? "دليل التوظيف والتوظيف" : "Employment and Recruitment Guide",
      description: isArabic
        ? "دليل عملي للخريجين حول فرص العمل ومهارات البحث عن وظائف"
        : "Practical guide for graduates on job opportunities and job search skills",
      author: isArabic ? "قسم التوظيف" : "Employment Department",
      date: isArabic ? "أبريل 2024" : "April 2024",
      type: "PDF",
      size: "3.4 MB",
    },
    {
      id: 6,
      title: isArabic ? "نشرة الأخبار - يناير 2025" : "Newsletter - January 2025",
      description: isArabic
        ? "النشرة الإخبارية الشهرية للخريجين تتضمن آخر الأخبار والفعاليات"
        : "Monthly newsletter for graduates featuring latest news and events",
      author: isArabic ? "الاتصالات" : "Communications",
      date: isArabic ? "يناير 2025" : "January 2025",
      type: "PDF",
      size: "1.2 MB",
    },
  ];

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="publications"
        lang={lang}
        defaultTitle={isArabic ? "المنشورات" : "Publications"}
        defaultSubtitle={isArabic
          ? "تحميل المنشورات والتقارير والمجلات الصادرة عن الرابطة"
          : "Download publications, reports, and magazines issued by the association"}
        badge={
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full text-white/80 text-sm">
            <FileText className="w-4 h-4" />
            <span>{isArabic ? "منشوراتنا" : "Our Publications"}</span>
          </div>
        }
      />

      {/* Publications List */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {publications.map((pub) => (
              <div
                key={pub.id}
                className="bg-surface rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group"
              >
                <div className="h-32 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center relative">
                  <FileText className="w-12 h-12 text-primary/30 group-hover:scale-110 transition-transform" />
                  <div className="absolute top-3 end-3">
                    <span className="px-2 py-0.5 bg-secondary text-white text-xs font-bold rounded">
                      {pub.type}
                    </span>
                  </div>
                </div>
                <div className="p-5">
                  <h3 className="text-base font-bold text-text mb-2 group-hover:text-primary transition-colors line-clamp-2">
                    {pub.title}
                  </h3>
                  <p className="text-text-secondary text-sm mb-3 line-clamp-2">
                    {pub.description}
                  </p>
                  <div className="flex flex-col gap-1 text-xs text-text-secondary mb-4">
                    <div className="flex items-center gap-2">
                      <User className="w-3.5 h-3.5" />
                      <span>{pub.author}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Calendar className="w-3.5 h-3.5" />
                      <span>{pub.date}</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between pt-3 border-t border-border">
                    <span className="text-xs text-text-light">{pub.size}</span>
                    <button className="flex items-center gap-1.5 px-4 py-2 bg-primary text-white text-xs font-bold rounded-lg hover:bg-primary-light transition-colors">
                      <Download className="w-3.5 h-3.5" />
                      {isArabic ? "تحميل" : "Download"}
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}