import { Play, Clock, Eye, Calendar } from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

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

  const categories = [
    { id: "all", label: isArabic ? "الكل" : "All" },
    { id: "conferences", label: isArabic ? "مؤتمرات" : "Conferences" },
    { id: "lectures", label: isArabic ? "محاضرات" : "Lectures" },
    { id: "events", label: isArabic ? "فعاليات" : "Events" },
  ];

  const videos = [
    { id: 1, title: isArabic ? "مؤتمر الخريجين السنوي 2024" : "Annual Alumni Conference 2024", category: "conferences", duration: "1:45:30", views: "2.5K", date: isArabic ? "ديسمبر 2024" : "Dec 2024", color: "from-primary to-primary-light" },
    { id: 2, title: isArabic ? "محاضرة: مستقبل التعليم في أفريقيا" : "Lecture: Future of Education in Africa", category: "lectures", duration: "58:20", views: "1.8K", date: isArabic ? "نوفمبر 2024" : "Nov 2024", color: "from-secondary to-secondary-light" },
    { id: 3, title: isArabic ? "حفل توزيع شهادات التخرج 2024" : "Graduation Ceremony 2024", category: "events", duration: "2:15:00", views: "5.2K", date: isArabic ? "أغسطس 2024" : "Aug 2024", color: "from-accent to-accent-light" },
    { id: 4, title: isArabic ? "ورشة العمل: ريادة الأعمال" : "Workshop: Entrepreneurship", category: "lectures", duration: "1:30:00", views: "1.2K", date: isArabic ? "أكتوبر 2024" : "Oct 2024", color: "from-primary-dark to-primary" },
    { id: 5, title: isArabic ? "مؤتمر شراكات الخريجين" : "Alumni Partnerships Conference", category: "conferences", duration: "1:55:45", views: "3.1K", date: isArabic ? "سبتمبر 2024" : "Sep 2024", color: "from-secondary-light to-primary" },
    { id: 6, title: isArabic ? "فعالية يوم الخريجين" : "Alumni Day Event", category: "events", duration: "1:20:10", views: "4.0K", date: isArabic ? "يوليو 2024" : "Jul 2024", color: "from-accent-light to-secondary" },
    { id: 7, title: isArabic ? "محاضرة: التكنولوجيا والتحول الرقمي" : "Lecture: Technology & Digital Transformation", category: "lectures", duration: "1:05:30", views: "2.0K", date: isArabic ? "يونيو 2024" : "Jun 2024", color: "from-primary to-accent" },
    { id: 8, title: isArabic ? "مؤتمر التطوع المجتمعي" : "Community Volunteer Conference", category: "conferences", duration: "1:40:00", views: "1.5K", date: isArabic ? "مايو 2024" : "May 2024", color: "from-primary-light to-secondary-light" },
    { id: 9, title: isArabic ? "حفل التكريم السنوي" : "Annual Honoring Ceremony", category: "events", duration: "2:05:15", views: "3.8K", date: isArabic ? "أبريل 2024" : "Apr 2024", color: "from-secondary to-primary-light" },
  ];

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="videos"
        lang={lang}
        defaultTitle={isArabic ? "مكتبة الفيديوهات" : "Video Library"}
        defaultSubtitle={isArabic
          ? "شاهد فيديوهات مؤتمراتنا ومحاضراتنا وفعالياتنا"
          : "Watch videos of our conferences, lectures, and events"}
        badge={
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full text-white/80 text-sm">
            <Play className="w-4 h-4" />
            <span>{isArabic ? "الفيديوهات" : "Videos"}</span>
          </div>
        }
      />

      {/* Categories */}
      <section className="py-8 bg-background">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap gap-3 justify-center">
            {categories.map((cat) => (
              <button
                key={cat.id}
                className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all ${
                  cat.id === "all"
                    ? "bg-primary text-white"
                    : "bg-surface text-text-secondary hover:bg-primary/10 hover:text-primary border border-border"
                }`}
              >
                {cat.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Videos Grid */}
      <section className="py-8 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {videos.map((video) => (
              <div key={video.id} className="group bg-surface rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
                <div className={`relative h-48 bg-gradient-to-br ${video.color}`}>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center group-hover:scale-110 transition-transform cursor-pointer">
                      <Play className="w-8 h-8 text-white fill-white" />
                    </div>
                  </div>
                  <div className="absolute bottom-3 end-3 bg-black/60 text-white text-xs px-2 py-1 rounded">
                    {video.duration}
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-lg font-bold text-text mb-3 group-hover:text-primary transition-colors line-clamp-2">
                    {video.title}
                  </h3>
                  <div className="flex items-center gap-4 text-text-secondary text-xs">
                    <div className="flex items-center gap-1">
                      <Eye className="w-3.5 h-3.5" />
                      <span>{video.views}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Clock className="w-3.5 h-3.5" />
                      <span>{video.duration}</span>
                    </div>
                    <div className="flex items-center gap-1">
                      <Calendar className="w-3.5 h-3.5" />
                      <span>{video.date}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}