import { prisma } from "@/core/db/prisma";
import { AnimatedSection } from "@/shared/components/animated-section";
import { SectionHeading } from "@/shared/components/section-heading";
import { AnimatedTechItem } from "./animated-tech-item";
import { Layers, Code2 } from "lucide-react";
import { getTranslations } from "next-intl/server";

const CATEGORY_CONFIG: Record<
  string,
  { label: string; accent: string; descKey: string }
> = {
  backend: {
    label: "Enterprise Backend",
    accent: "from-blue-500 to-cyan-500",
    descKey: "categories.backend.description",
  },
  infra: {
    label: "Database & Infrastructure",
    accent: "from-emerald-500 to-teal-500",
    descKey: "categories.infra.description",
  },
  frontend: {
    label: "Frontend Development",
    accent: "from-violet-500 to-purple-500",
    descKey: "categories.frontend.description",
  },
  mobile: {
    label: "Mobile Development",
    accent: "from-orange-500 to-rose-500",
    descKey: "categories.mobile.description",
  },
};

const CATEGORY_ORDER = ["backend", "infra", "frontend", "mobile"];

export async function TechStackSection() {
  const t = await getTranslations("TechStack");

  const skills = await prisma.skill.findMany({
    orderBy: [{ category: "asc" }, { sortOrder: "asc" }, { name: "asc" }],
  });

  // Group by category
  const grouped: Record<string, typeof skills> = {};
  for (const skill of skills) {
    if (!grouped[skill.category]) grouped[skill.category] = [];
    grouped[skill.category].push(skill);
  }

  const categories = CATEGORY_ORDER.filter(
    (cat) => grouped[cat] && grouped[cat].length > 0
  );

  return (
    <section id="tech-stack" className="section-padding relative bg-muted/30">
      <div className="absolute inset-0 grid-pattern opacity-20" />

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

        {categories.length === 0 ? (
          <div className="text-center py-16 text-muted-foreground">
            <Code2 size={40} className="mx-auto mb-4 opacity-30" />
            <p className="text-sm">
              Belum ada tech stack. Tambahkan melalui{" "}
              <span className="font-mono text-accent">Admin Dashboard</span>.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {categories.map((cat, catIndex) => {
              const config = CATEGORY_CONFIG[cat] ?? {
                label: cat,
                accent: "from-gray-500 to-gray-600",
                descKey: "",
              };
              const items = grouped[cat];

              return (
                <AnimatedSection key={cat} delay={catIndex * 0.1}>
                  <div className="group relative h-full p-6 rounded-2xl bg-card border border-border/50 hover:border-accent/30 transition-all duration-500 hover:shadow-lg">
                    <div className="flex items-center gap-3 mb-4">
                      <div
                        className={`w-10 h-10 rounded-xl bg-gradient-to-br ${config.accent} flex items-center justify-center text-white shadow-lg`}
                      >
                        <Layers size={18} />
                      </div>
                      <div>
                        <h3 className="font-bold text-sm">{config.label}</h3>
                        <p className="text-xs text-muted-foreground">
                          {config.descKey ? t(config.descKey as any) : ""}
                        </p>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                      {items.map((skill, skillIndex) => (
                        <AnimatedTechItem
                          key={skill.id}
                          name={skill.name}
                          iconName={skill.iconName}
                          index={skillIndex}
                        />
                      ))}
                    </div>
                  </div>
                </AnimatedSection>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}
