import type { Metadata } from "next";

/*
import Link from "next/link";
import { Suspense } from "react";
import type { Metadata } from "next";
import { cookies } from "next/headers";
import ContactHero from "@/components/ContactHero";
import Footer from "@/components/Footer";
import BackgroundGradients from "@/components/BackgroundGradients";
import PaymentPageContent from "@/components/PaymentPageContent";
import type { HeroButton } from "@/components/Hero";
import { WhatHappensNextStep } from "@/components/WhatHappensNext";
import { buildDynamicMetadata } from "@/lib/metadata";
import { getMedusaLocaleHeaderForStoreApi } from "@/i18n/localeSwitcher";

const CODE_ZIGZAG_COUNT = 3;


function IconArrowPrimary() {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
            <path
                className="fill-[#053F31] group-hover:fill-[#F7FAF8] transition-colors"
                d="M0 18C0 8.05887 8.05887 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18Z"
            />
            <path
                className="stroke-[#DAE6DC] group-hover:stroke-[#053F31] transition-colors"
                d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5"
                strokeWidth="2"
            />
        </svg>
    );
}

function IconArrowSecondary() {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
            <path
                className="fill-[#F7FAF8] group-hover:fill-[#053F31] transition-colors"
                d="M0 18C0 8.05887 8.05887 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18Z"
            />
            <path
                className="stroke-[#053F31] group-hover:stroke-[#DAE6DC] transition-colors"
                d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5"
                strokeWidth="2"
            />
        </svg>
    );
}

function renderPaymentTitle(title: string) {
    const words = title.trim().split(/\s+/);
    return (
        <h1 className="font-lexend font-extralight text-[#ffffff] max-w-[782px]">
            {words.slice(0, 1).join(" ")}{" "}
            {words.length > 1 ? (
                <span className="font-medium">{words.slice(1).join(" ")}</span>
            ) : null}
        </h1>
    );
}


async function getPaymentPage() {
    const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
    if (!base) return null;
    try {
        const jar = await cookies();
        const xMedusaLocale = getMedusaLocaleHeaderForStoreApi(jar);
        const res = await fetch(`${base}/store/pages/payment`, {
            headers: {
                "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
                "x-medusa-locale": xMedusaLocale,
            },
            cache: "no-store",
        });
        if (!res.ok) return null;
        return res.json();
    } catch {
        return null;
    }
}

function getPaymentSeoMeta(data: any) {
    const seoSection = data?.page?.sections?.find((section: any) => section.key === "seo");
    const seoComponent = seoSection?.components?.find(
        (component: any) => component?.type?.name === "seo_meta"
    );
    const seoItem = seoComponent?.instance?.data ?? {};

    const title = typeof seoItem?.title === "string" ? seoItem.title : "";
    const description = typeof seoItem?.description === "string" ? seoItem.description : "";
    const keywordsRaw = typeof seoItem?.keywords === "string" ? seoItem.keywords : "";
    const keywords = keywordsRaw
        .split(",")
        .map((keyword: string) => keyword.trim())
        .filter(Boolean);

    return { title, description, keywords };
}

export async function generateMetadata(): Promise<Metadata> {
    const data = (await getPaymentPage()) ?? { page: { sections: [] } };
    const seo = getPaymentSeoMeta(data);
    return buildDynamicMetadata({
        seoTitle: seo.title,
        seoDescription: seo.description,
        seoKeywords: seo.keywords,
        pageUrl: "/payment",
        ogImage: "/image.png",
        fallbackTitle: "Biomket",
        fallbackDescription: "Biomket marketplace",
    });
}


export default async function PaymentPage() {
    const pageData = await getPaymentPage();
    const page = pageData ?? { page: { sections: [] } };
    const section = (key: string) =>
        page?.page?.sections?.find((s: { key?: string }) => s.key === key);

    const bannerData = section("banner-section")?.components?.[0]?.instance?.data;
    const bannerBg = bannerData?.bg_image?.items?.[0] ?? {};
    const logoSvg =
        typeof bannerData?.logo === "string" && bannerData.logo.trim() !== ""
            ? bannerData.logo.trim()
            : "";

    const heroData = {
        title: bannerData?.title || "",
        description: bannerData?.description || "",
        logoSvg,
        webImage: bannerBg?.image_desktop ?? "",
        mobileImage: bannerBg?.image_mobile ?? "",
        desktopImageAlt: bannerBg?.desktop_image_alt_tag ?? "",
        mobileImageAlt: bannerBg?.mobile_image_alt_tag ?? "",
        buttons: [
            {
                label: bannerData?.button?.items?.[0]?.button_text || "",
                href: bannerData?.button?.items?.[0]?.button_url || "",
                variant: "primary" as const,
            },
            {
                label: bannerData?.button?.items?.[1]?.button_text || "",
                href: bannerData?.button?.items?.[1]?.button_url || "",
                variant: "secondary" as const,
            },
        ] satisfies HeroButton[],
    };
    const heroButtons = heroData.buttons.filter((b) => Boolean(b.label?.trim()));

    const whnData = section("what-happens-next")?.components?.[0]?.instance?.data as
        | { title?: string; process_steps?: { items?: Array<Record<string, unknown>> } }
        | undefined;
    const whatHappensNextSteps: WhatHappensNextStep[] = (
        Array.isArray(whnData?.process_steps?.items) ? whnData!.process_steps!.items! : []
    ).map((item, index) => {
        const stepNo =
            String(item.step_no ?? item["step_no."] ?? "").trim() ||
            String(index + 1).padStart(2, "0");
        return {
            id: stepNo,
            label: String(item.step_tag ?? "").trim() || `Step ${stepNo}`,
            title: String(item.title ?? ""),
            description: String(item.description ?? ""),
        };
    });

    const importantInfoData = section("important-information")?.components?.[0]?.instance?.data as
        | { items?: Array<{ title?: string; richtext?: string }> }
        | undefined;
    const importantInfoItem = importantInfoData?.items?.[0];

    const needHelpData = section("need-help")?.components?.[0]?.instance?.data as
        | {
            title?: string;
            description?: string;
            contact_information?: { items?: Array<{ text?: string; logo_svg?: string }> };
            button?: { items?: Array<{ button_text?: string; button_url?: string; logo_svg?: string }> };
        }
        | undefined;

    const paymentHeadline = heroData.logoSvg ? (
        <div className="flex w-full flex-col items-center gap-5 md:gap-7">
            <span
                className="inline-flex shrink-0 [&_svg]:block"
                dangerouslySetInnerHTML={{ __html: heroData.logoSvg }}
                aria-hidden
            />
            {heroData.title ? renderPaymentTitle(heroData.title) : null}
        </div>
    ) : heroData.title ? (
        renderPaymentTitle(heroData.title)
    ) : undefined;

    return (
        <main className="px-[20px] md:px-[40px] xl:px-[60px]">
            <ContactHero
                headline={paymentHeadline}
                description={heroData.description || undefined}
                backgroundImageMobile={heroData.mobileImage || undefined}
                backgroundImageDesktop={heroData.webImage || undefined}
                backgroundImageMobileAlt={heroData.mobileImageAlt || undefined}
                backgroundImageDesktopAlt={heroData.desktopImageAlt || undefined}
            >
                {heroButtons.length > 0 && (
                    <div
                        className="contact-hero-text-slide flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center"
                        style={{ animationDelay: "0.2s" }}
                    >
                        {heroButtons.map((btn, i) => (
                            <Link
                                key={`${btn.label}-${i}`}
                                href={btn.href || "#"}
                                className={
                                    btn.variant === "primary"
                                        ? "group flex items-center justify-center gap-2 mx-auto bg-[#DAE6DC] text-[#053F31] p-[7px_7px_7px_15px] rounded-full font-semibold cursor-pointer border-2 border-[#DAE6DC] hover:bg-[#DAE6DC]/10 hover:text-white hover:backdrop-blur-sm transition"
                                        : "group flex items-center justify-center gap-2 border-2 text-[#DAE6DC] border-[#DAE6DC] bg-white/10 backdrop-blur-sm p-[7px_7px_7px_15px] rounded-full font-semibold cursor-pointer hover:bg-[#DAE6DC] hover:text-[#053F31] transition"
                                }
                            >
                                {btn.label}
                                {btn.variant === "primary" ? <IconArrowPrimary /> : <IconArrowSecondary />}
                            </Link>
                        ))}
                    </div>
                )}
            </ContactHero>

            <BackgroundGradients count={CODE_ZIGZAG_COUNT} />

            <Suspense
                fallback={
                    <div className="mt-10 md:mt-14 xl:max-w-[1240px] 2xl:max-w-[1440px] sm:mx-auto flex flex-col gap-[30px] md:gap-[50px]">
                        {[1, 2, 3].map((i) => (
                            <div
                                key={i}
                                className="h-[160px] rounded-[20px] bg-[#F7FAF8] border border-[#DAE6DC] animate-pulse"
                            />
                        ))}
                    </div>
                }
            >
                <PaymentPageContent
                    heroButtons={heroButtons}
                    whatHappensNextSteps={whatHappensNextSteps}
                    importantInformationTitle={importantInfoItem?.title}
                    importantInformationRichtext={importantInfoItem?.richtext}
                    needHelpTitle={needHelpData?.title}
                    needHelpDescription={needHelpData?.description}
                    needHelpContacts={needHelpData?.contact_information?.items || (Array.isArray(needHelpData?.contact_information) ? needHelpData.contact_information : undefined)}
                    needHelpButtons={needHelpData?.button?.items || (Array.isArray(needHelpData?.button) ? needHelpData.button : undefined)}
                />
            </Suspense>

            <Footer />
        </main>
    );
}
*/

export async function generateMetadata(): Promise<Metadata> {
  return { title: "Payment" };
}

/** Payment route disabled — restore block comment above to re-enable. */
export default function PaymentPage() {
  return null;
}