import Link from "next/link";
import {
  MapPin,
  Globe,
  Building2,
  Users,
  Mail,
  Phone,
  ChevronLeft,
  ChevronRight,
  Flag,
  ExternalLink,
} from "lucide-react";
import HeroSection from "@/components/ui/hero-section";

interface BranchesPageProps {
  params: Promise<{ lang: string }>;
}

interface Branch {
  name: string;
  nameEn: string;
  location: string;
  locationEn: string;
  country: string;
  countryEn: string;
  status: string;
  statusEn: string;
  members: string;
  contact: string;
  type: "sudan" | "africa";
}

export default async function BranchesPage({ params }: BranchesPageProps) {
  const { lang } = await params;
  const isArabic = lang === "ar";
  const dir = isArabic ? "rtl" : "ltr";

  const sudanBranches: Branch[] = [
    {
      name: "فرع الخرطوم",
      nameEn: "Khartoum Branch",
      location: "الخرطوم",
      locationEn: "Khartoum",
      country: "السودان",
      countryEn: "Sudan",
      status: "نشط",
      statusEn: "Active",
      members: "500+",
      contact: "khartoum@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع أم درمان",
      nameEn: "Omdurman Branch",
      location: "أم درمان",
      locationEn: "Omdurman",
      country: "السودان",
      countryEn: "Sudan",
      status: "نشط",
      statusEn: "Active",
      members: "350+",
      contact: "omdurman@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع بحري",
      nameEn: "Bahri Branch",
      location: "بحري",
      locationEn: "Bahri",
      country: "السودان",
      countryEn: "Sudan",
      status: "نشط",
      statusEn: "Active",
      members: "280+",
      contact: "bahri@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع الخرطوم بحري",
      nameEn: "Khartoum North Branch",
      location: "الخرطوم بحري",
      locationEn: "Khartoum North",
      country: "السودان",
      countryEn: "Sudan",
      status: "قيد التأسيس",
      statusEn: "Establishing",
      members: "120+",
      contact: "khartoum-north@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع الجزيرة",
      nameEn: "Gezira Branch",
      location: "ولاية الجزيرة",
      locationEn: "Gezira State",
      country: "السودان",
      countryEn: "Sudan",
      status: "نشط",
      statusEn: "Active",
      members: "200+",
      contact: "gezira@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع كردفان",
      nameEn: "Kordofan Branch",
      location: "ولاية كردفان",
      locationEn: "Kordofan State",
      country: "السودان",
      countryEn: "Sudan",
      status: "قيد التأسيس",
      statusEn: "Establishing",
      members: "80+",
      contact: "kordofan@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع دارفور",
      nameEn: "Darfur Branch",
      location: "ولاية جنوب دارفور",
      locationEn: "South Darfur State",
      country: "السودان",
      countryEn: "Sudan",
      status: "قيد التأسيس",
      statusEn: "Establishing",
      members: "60+",
      contact: "darfur@aiuag.org",
      type: "sudan",
    },
    {
      name: "فرع النيل الأبيض",
      nameEn: "White Nile Branch",
      location: "ولاية النيل الأبيض",
      locationEn: "White Nile State",
      country: "السودان",
      countryEn: "Sudan",
      status: "مخطط له",
      statusEn: "Planned",
      members: "40+",
      contact: "whitenile@aiuag.org",
      type: "sudan",
    },
  ];

  const africanBranches: Branch[] = [
    {
      name: "فرع أوغندا",
      nameEn: "Uganda Branch",
      location: "كامبالا",
      locationEn: "Kampala",
      country: "أوغندا",
      countryEn: "Uganda",
      status: "نشط",
      statusEn: "Active",
      members: "150+",
      contact: "uganda@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع كينيا",
      nameEn: "Kenya Branch",
      location: "نيروبي",
      locationEn: "Nairobi",
      country: "كينيا",
      countryEn: "Kenya",
      status: "نشط",
      statusEn: "Active",
      members: "120+",
      contact: "kenya@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع إثيوبيا",
      nameEn: "Ethiopia Branch",
      location: "أديس أبابا",
      locationEn: "Addis Ababa",
      country: "إثيوبيا",
      countryEn: "Ethiopia",
      status: "قيد التأسيس",
      statusEn: "Establishing",
      members: "80+",
      contact: "ethiopia@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع مصر",
      nameEn: "Egypt Branch",
      location: "القاهرة",
      locationEn: "Cairo",
      country: "مصر",
      countryEn: "Egypt",
      status: "نشط",
      statusEn: "Active",
      members: "100+",
      contact: "egypt@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع تشاد",
      nameEn: "Chad Branch",
      location: "نجامينا",
      locationEn: "N'Djamena",
      country: "تشاد",
      countryEn: "Chad",
      status: "مخطط له",
      statusEn: "Planned",
      members: "30+",
      contact: "chad@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع نيجيريا",
      nameEn: "Nigeria Branch",
      location: "لاغوس",
      locationEn: "Lagos",
      country: "نيجيريا",
      countryEn: "Nigeria",
      status: "مخطط له",
      statusEn: "Planned",
      members: "50+",
      contact: "nigeria@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع جنوب السودان",
      nameEn: "South Sudan Branch",
      location: "جوبا",
      locationEn: "Juba",
      country: "جنوب السودان",
      countryEn: "South Sudan",
      status: "نشط",
      statusEn: "Active",
      members: "70+",
      contact: "southsudan@aiuag.org",
      type: "africa",
    },
    {
      name: "فرع ألمانيا",
      nameEn: "Germany Branch",
      location: "برلين",
      locationEn: "Berlin",
      country: "ألمانيا",
      countryEn: "Germany",
      status: "قيد التأسيس",
      statusEn: "Establishing",
      members: "40+",
      contact: "germany@aiuag.org",
      type: "africa",
    },
  ];

  const allBranches = [...sudanBranches, ...africanBranches];
  const activeCount = allBranches.filter(
    (b) => b.status === "نشط" || b.statusEn === "Active"
  ).length;
  const establishingCount = allBranches.filter(
    (b) => b.status === "قيد التأسيس" || b.statusEn === "Establishing"
  ).length;
  const plannedCount = allBranches.filter(
    (b) => b.status === "مخطط له" || b.statusEn === "Planned"
  ).length;

  return (
    <div dir={dir}>
      <HeroSection
        pageSlug="branches"
        lang={lang}
        defaultTitle={isArabic ? "فروع الرابطة" : "Association Branches"}
        defaultSubtitle={isArabic
          ? "شبكة واسعة من الفروع تغطي السودان وأفريقيا والعالم"
          : "A wide network of branches covering Sudan, Africa, and beyond"}
      >
        <div className="max-w-3xl mx-auto text-center">
          <div className="mb-6 animate-fade-in">
            <Globe className="w-16 h-16 text-secondary mx-auto" />
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 animate-fade-in">
            {isArabic ? "فروع الرابطة" : "Association Branches"}
          </h1>
          <p className="text-xl text-white/80 mb-8 animate-fade-in">
            {isArabic
              ? "شبكة واسعة من الفروع تغطي السودان وأفريقيا والعالم"
              : "A wide network of branches covering Sudan, Africa, and beyond"}
          </p>
        </div>
      </HeroSection>

      {/* Statistics */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
            <div className="text-center p-6 bg-surface rounded-2xl shadow-sm border border-border">
              <div className="text-3xl md:text-4xl font-bold text-primary mb-2">
                {allBranches.length}
              </div>
              <div className="text-text-secondary text-sm">
                {isArabic ? "إجمالي الفروع" : "Total Branches"}
              </div>
            </div>
            <div className="text-center p-6 bg-surface rounded-2xl shadow-sm border border-border">
              <div className="text-3xl md:text-4xl font-bold text-secondary mb-2">
                {activeCount}
              </div>
              <div className="text-text-secondary text-sm">
                {isArabic ? "فروع نشطة" : "Active Branches"}
              </div>
            </div>
            <div className="text-center p-6 bg-surface rounded-2xl shadow-sm border border-border">
              <div className="text-3xl md:text-4xl font-bold text-accent mb-2">
                {establishingCount}
              </div>
              <div className="text-text-secondary text-sm">
                {isArabic ? "قيد التأسيس" : "Establishing"}
              </div>
            </div>
            <div className="text-center p-6 bg-surface rounded-2xl shadow-sm border border-border">
              <div className="text-3xl md:text-4xl font-bold text-primary-light mb-2">
                {plannedCount}
              </div>
              <div className="text-text-secondary text-sm">
                {isArabic ? "مخطط لها" : "Planned"}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sudan Branches */}
      <section className="py-20 bg-surface">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-secondary/10 text-secondary rounded-full mb-4">
              <Flag className="w-5 h-5" />
              <span className="font-bold text-sm">
                {isArabic ? "الخرطوم - السودان" : "Khartoum - Sudan"}
              </span>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-text mb-4">
              {isArabic ? "فروع السودان" : "Sudan Branches"}
            </h2>
            <div className="w-20 h-1 bg-secondary mx-auto rounded-full" />
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {sudanBranches.map((branch, index) => (
              <div
                key={index}
                className="bg-background rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all border border-border group"
              >
                <div className="bg-gradient-to-r from-primary to-primary-light p-4 text-white">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                        <MapPin className="w-6 h-6" />
                      </div>
                      <div>
                        <h3 className="font-bold text-lg">
                          {isArabic ? branch.name : branch.nameEn}
                        </h3>
                        <p className="text-white/80 text-sm">
                          {isArabic ? branch.location : branch.locationEn}
                        </p>
                      </div>
                    </div>
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-bold ${
                        (branch.status === "نشط" || branch.statusEn === "Active")
                          ? "bg-white/20 text-white"
                          : (branch.status === "قيد التأسيس" || branch.statusEn === "Establishing")
                          ? "bg-accent/80 text-white"
                          : "bg-white/10 text-white/70"
                      }`}
                    >
                      {isArabic ? branch.status : branch.statusEn}
                    </span>
                  </div>
                </div>
                <div className="p-5">
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <Users className="w-4 h-4 text-text-secondary" />
                      <span className="text-text-secondary text-sm">
                        {branch.members} {isArabic ? "عضو" : "members"}
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Mail className="w-4 h-4 text-text-secondary" />
                      <a
                        href={`mailto:${branch.contact}`}
                        className="text-text-secondary text-sm hover:text-primary"
                      >
                        {branch.contact}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* African & International Branches */}
      <section className="py-20 bg-background">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-secondary/10 text-secondary rounded-full mb-4">
              <Globe className="w-5 h-5" />
              <span className="font-bold text-sm">
                {isArabic ? "أفريقيا والعالم" : "Africa & Worldwide"}
              </span>
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-text mb-4">
              {isArabic ? "الفروع الأفريقية والدولية" : "African & International Branches"}
            </h2>
            <div className="w-20 h-1 bg-secondary mx-auto rounded-full" />
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {africanBranches.map((branch, index) => (
              <div
                key={index}
                className="bg-surface rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all border border-border group"
              >
                <div className="bg-gradient-to-r from-secondary to-secondary/80 p-4 text-white">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                        <Globe className="w-6 h-6" />
                      </div>
                      <div>
                        <h3 className="font-bold text-lg">
                          {isArabic ? branch.name : branch.nameEn}
                        </h3>
                        <p className="text-white/80 text-sm">
                          {isArabic
                            ? `${branch.location} - ${branch.country}`
                            : `${branch.locationEn} - ${branch.countryEn}`}
                        </p>
                      </div>
                    </div>
                    <span
                      className={`px-3 py-1 rounded-full text-xs font-bold ${
                        (branch.status === "نشط" || branch.statusEn === "Active")
                          ? "bg-white/20 text-white"
                          : (branch.status === "قيد التأسيس" || branch.statusEn === "Establishing")
                          ? "bg-accent/80 text-white"
                          : "bg-white/10 text-white/70"
                      }`}
                    >
                      {isArabic ? branch.status : branch.statusEn}
                    </span>
                  </div>
                </div>
                <div className="p-5">
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <Users className="w-4 h-4 text-text-secondary" />
                      <span className="text-text-secondary text-sm">
                        {branch.members} {isArabic ? "عضو" : "members"}
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Mail className="w-4 h-4 text-text-secondary" />
                      <a
                        href={`mailto:${branch.contact}`}
                        className="text-text-secondary text-sm hover:text-primary"
                      >
                        {branch.contact}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Open New Branch CTA */}
      <section className="py-20 bg-primary text-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Building2 className="w-16 h-16 text-secondary mx-auto mb-6" />
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              {isArabic ? "افتح فرعاً جديداً" : "Open a New Branch"}
            </h2>
            <p className="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
              {isArabic
                ? "إذا كنت مقيماً في مدينة أو دولة غير مدرجة، يمكنك المساعدة في إنشاء فرع جديد للرابطة"
                : "If you live in a city or country not listed, you can help establish a new branch of the association"}
            </p>
            <div className="grid md:grid-cols-3 gap-6 mb-10">
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">1</span>
                </div>
                <h3 className="font-bold mb-2">
                  {isArabic ? "تواصل معنا" : "Contact Us"}
                </h3>
                <p className="text-white/70 text-sm">
                  {isArabic
                    ? "أرسل طلبك عبر البريد الإلكتروني"
                    : "Send your request via email"}
                </p>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">2</span>
                </div>
                <h3 className="font-bold mb-2">
                  {isArabic ? "-form团队" : "Form a Team"}
                </h3>
                <p className="text-white/70 text-sm">
                  {isArabic
                    ? "اجمع مجموعة من الخريجين المستعدين للعمل"
                    : "Gather a group of graduates ready to work"}
                </p>
              </div>
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <div className="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-white font-bold">3</span>
                </div>
                <h3 className="font-bold mb-2">
                  {isArabic ? "ابدأ العمل" : "Start Working"}
                </h3>
                <p className="text-white/70 text-sm">
                  {isArabic
                    ? "نساعدك في إعداد الفرع وإدارته"
                    : "We help you establish and manage the branch"}
                </p>
              </div>
            </div>
            <a
              href="mailto:aiuagho@gmail.com"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-secondary text-white rounded-xl text-lg font-bold hover:bg-secondary/90 transition-all hover:scale-105"
            >
              <Mail className="w-5 h-5" />
              {isArabic ? "أرسل طلبك الآن" : "Send Your Request Now"}
            </a>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="py-16 bg-surface border-t border-border">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8 text-center">
            <div className="flex flex-col items-center">
              <div className="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <MapPin className="w-7 h-7 text-primary" />
              </div>
              <h3 className="font-bold text-text mb-2">
                {isArabic ? "المقر الرئيسي" : "Headquarters"}
              </h3>
              <p className="text-text-secondary text-sm">
                {isArabic ? "الخرطوم - السودان" : "Khartoum - Sudan"}
              </p>
            </div>
            <div className="flex flex-col items-center">
              <div className="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <Phone className="w-7 h-7 text-primary" />
              </div>
              <h3 className="font-bold text-text mb-2">
                {isArabic ? "الهاتف" : "Phone"}
              </h3>
              <a
                href="tel:+249114210853"
                className="text-text-secondary text-sm hover:text-primary"
              >
                +249114210853
              </a>
            </div>
            <div className="flex flex-col items-center">
              <div className="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                <Mail className="w-7 h-7 text-primary" />
              </div>
              <h3 className="font-bold text-text mb-2">
                {isArabic ? "البريد الإلكتروني" : "Email"}
              </h3>
              <a
                href="mailto:aiuagho@gmail.com"
                className="text-text-secondary text-sm hover:text-primary"
              >
                aiuagho@gmail.com
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}