import { prisma } from "@/core/db/prisma";
import { AnimatedSection } from "@/shared/components/animated-section";
import { SectionHeading } from "@/shared/components/section-heading";
import { ExternalLink, GraduationCap, BookOpen, Landmark, MapPin, School } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { formatEducationPeriod } from "./education-utils";

const ICONS = [
  <GraduationCap key="graduation-cap" size={20} />,
  <BookOpen key="book-open" size={20} />,
  <Landmark key="landmark" size={20} />,
  <School key="school" size={20} />,
];

export async function EducationSection() {
  const t = await getTranslations("Education");

  const educationEntries = await prisma.education.findMany({
    orderBy: { order: "asc" },
  });

  const timelineData = educationEntries.map((entry, index) => ({
    ...entry,
    period: formatEducationPeriod({
      startYear: entry.startYear,
      endYear: entry.endYear,
      isOngoing: entry.isOngoing,
      presentLabel: t("present"),
    }),
    icon: ICONS[index % ICONS.length],
  }));

  return (
    <section id="education" className="section-padding relative">
      <div className="max-w-5xl mx-auto px-6">
        <AnimatedSection>
          <SectionHeading title={t("title")} subtitle={t("subtitle")} />
        </AnimatedSection>

        {timelineData.length === 0 ? (
          <div className="text-center py-16 text-muted-foreground">
            <GraduationCap size={40} className="mx-auto mb-4 opacity-30" />
            <p className="text-lg font-semibold mb-2">{t("emptyTitle")}</p>
            <p className="text-sm">{t("emptyDescription")}</p>
          </div>
        ) : (
          <div className="relative">
            <div className="timeline-line" />

            <div className="space-y-12 md:space-y-16">
              {timelineData.map((item, index) => (
                <AnimatedSection key={item.id} delay={index * 0.15}>
                  <div
                    className={`relative flex flex-col md:flex-row items-start gap-8 md:gap-24 ${
                      index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
                    }`}
                  >
                    <div
                      className={`flex-1 ml-20 md:ml-0 ${
                        index % 2 === 0 ? "md:text-right" : "md:text-left"
                      }`}
                    >
                      <span className="inline-block font-mono text-xs text-accent font-semibold tracking-wider uppercase mb-2">
                        {item.period}
                      </span>
                      <h3 className="text-xl font-bold mb-1">
                        {item.degree} - {item.fieldOfStudy}
                      </h3>
                      <div
                        className={`text-muted-foreground text-sm font-medium mb-3 flex items-center gap-1.5 ${
                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                        }`}
                      >
                        <School size={14} className="text-accent/70" />
                        <span>{item.institution}</span>
                      </div>

                      {(item.location || item.gpa) && (
                        <div
                          className={`flex flex-wrap gap-2 mb-4 ${
                            index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                          }`}
                        >
                          {item.location && (
                            <span className="inline-flex items-center gap-1.5 rounded-full bg-muted/60 px-3 py-1 text-xs text-muted-foreground">
                              <MapPin size={12} />
                              {item.location}
                            </span>
                          )}
                          {item.gpa && (
                            <span className="inline-flex items-center gap-1.5 rounded-full bg-accent/10 px-3 py-1 text-xs text-accent">
                              {t("gpaLabel")}: {item.gpa}
                            </span>
                          )}
                        </div>
                      )}

                      {item.description && (
                        <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                          {item.description}
                        </p>
                      )}

                      {item.finalProjectUrl && (
                        <div className="inline-flex max-w-md flex-col gap-3 rounded-2xl border border-accent/15 bg-accent/5 p-4">
                          <span className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-accent">
                            {t("finalProjectLabel")}
                          </span>
                          {item.finalProjectTitle && (
                            <p className="text-sm font-semibold text-foreground">
                              {item.finalProjectTitle}
                            </p>
                          )}
                          <a
                            href={item.finalProjectUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="inline-flex items-center gap-2 text-sm font-medium text-accent hover:text-accent/80 transition-colors"
                          >
                            {t("viewFinalProject")}
                            <ExternalLink size={14} />
                          </a>
                        </div>
                      )}
                    </div>

                    <div className="absolute left-0 md:left-1/2 md:-translate-x-1/2 top-0 w-12 h-12 rounded-xl bg-card border-2 border-accent/30 flex items-center justify-center text-accent shadow-lg shadow-accent/10 z-10">
                      {item.icon}
                    </div>

                    <div className="hidden md:block flex-1" />
                  </div>
                </AnimatedSection>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
