import type { Preview } from "@storybook/nextjs-vite";
import { Geist, Geist_Mono, Inter, Manrope, Poppins } from "next/font/google";
import "../src/app/globals.css";
import React from "react";
import {
  PaymentPlacementProvider,
  TrialVariantSelectionProvider,
} from "../src/entities/session/payment";
import type { IFunnelPaymentPlacement } from "../src/entities/session/funnel/types";
import { Currency } from "../src/shared/types";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

const manrope = Manrope({
  variable: "--font-manrope",
  subsets: ["latin", "cyrillic"],
  weight: ["200", "300", "400", "500", "600", "700", "800"],
});

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin", "cyrillic"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

const poppins = Poppins({
  variable: "--font-poppins",
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

// Storybook mock placement to avoid network calls
const storybookPlacement: IFunnelPaymentPlacement = {
  currency: Currency.USD,
  billingPeriod: "WEEK",
  billingInterval: 1,
  trialPeriod: "DAY",
  trialInterval: 7,
  placementId: "plc_story",
  paywallId: "pw_story",
  paymentUrl: "https://example.com/pay",
  variants: [
    { id: "v1", key: "basic", type: "subscription", price: 1499, trialPrice: 100, title: "Basic" },
    { id: "v2", key: "standard", type: "subscription", price: 1499, trialPrice: 499, title: "Standard" },
    { id: "v3", key: "popular", type: "subscription", price: 1499, trialPrice: 899, title: "Popular", accent: true },
    { id: "v4", key: "premium", type: "subscription", price: 1499, trialPrice: 1367, title: "Premium" },
  ],
};

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },

    layout: "padded",

    backgrounds: {
      options: {
        light: { name: "Light", value: "#fff" },
        dark: { name: "Dark", value: "#333" },
      },
    },
  },
  decorators: [
    (Story) => (
      <PaymentPlacementProvider
        initialCache={[
          { funnelKey: "storybook-funnel", paymentId: "main", placement: storybookPlacement },
        ]}
      >
        <TrialVariantSelectionProvider>
          <div
            className={`${geistSans.variable} ${geistMono.variable} ${manrope.variable} ${inter.variable} ${poppins.variable} flex items-center justify-center size-full max-w-[560px] min-w-xs mx-auto antialiased`}
          >
            <Story />
          </div>
        </TrialVariantSelectionProvider>
      </PaymentPlacementProvider>
    ),
  ],
};

export default preview;