import Link from "next/link";
import { z } from "zod";
import { registerSection } from "./registry";
import { registerSchema, LinkSchema } from "./schemas";
import { SectionIcon } from "./icons";
import { getRequestLocale } from "@/lib/i18n/strings";
import { localizeHref, type Locale } from "@/lib/i18n/config";

const LAYOUT = "cta_strip";

export const CtaStripSchema = z.object({
  tone: z.enum(["purple", "green", "dusk"]).default("dusk"),
  eyebrow: z.string().default(""),
  title_line_1: z.string().default(""),
  title_line_2: z.string().default(""),
  body: z.string().default(""),
  primary_cta: LinkSchema.optional(),
  secondary_cta: LinkSchema.optional(),
});

export type CtaStripData = z.infer<typeof CtaStripSchema>;

function Cta({ link, fallbackVariant, locale }: { link?: CtaStripData["primary_cta"]; fallbackVariant: string; locale: Locale }) {
  if (!link?.label) return null;
  const variant = link.variant || fallbackVariant;
  const className = `btn ${variant} btn-lg`;
  const isInternal = link.href.startsWith("/") && !link.href.startsWith("//");
  const isInPageHash = link.href.startsWith("#");
  const href = isInternal && !isInPageHash ? localizeHref(link.href, locale) : link.href;
  const isExternal = href.startsWith("http");
  const trailingArrow = link.icon === "arrow-left" || link.icon === "arrow-right" ? link.icon : null;
  const children = (
    <>
      {link.icon === "message-circle" ? <SectionIcon name="message-circle" size={18} /> : null}
      <span>{link.label}</span>
      {trailingArrow ? <SectionIcon name={trailingArrow} size={18} /> : null}
    </>
  );
  if (isInternal) {
    return <Link href={href} className={className}>{children}</Link>;
  }
  return (
    <a href={href} className={className} target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined}>
      {children}
    </a>
  );
}

export async function CtaStrip({ data }: { data: CtaStripData }) {
  const locale = await getRequestLocale();
  return (
    <section className="cta-wrap" data-screen-label="06 CTA">
      <div className="wrap">
        <div className={`cta-band ${data.tone}`}>
          <div>
            {data.eyebrow ? (
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.9)" }}>
                <span className="pip" style={{ background: "#fff", boxShadow: "0 0 0 4px rgba(255,255,255,0.18)" }} />
                {data.eyebrow}
              </span>
            ) : null}
            <h2>
              {data.title_line_1}
              {data.title_line_2 ? <><br />{data.title_line_2}</> : null}
            </h2>
            {data.body ? <p>{data.body}</p> : null}
          </div>
          <div className="actions" style={{ justifyContent: "flex-end" }}>
            <Cta link={data.primary_cta} fallbackVariant={data.tone === "green" ? "btn-green" : "btn-primary"} locale={locale} />
            <Cta link={data.secondary_cta} fallbackVariant="btn-dark" locale={locale} />
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<CtaStripData>(LAYOUT, CtaStrip);
registerSchema(LAYOUT, CtaStripSchema);