import { ComponentConfig } from "@reacteditor/core";
import { Megaphone } from "lucide-react";
import { cn } from "~/editor/lib/utils";
import { Typography } from "~/editor/theme/Typography";

export type CTAProps = {
  tagline: string;
  heading: string;
  subheading: string;
  primaryCta: { label: string; href: string };
  secondaryCta: { label: string; href: string };
  imageUrl: string;
  align: "left" | "center";
};

function CTA({
  tagline,
  heading,
  subheading,
  primaryCta,
  secondaryCta,
  imageUrl,
  align,
}: CTAProps) {
  return (
    <section className="relative overflow-hidden py-24 md:py-32">
      <div className="absolute inset-0 -z-10">
        {imageUrl ? (
          <>
            <img
              src={imageUrl}
              alt=""
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-black/45" />
          </>
        ) : (
          <div className="h-full w-full bg-foreground" />
        )}
      </div>
      <div
        className={cn(
          "container mx-auto flex max-w-4xl flex-col px-6 text-white",
          align === "center" ? "items-center text-center" : "items-start",
        )}
      >
        {tagline ? (
          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
            {tagline}
          </p>
        ) : null}
        <Typography variant="h2">{heading}</Typography>
        {subheading ? (
          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
            {subheading}
          </Typography>
        ) : null}
        <div
          className={cn(
            "mt-10 flex flex-wrap gap-3",
            align === "center" && "justify-center",
          )}
        >
          {primaryCta?.label ? (
            <a
              href={primaryCta.href || "#"}
              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
            >
              {primaryCta.label}
            </a>
          ) : null}
          {secondaryCta?.label ? (
            <a
              href={secondaryCta.href || "#"}
              className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
            >
              {secondaryCta.label}
            </a>
          ) : null}
        </div>
      </div>
    </section>
  );
}

export const ctaEditor: ComponentConfig<CTAProps> = {
  label: "Call to action",
  icon: <Megaphone size={16} />,
  category: "content",
  defaultProps: {
    tagline: "",
    heading: "Designed once. Worn for years.",
    subheading:
      "Join 40,000 people building a wardrobe they actually reach for.",
    primaryCta: { label: "Shop now", href: "/collections" },
    secondaryCta: { label: "Read our story", href: "/about" },
    imageUrl:
      "https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2400&q=80",
    align: "center",
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "textarea", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    primaryCta: {
      label: "Primary CTA",
      type: "object",
      objectFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
      },
    },
    secondaryCta: {
      label: "Secondary CTA",
      type: "object",
      objectFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
      },
    },
    imageUrl: { label: "Background image URL", type: "text" },
    align: {
      label: "Alignment",
      type: "radio",
      options: [
        { label: "Left", value: "left" },
        { label: "Center", value: "center" },
      ],
    },
  },
  render: (props) => <CTA {...props} />,
};