import { FileText, Download, Calendar, Building2, BarChart3, Activity } from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

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

  const annualReports = [
    {
      id: 1,
      title: isArabic ? "التقرير السنوي 2024" : "Annual Report 2024",
      description: isArabic
        ? "تقرير شامل عن أنشطة وإنجازات الرابطة خلال عام 2024 شاملاً البرامج والمشاريع والأحداث"
        : "Comprehensive report on the association's activities and achievements during 2024 including programs, projects, and events",
      date: isArabic ? "ديسمبر 2024" : "December 2024",
      size: "5.2 MB",
      icon: BarChart3,
    },
    {
      id: 2,
      title: isArabic ? "التقرير السنوي 2023" : "Annual Report 2023",
      description: isArabic
        ? "تقرير سنوي يتضمن ملخصاً لأنشطة الرابطة والإنجازات الرئيسية لعام 2023"
        : "Annual report summarizing the association's activities and key achievements for 2023",
      date: isArabic ? "ديسمبر 2023" : "December 2023",
      size: "4.8 MB",
      icon: BarChart3,
    },
    {
      id: 3,
      title: isArabic ? "التقرير السنوي 2022" : "Annual Report 2022",
      description: isArabic
        ? "تقرير يتضمن مراجعة شاملة لعمل الرابطة وتطوراتها خلال عام 2022"
        : "Report providing a comprehensive review of the association's operations and developments during 2022",
      date: isArabic ? "ديسمبر 2022" : "December 2022",
      size: "4.1 MB",
      icon: BarChart3,
    },
  ];

  const financialReports = [
    {
      id: 4,
      title: isArabic ? "التقرير المالي السنوي 2024" : "Financial Annual Report 2024",
      description: isArabic
        ? "تقرير مالي تفصيلي يتضمن الإيرادات والنفقات والميزانية والتحقق من الحسابات"
        : "Detailed financial report including revenues, expenditures, budget, and audit verification",
      date: isArabic ? "ديسمبر 2024" : "December 2024",
      size: "3.5 MB",
      icon: Building2,
    },
    {
      id: 5,
      title: isArabic ? "التقرير المالي السنوي 2023" : "Financial Annual Report 2023",
      description: isArabic
        ? "تقرير مالي شامل عن الأداء المالي للرابطة خلال عام 2023"
        : "Comprehensive financial report on the association's financial performance during 2023",
      date: isArabic ? "ديسمبر 2023" : "December 2023",
      size: "3.2 MB",
      icon: Building2,
    },
  ];

  const activityReports = [
    {
      id: 6,
      title: isArabic ? "تقرير الأنشطة الربع سنوي - Q1 2024" : "Quarterly Activity Report - Q1 2024",
      description: isArabic
        ? "تقرير عن الأنشطة والبرامج المنفذة خلال الربع الأول من عام 2024"
        : "Report on activities and programs implemented during the first quarter of 2024",
      date: isArabic ? "مارس 2024" : "March 2024",
      size: "2.1 MB",
      icon: Activity,
    },
    {
      id: 7,
      title: isArabic ? "تقرير الأنشطة الربع سنوي - Q2 2024" : "Quarterly Activity Report - Q2 2024",
      description: isArabic
        ? "تقرير عن الأنشطة والبرامج المنفذة خلال الربع الثاني من عام 2024"
        : "Report on activities and programs implemented during the second quarter of 2024",
      date: isArabic ? "يونيو 2024" : "June 2024",
      size: "2.3 MB",
      icon: Activity,
    },
    {
      id: 8,
      title: isArabic ? "تقرير الأنشطة الربع سنوي - Q3 2024" : "Quarterly Activity Report - Q3 2024",
      description: isArabic
        ? "تقرير عن الأنشطة والبرامج المنفذة خلال الربع الثالث من عام 2024"
        : "Report on activities and programs implemented during the third quarter of 2024",
      date: isArabic ? "سبتمبر 2024" : "September 2024",
      size: "2.0 MB",
      icon: Activity,
    },
    {
      id: 9,
      title: isArabic ? "تقرير الأنشطة الربع سنوي - Q4 2024" : "Quarterly Activity Report - Q4 2024",
      description: isArabic
        ? "تقرير عن الأنشطة والبرامج المنفذة خلال الربع الرابع من عام 2024"
        : "Report on activities and programs implemented during the fourth quarter of 2024",
      date: isArabic ? "ديسمبر 2024" : "December 2024",
      size: "2.4 MB",
      icon: Activity,
    },
  ];

  const ReportCard = ({ report }: { report: typeof annualReports[0] }) => (
    <div className="bg-surface rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all group flex items-start gap-4">
      <div className="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
        <report.icon className="w-7 h-7 text-primary" />
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="text-base font-bold text-text mb-1 group-hover:text-primary transition-colors">
          {report.title}
        </h3>
        <p className="text-text-secondary text-sm mb-3 line-clamp-2">
          {report.description}
        </p>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4 text-xs text-text-secondary">
            <div className="flex items-center gap-1">
              <Calendar className="w-3.5 h-3.5" />
              <span>{report.date}</span>
            </div>
            <span>{report.size}</span>
          </div>
          <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>
  );

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="reports"
        lang={lang}
        defaultTitle={isArabic ? "التقارير" : "Reports"}
        defaultSubtitle={isArabic
          ? "تحميل التقارير السنوية والمالية والنشاطات الصادرة عن الرابطة"
          : "Download annual, financial, and activity reports 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 Reports"}</span>
          </div>
        }
      />

      {/* Annual Reports */}
      <section className="py-12 bg-background">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-text mb-6 flex items-center gap-3">
            <BarChart3 className="w-6 h-6 text-primary" />
            {isArabic ? "التقارير السنوية" : "Annual Reports"}
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
            {annualReports.map((report) => (
              <ReportCard key={report.id} report={report} />
            ))}
          </div>
        </div>
      </section>

      {/* Financial Reports */}
      <section className="py-12 bg-surface">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-text mb-6 flex items-center gap-3">
            <Building2 className="w-6 h-6 text-primary" />
            {isArabic ? "التقارير المالية" : "Financial Reports"}
          </h2>
          <div className="grid md:grid-cols-2 gap-4">
            {financialReports.map((report) => (
              <ReportCard key={report.id} report={report} />
            ))}
          </div>
        </div>
      </section>

      {/* Activity Reports */}
      <section className="py-12 bg-background">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl font-bold text-text mb-6 flex items-center gap-3">
            <Activity className="w-6 h-6 text-primary" />
            {isArabic ? "تقارير النشاطات" : "Activity Reports"}
          </h2>
          <div className="grid md:grid-cols-2 gap-4">
            {activityReports.map((report) => (
              <ReportCard key={report.id} report={report} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}