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

const LAYOUT = "page_hero";

export const PageHeroSchema = z.object({
  accent: z.enum(["purple", "green"]).default("purple"),
  breadcrumb_label: z.string().default(""),
  eyebrow: z.string().default(""),
  title_lines: z.array(z.string()).default([]),
  lede: z.string().default(""),
  stats: z.array(StatSchema).default([]),
  primary_cta: LinkSchema.optional(),
  secondary_cta: LinkSchema.optional(),
  image: ImageInputSchema.optional(),
  image_alt: z.string().default(""),
  stamp: z.string().default(""),
  floor_eyebrow: z.string().default(""),
  floor_title: z.string().default(""),
  ring_word: z.string().default(""),
  ring_subline: z.string().default(""),
  polaroids: z.array(z.object({ caption: z.string().default("") })).default([]),
});

export type PageHeroData = z.infer<typeof PageHeroSchema>;

function CtaIcon({ name }: { name?: string }) {
  if (!name) return null;
  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?: PageHeroData["primary_cta"];
  fallbackVariant: string;
  locale: import("@/lib/i18n/config").Locale;
}) {
  if (!link || !link.label) return null;
  const variant = link.variant || fallbackVariant;
  const isInternal = link.href.startsWith("/") && !link.href.startsWith("//");
  const isInPageHash = link.href.startsWith("#");
  const href = isInternal && !isInPageHash ? localizeHref(link.href, locale) : link.href;
  const className = `btn ${variant} btn-lg`;
  const arrowIcon = link.icon === "arrow-left" || link.icon === "arrow-right" ? link.icon : null;
  const children = (
    <>
      {link.icon === "message-circle" ? <CtaIcon name="message-circle" /> : null}
      <span>{link.label}</span>
      {arrowIcon ? <CtaIcon name={arrowIcon} /> : null}
    </>
  );
  if (isInternal) {
    return (
      <Link href={href} className={className}>
        {children}
      </Link>
    );
  }
  return (
    <a href={href} className={className} target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener noreferrer" : undefined}>
      {children}
    </a>
  );
}

export async function PageHero({ data }: { data: PageHeroData }) {
  const locale = await getRequestLocale();
  const image = normalizeImage(data.image, data.image_alt);
  const accentClass = data.accent === "green" ? "page-hero green-accent" : "page-hero";
  const accentDotPrimary = data.accent === "green" ? "#AFB171" : "#B970D0";
  const accentDotSecondary = data.accent === "green" ? "#B970D0" : "#AFB171";

  return (
    <section className={accentClass} data-screen-label="01 Hero">
      <div className="ph-orb purple" />
      <div className="ph-orb green" />
      <div className="ph-pattern" />
      <div className="wrap">
        {data.breadcrumb_label ? (
          <div className="ph-crumbs">
            <Link href={localizeHref("/", locale)}>{t(locale, "breadcrumb.home")}</Link>
            <span className="sep">/</span>
            <span>{data.breadcrumb_label}</span>
          </div>
        ) : null}
        <div className="ph-grid">
          <div className="ph-content">
            {data.eyebrow ? (
              <span className="ph-eyebrow">
                <span className="pip" />
                {data.eyebrow}
              </span>
            ) : null}
            {data.title_lines.length > 0 ? (
              <h1 className="ph-title">
                {data.title_lines.map((line, i) => (
                  <span key={i} className="line" dangerouslySetInnerHTML={{ __html: line }} />
                ))}
              </h1>
            ) : null}
            {data.lede ? <p className="ph-lede" dangerouslySetInnerHTML={{ __html: data.lede }} /> : null}
            {data.stats.length > 0 ? (
              <div className="ph-stats">
                {data.stats.map((stat, i) => (
                  <div key={i} className="ph-stat">
                    <span className="n" dangerouslySetInnerHTML={{ __html: stat.number_html }} />
                    <span className="l">{stat.label}</span>
                  </div>
                ))}
              </div>
            ) : null}
            <div className="ph-cta">
              <Cta link={data.primary_cta} fallbackVariant={data.accent === "green" ? "btn-green" : "btn-primary"} locale={locale} />
              <Cta link={data.secondary_cta} fallbackVariant="btn-outline" locale={locale} />
            </div>
          </div>
          <div className="ph-stage" role="img" aria-label={data.image_alt}>
            {image ? <div className="ph-image" style={{ backgroundImage: `url('${image.src}')` }} /> : null}
            <div className="ph-image-overlay" />
            <div className="ph-image-grain" />
            {data.stamp ? (
              <span className="ph-stamp">
                <span className="d" />
                {data.stamp}
              </span>
            ) : null}
            {data.floor_eyebrow || data.floor_title ? (
              <div className="ph-floor">
                {data.floor_eyebrow ? <div className="eb">{data.floor_eyebrow}</div> : null}
                {data.floor_title ? <div className="ttl" dangerouslySetInnerHTML={{ __html: data.floor_title }} /> : null}
              </div>
            ) : null}
            {data.ring_word ? (
              <div className="ph-ring" aria-hidden="true">
                <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="50" cy="50" r="44" fill="none" stroke="#151515" strokeWidth="1.5" strokeDasharray="4 5" />
                  <circle cx="50" cy="6" r="7" fill={accentDotPrimary} />
                  <circle cx="50" cy="94" r="7" fill={accentDotSecondary} />
                  <text x="50" y="40" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="6" fontWeight="700" letterSpacing="1" opacity="0.55">BACKYARD</text>
                  <text x="50" y="58" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="10" fontWeight="800" letterSpacing="2">{data.ring_word}</text>
                  {data.ring_subline ? (
                    <text x="50" y="70" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="5" fontWeight="600" letterSpacing="1.5" opacity="0.45">{data.ring_subline}</text>
                  ) : null}
                </svg>
              </div>
            ) : null}
            {data.polaroids.length > 0 ? (
              <div className="ph-pol-stack" aria-hidden="true">
                {data.polaroids.slice(0, 2).map((pol, i) => (
                  <div key={i} className={`ph-pol ph-pol-${i + 1}`}>
                    <div className="photo" />
                    <div className="cap">{pol.caption}</div>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}

registerSection<PageHeroData>(LAYOUT, PageHero);
registerSchema(LAYOUT, PageHeroSchema);