import { PrimaryHero } from "./index";
import type { PrimaryHeroProps } from "./types";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { ArgTypes, Meta, StoryObj } from "@storybook/react";

// ─── Mock Data ────────────────────────────────────────────────────────────────

const HERO_IMAGE =
  "https://images.ctfassets.net/8d4yn2ywtegc/6Dpv8KVrKnuQXy0CCSHFa8/8cf420b6d55f6bdcfa443f7cff75e294/1a9b1046b0b507d52c57172edc6324f1417ff402.png";

const BADGE_IMAGE =
  "https://images.ctfassets.net/8d4yn2ywtegc/7hlBQ8QOkl0fI8vawenlJK/216b89b30eb9ec3685f723696baeefdf/promo_badge__1_.svg";

const DEFAULT_CHECKLIST: PrimaryHeroProps["checklist"] = [
  { title: "100% network reliability" },
  { title: "Free Whole Home Wi-Fi Set Up" },
  { title: "Free Kinetic Secure for 3 months" },
  { title: "No annual contract or data caps" },
];

const CHECK_AVAILABILITY_CTA = {
  showButtonAs: "solid" as const,
  buttonVariant: "primary_brand" as const,
  buttonLabel: "Check availability",
  href: "#",
  target: "_self" as const,
};

// ─── ArgTypes ─────────────────────────────────────────────────────────────────

const argTypes: ArgTypes<PrimaryHeroProps> = {
  title: {
    control: { type: "text" as const },
    description: "Main headline text displayed in the hero",
  },
  showAsHeading: {
    control: { type: "boolean" as const },
    description: "Renders title as h1 instead of h2",
  },
  subTitle: {
    control: { type: "text" as const },
    description:
      "Subtitle text below the headline highlighting key value proposition",
  },
  price: {
    control: { type: "text" as const },
    description: "Price value (e.g. '24')",
  },
  priceSuffix: {
    control: { type: "text" as const },
    description: "Price suffix displayed after the price (e.g. '/mo')",
  },
  priceCallout: {
    control: { type: "text" as const },
    description:
      "Price callout text, pipe-separated for multiple lines (e.g. 'Fiber plans|starting at')",
  },
  pricingDescription: {
    control: { type: "text" as const },
    description: "Descriptive text displayed below the pricing section",
  },
  pricingDescriptionDisclaimer: {
    control: { type: "text" as const },
    description: "Smaller disclaimer text below the pricing description",
  },
  checklist: {
    control: { type: "object" as const },
    description: "Array of checklist items with title and optional icon URL",
  },
  logoLockup: {
    control: { type: "text" as const },
    description: "URL for logo lockup image displayed below checklist",
  },
  carouselImages: {
    control: { type: "object" as const },
    description: "Array of hero image URLs",
  },
  heroVideo: {
    control: { type: "object" as const },
    description:
      "Desktop hero video object with URL and optional accessible title. Replaces the desktop image at xl+.",
  },
  heroVideoMobile: {
    control: { type: "object" as const },
    description:
      "Mobile hero video object with URL and optional accessible title. Replaces the mobile image below xl.",
  },
  squareImage: {
    control: false,
    table: { disable: true },
  },
  badgeImage: {
    control: { type: "text" as const },
    description: "URL for promo badge image overlaid on the hero image",
  },
  textColor: {
    control: { type: "select" as const },
    options: ["light", "dark"],
    description:
      "Text color theme — light (white) for dark backgrounds, dark for light backgrounds",
  },
  primaryCta1: {
    control: { type: "object" as const },
    description: "Primary call-to-action button props",
  },
  secondaryCtaPrefix: {
    control: { type: "text" as const },
    description: "Prefix text before the secondary CTA (e.g. 'Or')",
  },
  secondaryCta: {
    control: { type: "object" as const },
    description: "Secondary call-to-action link/button props",
  },
  bottomLink: {
    control: { type: "object" as const },
    description: "Bottom link rendered below the CTA section",
  },
  hideOnMobileCta1: {
    control: { type: "boolean" as const },
    description: "Hides the primary CTA on mobile viewports",
  },
  maxWidth: {
    table: { disable: true },
  },
  checkAvailabilityEyebrow: {
    control: { disable: true },
    table: { disable: true },
  },
  renderCheckPlans: {
    control: { disable: true },
    table: { disable: true },
  },
  onModalButtonClick: {
    control: { disable: true },
    table: { disable: true },
  },
};

// ─── Meta ─────────────────────────────────────────────────────────────────────

