import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { CourseCard } from "@/components/shared/course-card";
import { CompetitionCard } from "@/components/shared/competition-card";
import { apiGet } from "@/lib/api/server";
import {CalendarDays, ChevronLeft, Trophy, Users, BookOpen, Award, Dumbbell, Medal, Shield, Swords, Volleyball} from "lucide-react";

function SportIcon({ name }: { name: string }) {
  const icons: Record<string, React.ComponentType<{ className?: string }>> = {
    "والیبال": Volleyball,
    "کشتی": Swords,
    "کاراته": Shield,
    "تکواندو": Medal,
    "وزنه‌برداری": Dumbbell,
    "ژیمناستیک": Dumbbell,
    "دو و میدانی": Trophy,
    "فوتبال": Trophy,
    "بسکتبال": Award,
    "شنا": Award,
    "تنیس": Shield,
  };
  const Icon = icons[name];
  return Icon ? <Icon className="h-6 w-6" /> : <span className="font-bold text-lg">{name.charAt(0)}</span>;
}

export default async function HomePage() {
  const [courses, sports, news, competitions] = await Promise.all([
    apiGet<Record<string, unknown>[]>("/api/courses?status=ACTIVE&limit=6").catch(() => []),
    apiGet<Record<string, unknown>[]>("/api/sports").catch(() => []),
    apiGet<Record<string, unknown>[]>("/api/news").catch(() => []),
    apiGet<Record<string, unknown>[]>("/api/competitions").catch(() => []),
  ]);

  const activeCompetitions = competitions.filter(
    (c) => c.status === "REGISTERING" || c.status === "ONGOING"
  ).slice(0, 6);

  return (
    <div>
      {/* Hero */}
      <section className="relative bg-white overflow-hidden">
        <div className="container mx-auto px-4 py-16 md:py-24">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="flex-1 text-center md:text-right">
              <div className="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-100 rounded-full px-4 py-1.5 text-sm text-[#2563EB] mb-6">
                <Award className="h-4 w-4" />
                سامانه رسمی مربیگری ورزشی کرمانشاه
              </div>
              <h1 className="text-4xl md:text-5xl font-bold mb-4 leading-tight text-gray-900">
                سامانه جامع
                <br />
                مربیگری ورزشی
              </h1>
              <p className="text-lg md:text-xl text-gray-500 mb-10 max-w-xl">
                بستری برای آموزش، ارتباط و پیشرفت مربیان و ورزشکاران کشور
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                <Link href="/courses">
                  <Button size="lg" className="bg-[#2563EB] hover:bg-[#1D4ED8] text-white px-8 h-11 text-base shadow-lg shadow-blue-500/20">
                    مشاهده دوره‌ها
                  </Button>
                </Link>
                <Link href="/auth">
                  <Button size="lg" variant="outline" className="border-gray-300 text-gray-700 hover:bg-gray-50 px-8 h-11 text-base">
                    ثبت‌نام کنید
                  </Button>
                </Link>
              </div>
            </div>
            <div className="flex-1">
              <Image
                src="/sports-placeholder.png"
                width={500}
                height={500}
                alt="ورزش"
                loading="eager"
                className="w-full max-w-lg mx-auto rounded-2xl shadow-2xl"
              />
            </div>
          </div>
        </div>
        <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-gray-50 to-transparent" />
      </section>

      {/* Sports */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900">رشته‌های ورزشی</h2>
              <p className="text-gray-500 mt-1">رشته مورد نظر خود را انتخاب کنید</p>
            </div>
            <Link href="/sports">
              <Button variant="ghost" className="text-[#2563EB] gap-1">
                همه رشته‌ها <ChevronLeft className="h-4 w-4" />
              </Button>
            </Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {sports.slice(0, 8).map((sport) => (
              <Link
                key={sport.id as string}
                href={`/courses?sportId=${sport.id}`}
                className="group flex items-center gap-3 p-4 rounded-2xl border border-gray-100 bg-white hover:border-[#2563EB] hover:shadow-lg hover:shadow-blue-500/5 transition-all duration-200"
              >
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-50 to-blue-100 group-hover:from-[#2563EB] group-hover:to-[#1D4ED8] flex items-center justify-center text-[#2563EB] group-hover:text-white transition-all duration-200">
                  <SportIcon name={sport.name as string} />
                </div>
                <span className="font-medium text-gray-900 group-hover:text-[#2563EB] transition-colors">
                  {sport.name as string}
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Active Courses */}
      <section className="py-16 md:py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900">دوره‌های فعال</h2>
              <p className="text-gray-500 mt-1">جدیدترین دوره‌های آموزشی</p>
            </div>
            <Link href="/courses">
              <Button variant="ghost" className="text-[#2563EB] gap-1">
                مشاهده همه <ChevronLeft className="h-4 w-4" />
              </Button>
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {courses.slice(0, 6).map((course) => (
              <CourseCard key={course.id as string} course={course as any} />
            ))}
          </div>
        </div>
      </section>

      {/* Active Competitions */}
      {activeCompetitions.length > 0 && (
        <section className="py-16 md:py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="flex items-center justify-between mb-8">
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-gray-900">مسابقات فعال</h2>
                <p className="text-gray-500 mt-1">مسابقات در حال ثبت‌نام و برگزاری</p>
              </div>
              <Link href="/competitions">
                <Button variant="ghost" className="text-[#2563EB] gap-1">
                  مشاهده همه <ChevronLeft className="h-4 w-4" />
                </Button>
              </Link>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {activeCompetitions.map((competition) => (
                <CompetitionCard key={competition.id as string} competition={competition as any} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Stats */}
      <section className="relative bg-gradient-to-br text-white from-[#2563EB] via-blue-700 to-indigo-800 py-16 md:py-20 overflow-hidden">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMjBhLTIuNSAtMi41IDAgMCAwIC01IDAgMi41IDIuNSAwIDAgMCA1IDB6IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==')] opacity-30" />
        <div className="relative container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {[
              { label: "دوره آموزشی", value: "۱۵۰+", icon: BookOpen },
              { label: "مربی مجرب", value: "۲۰۰+", icon: Trophy },
              { label: "ورزشکار", value: "۵۰۰۰+", icon: Users },
              { label: "رشته ورزشی", value: "۳۰+", icon: Award },
            ].map((stat) => (
              <div key={stat.label} className="group">
                <div className="w-14 h-14 mx-auto mb-4 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center group-hover:bg-white/20 transition-colors">
                  <stat.icon className="h-7 w-7 text-white" />
                </div>
                <div className="text-3xl md:text-4xl font-bold mb-1">{stat.value}</div>
                <div className="text-blue-200 text-sm">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* News */}
      <section className="py-16 md:py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900">اخبار و اطلاعیه‌ها</h2>
              <p className="text-gray-500 mt-1">آخرین اخبار سامانه</p>
            </div>
            <Link href="/news">
              <Button variant="ghost" className="text-[#2563EB] gap-1">
                مشاهده همه <ChevronLeft className="h-4 w-4" />
              </Button>
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {news.slice(0, 3).map((item) => (
              <Link
                key={item.id as string}
                href={`/news/${(item as any).slug}`}
                className="group rounded-2xl border border-gray-100 bg-white p-6 hover:border-[#2563EB]/30 hover:shadow-xl transition-all duration-200"
              >
                <div className="flex items-center gap-2 text-xs text-gray-400 mb-3">
                  <CalendarDays className="h-3.5 w-3.5" />
                  {new Date(item.createdAt as string).toLocaleDateString("fa-IR")}
                  {(item as any).isPinned && (
                    <span className="bg-red-50 text-red-600 px-2 py-0.5 rounded-full">اطلاعیه</span>
                  )}
                </div>
                <h3 className="font-semibold text-gray-900 group-hover:text-[#2563EB] transition-colors mb-2">
                  {item.title as string}
                </h3>
                {(item.content as string) && (
                  <p className="text-sm text-gray-600 line-clamp-2 leading-relaxed">
                    {item.content as string}
                  </p>
                )}
                <div className="mt-4 flex items-center text-sm text-[#2563EB] opacity-0 group-hover:opacity-100 transition-opacity gap-1">
                  ادامه مطلب <ChevronLeft className="h-3.5 w-3.5" />
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}