import Link from "next/link";
import { z } from "zod";
import { ArrowLeft, ArrowRight, MessageCircle } from "lucide-react";
import { registerSection } from "./registry";
import { registerSchema, LinkSchema } from "./schemas";
import { getRequestLocale } from "@/lib/i18n/strings";
import { localizeHref, type Locale } from "@/lib/i18n/config";

const LAYOUT = "cta_tight";

export const CtaTightSchema = z.object({
  tone: z.enum(["purple", "green", "dusk"]).default("purple"),
  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 CtaTightData = z.infer<typeof CtaTightSchema>;

function Icon({ name }: { name?: string }) {
  if (name === "message-circle") return <MessageCircle width={18} height={18} aria-hidden />;
  if (name === "arrow-left") return <ArrowLeft width={18} height={18} aria-hidden />;
  if (name === "arrow-right") return <ArrowRight width={18} height={18} aria-hidden />;
  return null;
}

function Cta({ link, fallbackVariant, locale }: { link?: CtaTightData["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" ? <Icon name="message-circle" /> : null}
      <span>{link.label}</span>
      {trailingArrow ? <Icon name={trailingArrow} /> : 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 CtaTight({ data }: { data: CtaTightData }) {
  const locale = await getRequestLocale();
  return (
    <section className="sec-tight" data-screen-label="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-glass" locale={locale} />
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<CtaTightData>(LAYOUT, CtaTight);
registerSchema(LAYOUT, CtaTightSchema);