import { ImagePromoBar } from "./index";

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

// Wrapper that adds a dark background for light-theme stories (text is white in light mode)
const DarkBgDecorator: Decorator = Story => (
  <div style={{ background: "#1a2e44" }}>
    <Story />
  </div>
);

// Wrapper for dark-theme stories (text is dark, white background is fine)
const LightBgDecorator: Decorator = Story => (
  <div style={{ background: "#f3f4f6" }}>
    <Story />
  </div>
);

const meta: Meta<typeof ImagePromoBar> = {
  title: "Contentful Blocks/ImagePromoBar",
  component: ImagePromoBar,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
    docs: {
      page: DocsPage,
      description: {
        component: "Contentful image promo bar block.",
      },
    },
  },
  argTypes: {
    color: {
      control: { type: "select" },
      options: ["light", "dark"],
    },
    mediaPosition: { control: "boolean" },
    enableHeading: {
      control: "boolean",
      description:
        "Controls the semantic HTML heading level for SEO/accessibility. `true` → title renders as `<h1>`, subtitle as `<h2>`. `false` → title as `<h2>`, subtitle as `<h3>`. **Does not change visual appearance** — only the underlying HTML tag changes.",
    },
    isAboveTheFold: { control: "boolean" },
    useOriginalImageAspectRatio: { control: "boolean" },
    maxWidth: { control: "boolean" },
    // Paste any Contentful image URL here to preview it in the component
    image: {
      control: "text",
      description:
        "Contentful image URL. Replace with any valid Contentful asset URL to test different images.",
    },
    // Explicitly declare React.ReactNode props as text controls AND string
    // type to prevent Storybook from auto-inferring them as "object".
    // Without type:"string", Storybook still serialises/deserialises these
    // args as objects (from URL params), passing {} as a React child and
    // triggering React error #31: "Objects are not valid as a React child".
    description: { control: "text", type: "string" },
    disclaimer: { control: "text", type: "string" },
    ctaDisclaimer: { control: "text", type: "string" },
  },
};
export default meta;
type Story = StoryObj<typeof meta>;

// ─── Shared base args ────────────────────────────────────────────────────────

const baseArgs = {
  brow: "Kinetic 8 Gig",
  title: "Next-level multi-gig internet speeds. Only from Kinetic.",
  subTitle: "Free Whole Home Wi-Fi Set Up",
  description:
    "Our advanced fiber network delivers multi-gig speeds up to 8 Gig. As the largest 8 Gig internet provider, Kinetic powers your devices with the speed, bandwidth, and latest technology to give you the most consistent, reliable connection.",
  image:
    "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
  color: "light" as const,
  mediaPosition: true,
  enableHeading: false,
  maxWidth: true,
  checklist: [] as string[],
  imageLinks: [] as { url: string; image: string }[],
};

const primaryCta = {
  showButtonAs: "solid",
  buttonVariant: "primary_brand",
  buttonLabel: "Check Availability",
  href: "https://dev-res.windstream.com/buy",
  target: "_blank" as const,
  preserveQueryParameters: true,
};

const secondaryCta = {
  showButtonAs: "solid",
  buttonVariant: "secondary",
  buttonLabel: "Learn More",
  href: "#",
  target: "_self" as const,
};

const realChecklist = [
  "Review your existing Wi-Fi set-up.",
  "Examine and certify connection speed throughout your home",
  "Recommend Wi-Fi extending equipment to eliminate dead spots.",
];

const realImageLinks = [
  {
    url: "https://apps.apple.com/us/app/id1342262959",
    image:
      "https://images.ctfassets.net/8d4yn2ywtegc/5txcuXefjBwiPLcWMOz5b/4379d6535ae32d95ef1a42f41f8eb831/appstore.png",
  },
  {
    url: "https://play.google.com/store/apps/details?id=com.windstream.residential&hl=en_US&gl=US",
    image:
      "https://images.ctfassets.net/8d4yn2ywtegc/h840guug8WGHMgnKd2OZQ/f21b3294ff560198d805e1fdae58f89f/googleplay.png",
  },
];

const realVideoLink = {
  link: "https://youtu.be/5_l3T8f7rk4",
  image:
    "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
  videoPopup: false,
};

// ─── AC1 — Heading & Text Content ────────────────────────────────────────────

export const Default: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
  },
};

// ─── AC2 — Media Position (right) ─────────────────────────────────────────────

export const MediaRight: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    mediaPosition: false,
    imageWidth: 200,
    imageHeight: 300,
  },
};

// ─── AC3 — Static Image / Original Aspect Ratio ──────────────────────────────

export const OriginalAspectRatio: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    image:
      "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
    useOriginalImageAspectRatio: true,
    imageWidth: 660,
    imageHeight: 440,
  },
};

// ─── AC4 — Video Playback: Inline ────────────────────────────────────────────

export const InlineVideo: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    image: undefined,
    videoLink: { ...realVideoLink, videoPopup: false },
  },
};

// ─── AC5 — Video Playback: Popup ─────────────────────────────────────────────

export const PopupVideo: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    image: undefined,
    videoLink: { ...realVideoLink, videoPopup: true },
  },
};

// ─── AC6 — Checklist Rendering ───────────────────────────────────────────────

export const WithChecklist: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    checklist: realChecklist,
  },
};

// ─── AC7 — Primary & Secondary CTAs ─────────────────────────────────────────

export const WithCTAs: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    cta: primaryCta,
    secondaryCta: secondaryCta,
  },
};

// ─── AC8 — Image Links ────────────────────────────────────────────────────────

export const WithImageLinks: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    imageLinks: realImageLinks,
  },
};

// ─── AC9 — Light Background (dark text) ───────────────────────────────────────────────────

export const LightBackground: Story = {
  decorators: [LightBgDecorator],
  args: {
    ...baseArgs,
    color: "dark",
  },
};

// ─── AC10 — Above the Fold (LCP priority) ────────────────────────────────────

export const AboveTheFold: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    isAboveTheFold: true,
  },
};

// ─── AC11 — Disclaimers ───────────────────────────────────────────────────────

export const WithDisclaimers: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    cta: primaryCta,
    ctaDisclaimer: "* Offer valid for new customers only.",
    disclaimer:
      "*911 IN AN EMERGENCY. Voice Services provided via an internet connection require both electrical power and broadband function. The Services will not function if power is lost or if there is a disruption to the broadband connection.",
  },
};

// ─── All ACs — Full Featured ──────────────────────────────────────────────────

export const FullFeatured: Story = {
  decorators: [DarkBgDecorator],
  args: {
    ...baseArgs,
    enableHeading: true,
    cta: primaryCta,
    secondaryCta: secondaryCta,
    checklist: realChecklist,
    imageLinks: realImageLinks,
    ctaDisclaimer: "* Offer valid for new customers only.",
    disclaimer:
      "*911 IN AN EMERGENCY. Voice Services provided via an internet connection require both electrical power and broadband function. The Services will not function if power is lost or if there is a disruption to the broadband connection.",
    isAboveTheFold: true,
  },
};