import { prisma } from "@/core/db/prisma";
import { AnimatedSection } from "@/shared/components/animated-section";
import { SectionHeading } from "@/shared/components/section-heading";
import { Award, Briefcase, Rocket, Code2, Building2 } from "lucide-react";
import { getTranslations } from "next-intl/server";

const ICONS = [
  <Rocket key="rocket" size={20} />,
  <Code2 key="code2" size={20} />,
  <Building2 key="building2" size={20} />,
  <Briefcase key="briefcase" size={20} />,
];

export async function ExperienceSection() {
  const t = await getTranslations("Experience");

  // Fetch from DB, fallback gracefully if empty
  const dbExperiences = await prisma.experience.findMany({
    orderBy: { order: "asc" },
  });

  // If DB has data, use it — otherwise show empty state
  const timelineData = dbExperiences.map((exp, i) => ({
    id: exp.id,
    year: exp.year,
    title: exp.title,
    company: exp.company,
    description: exp.description,
    achievements: Array.isArray(exp.achievements)
      ? (exp.achievements as string[])
      : [],
    icon: ICONS[i % ICONS.length],
  }));

  return (
    <section id="experience" 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">
            <Briefcase size={40} className="mx-auto mb-4 opacity-30" />
            <p className="text-sm">
              Belum ada pengalaman kerja. Tambahkan melalui{" "}
              <span className="font-mono text-accent">Admin Dashboard</span>.
            </p>
          </div>
        ) : (
          /* Timeline */
          <div className="relative">
            {/* Vertical line */}
            <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"
                    }`}
                  >
                    {/* Content */}
                    <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.year}
                      </span>
                      <h3 className="text-xl font-bold mb-1">{item.title}</h3>
                      <p 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"
                      }`}>
                        <Briefcase size={14} className="text-accent/60" />
                        {item.company}
                      </p>
                      <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                        {item.description}
                      </p>
                      {item.achievements.length > 0 && (
                        <div className="space-y-2">
                          {item.achievements.map((achievement) => (
                            <div
                              key={achievement}
                              className={`flex items-start gap-2 text-sm ${
                                index % 2 === 0
                                  ? "md:flex-row-reverse md:text-right"
                                  : ""
                              }`}
                            >
                              <Award
                                size={14}
                                className="text-accent mt-0.5 flex-shrink-0"
                              />
                              <span className="text-muted-foreground">
                                {achievement}
                              </span>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>

                    {/* Center dot — aligned with timeline-line */}
                    <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>

                    {/* Empty space for other side */}
                    <div className="hidden md:block flex-1" />
                  </div>
                </AnimatedSection>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