const meta: Meta<typeof PrimaryHero> = {
  title: "Contentful Blocks/PrimaryHero",
  component: PrimaryHero,
  tags: ["autodocs"],
  argTypes,
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Contentful primary hero block featuring headline, subtitle, pricing, checklist, CTA buttons, logo lockup, and responsive hero image with optional promo badge.",
      },
    },
  },
  decorators: [
    Story => (
      <div style={{ minWidth: 1280 }}>
        <Story />
      </div>
    ),
  ],
  args: {
    title: "Internet better with ultra-fast fiber internet.",
    showAsHeading: true,
    price: "24",
    priceSuffix: "/mo",
    priceCallout: "Fiber plans|starting at",
    checklist: DEFAULT_CHECKLIST,
    logoLockup: undefined,
    carouselImages: [HERO_IMAGE],
    badgeImage: BADGE_IMAGE,
    primaryCta1: CHECK_AVAILABILITY_CTA,
    textColor: "dark",
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// ─── Stories ──────────────────────────────────────────────────────────────────

/** Default hero with all main features: headline, pricing, checklist, logo lockup, badge, and hero image. */
export const Default: Story = {};

/** Promo badge overlaid on the hero image — draws attention to a limited-time offer. */
export const PromoBadge: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Promo badge (e.g. $3.99 or limited-time price) is rendered as an overlay on the top-left corner of the hero image.",
      },
    },
  },
  args: {
    title: "Internet better with ultra-fast fiber internet.",
    badgeImage: BADGE_IMAGE,
    checklist: DEFAULT_CHECKLIST,
  },
};

/** Hero video can be supplied independently for desktop and mobile, while images remain the fallback for breakpoints without a video URL. */
export const VideoHero: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Desktop and mobile hero videos replace the hero image on their matching breakpoints only. If a video URL is missing for a breakpoint, the image fallback remains in place.",
      },
    },
  },
  args: {
    title: "Internet better with ultra-fast fiber internet.",
    subTitle:
      "Background video can be shown per breakpoint without changing CTA or pricing behavior.",
    carouselImages: [HERO_IMAGE],
    badgeImage: BADGE_IMAGE,
    heroVideo: {
      url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
      title: "Desktop hero video",
    },
    heroVideoMobile: {
      url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
      title: "Mobile hero video",
    },
    checklist: DEFAULT_CHECKLIST,
    primaryCta1: CHECK_AVAILABILITY_CTA,
  },
};

/** Hero with only a headline — no subtitle or pricing. */
export const Headline: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Displays only the headline text with checklist and CTA. Use when the hero needs minimal content.",
      },
    },
  },
  args: {
    title: "Hero headline.",
    subTitle: undefined,
    price: undefined,
    priceSuffix: undefined,
    priceCallout: undefined,
    pricingDescription: undefined,
    logoLockup: undefined,
    badgeImage: undefined,
    checklist: DEFAULT_CHECKLIST,
  },
};

/** Hero with subtitle text below the headline highlighting a key value proposition. */
export const SubTitle: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Uses the subtitle property to display supporting text beneath the headline, reinforcing the value proposition.",
      },
    },
  },
  args: {
    title: "Internet better with ultra-fast fiber internet.",
    subTitle: "Subtitle highlighting key value proposition.",
    price: undefined,
    priceSuffix: undefined,
    priceCallout: undefined,
    pricingDescription: undefined,
    logoLockup: undefined,
    badgeImage: undefined,
    checklist: DEFAULT_CHECKLIST,
  },
};

/** Hero with pricing callout section including price, suffix, description and disclaimer. */
export const PricingCallout: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Displays the full pricing section with callout prefix, price value, suffix, and optional description/disclaimer text.",
      },
    },
  },
  args: {
    title: "Internet better with ultra-fast fiber internet.",
    subTitle:
      "Experience the joy of ultra-fast, reliable fiber internet in every room of your home.",
    price: "24",
    priceSuffix: "/mo",
    priceCallout: "starting at",
    pricingDescription: "pricing disclaimer text goes here",
    logoLockup: undefined,
    badgeImage: undefined,
    checklist: undefined,
  },
};

/** Bundle offer variant with different messaging and pricing. */
export const BundleOffer: Story = {
  parameters: {
    docs: {
      description: {
        story:
          "Demonstrates the hero used for bundle/cross-sell offers with custom headline and pricing copy.",
      },
    },
  },
  args: {
    title: "Bundle and save on Kinetic Fiber Internet.",
    subTitle:
      "Save $20/mo off your Kinetic bill with a new or existing AT&T Wireless plan*.",
    price: undefined,
    priceSuffix: undefined,
    priceCallout: undefined,
    pricingDescription: undefined,
    pricingDescriptionDisclaimer: "Pricing disclaimer text goes here.",
    logoLockup: undefined,
    badgeImage: undefined,
    checklist: undefined,
  },
};