import Image from "next/image";
import { withCDN } from "@/lib/utils";
import UserGreeting from "@/components/userGreeting";
import UserMenu from "@/components/userMenu";
import { packagesApi } from "@/lib/api/packages";
import { getServerSession } from "@/lib/auth/session-server";
import type { Package } from "@/lib/api/types";

const PACKAGE_FALLBACKS: Record<string, { number: number; pcs: number }> = {
  algobot: { number: 4, pcs: 190 },
  starter: { number: 10, pcs: 252 },
  standard: { number: 15, pcs: 315 },
  advanced: { number: 25, pcs: 392 },
  ultimate: { number: 40, pcs: 536 },
};

function fallbackFor(pkg: Package) {
  const key = (pkg.slug || pkg.name || "").toLowerCase().replace(/\s+|-/g, "");
  return (
    PACKAGE_FALLBACKS[key] ||
    PACKAGE_FALLBACKS[pkg.slug?.toLowerCase() ?? ""] ||
    null
  );
}

function sortPackages(a: Package, b: Package) {
  const oa = Number(a.acf?.order);
  const ob = Number(b.acf?.order);
  const aHas = Number.isFinite(oa);
  const bHas = Number.isFinite(ob);
  if (aHas && bHas) return oa - ob;
  if (aHas) return -1;
  if (bHas) return 1;
  return (a.name || "").localeCompare(b.name || "");
}

export default async function Selection() {
  const sessionData = await getServerSession();
  const email = sessionData?.email ?? "";

  let packages: Package[] = [];
  if (email) {
    try {
      const data = await packagesApi.list({ email });
      packages = data.filter((p) => !p.acf?.hide).sort(sortPackages);
    } catch {
      packages = [];
    }
  }

  return (
    <main className="overflow-hidden">
      {/*=============== Hero===================*/}

      <section className="relative w-full flex h-full min-h-[300px] max-[768px]:min-h-[400px] max-[400px]:min-h-[370px] items-start overflow-hidden hero">
        {/* Background */}
        <div
          className="absolute inset-0 z-0 bg-cover bg-top"
          style={{
            backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/hero%20section.png')",
            backgroundRepeat: "no-repeat",
          }}
        />

        {/* COntent */}
        <div className="relative z-10 max-w-7xl mx-auto w-full  px-5 py-5">
          <div className="grid grid-cols-1 md:grid-cols-3 items-center header-grid">
            <div className="bg-[#0097DC] shadow-[12px_12px_24px_#00000033] px-20 py-[10px] rounded-[50px] rounded-tl-none rounded-bl-none w-max h-[58px] relative name-intro xl:ml-[-147px] md:ml-[-30px] hidden md:block tab1">
              <UserGreeting className="text-white text-[20px] xl:text-[25px]" />
            </div>
            <div className="flex items-center justify-center">
              <Image
                src={withCDN("/logo_horizontal%20(1)%20(1).png")}
                alt="logo"
                width={160}
                height={52}
                unoptimized
                className="object-contain w-[150px] h-[45px] xl:w-[160px] xl:h-[52px]"
              />
            </div>
            <div className="flex items-center justify-end max-[768px]:absolute max-[768px]:right-[30px]">
              <UserMenu />
            </div>
          </div>
          <div className="text-center mt-5 tab-s">
            <UserGreeting className="text-white w-max mx-auto text-[20px] block md:hidden px-[30px] py-[10px] bg-[#0097DC] rounded-[50px] mb-5 tabs-1" />
            <h2 className="text-white text-center text-[35px] font-bold tracking-[2px] uppercase  max-[481px]:text-[20px]">Select package</h2>
          </div>
        </div>
      </section>

      {/*=============== Package-section===================*/}
      <section className="relative w-full flex h-full items-start min-h-[650px] package-select">
        {/* Background */}
        <div
          className="absolute inset-0 z-0 top-[-185px] xl:top-[-160px] bg-cover bg-top"
          style={{
            backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/BG%20(13).png')",
            backgroundRepeat: "no-repeat",
          }}
        />

        {/* content */}
        <div className="relative z-10 max-w-7xl mx-auto w-full px-5 mt-[-100px] max-[768px]:mt-[-150px] wrapper-inner">
          <div className="flex item-center justify-center gap-5 flex-wrap pb-[260px] xl:pb-0 max-[481px]:pb-[120px] package-wrapper">
            {packages.map((pkg) => {
              const fb = fallbackFor(pkg);
              const displayName = pkg.acf?.packages_name || pkg.name;
              return (
                <div key={pkg.id} className="bg-white w-[320px] h-[230px] rounded-[55px] shadow-[12px_12px_24px_#00000033] overflow-hidden">
                  <a href={`/robot-selection?package=${pkg.id}`}>
                    <div className="flex item-center gap-3 px-5 pt-10">
                      <div className="w-[70px] text-center">
                        {fb ? (
                          <h2 className="text-[60px] text-[#0097DC] font-bold leading-tight">{fb.number}</h2>
                        ) : (
                          <h2 className="text-[60px] text-[#0097DC] font-bold leading-tight">&nbsp;</h2>
                        )}
                        <p className="text-[18px] text-[#58585A] tracking-[2px]">Robots</p>
                      </div>
                      <div className="w-[200px] text-center">
                        <h2 className="text-[30px] text-[#0097DC] tracking-[2px] leading-tight font-bold uppercase">{displayName}</h2>
                        <h3 className="text-[25px] text-[#0097DC] tracking-[2px] leading-tight font-bold uppercase">Package</h3>

                        <hr className="mt-[10px] mb-[10px] border-[#D9D9D9]" />
                        <div className="flex item-center justify-center gap-2">
                          <Image
                            src={withCDN("/Vector.svg")}
                            alt="logo"
                            width={20}
                            height={20}
                            unoptimized
                            className="object-contain w-[20px] h-[20px]"
                          />
                          <p className="text-[14px] text-[#58585A]">PCS: <span className="font-bold">{fb ? fb.pcs : "—"}</span></p>
                        </div>
                      </div>
                    </div>

                    {/* image-bottom */}
                    <div className="mt-5">
                      <Image
                        src={withCDN("/Package/brick-light%20blue-hex-00bdf2.png")}
                        alt="logo"
                        width={364}
                        height={64}
                        unoptimized
                        className="object-cover w-[364px] h-[64px]"
                      />
                    </div>
                  </a>
                </div>
              );
            })}
          </div>
        </div>

        {/* images */}
        <div className="absolute bottom-0 left-0 z-1  max-[768px]:-left-33 gear-box">
          <Image
            src={withCDN("/Package/gear%20blue-01.png")}
            alt="gear"
            width={420}
            height={420}
            unoptimized
            className="object-cover w-[370px] xl:w-[420px] h-[420px]"
          />
        </div>
        <div className="absolute bottom-0 right-0 z-1 max-[768px]:-right-26 max-[481px]:hidden">
          <Image
            src={withCDN("/Package/BackerBot.png")}
            alt="BackerBot"
            width={420}
            height={600}
            unoptimized
            className="object-cover w-[420px] h-[600px]"
          />
        </div>
      </section>

      {/*=================== Footer-image-bottom =============*/}
      <section className="relative w-full">
        {/* Background */}
        <div
          className="absolute inset-0 z-0 top-[-160px] bg-cover bg-top"
          style={{
            backgroundImage: "url('https://YEOLMS.b-cdn.net/Package/botom%20bricks.png')",
            backgroundRepeat: "no-repeat",
          }}
        />
      </section>
    </main>
  );
}