/**
 * Client-side Stripe configuration
 * Initializes Stripe.js with publishable key and appearance theme
 */

import { loadStripe, Stripe, StripeElementsOptions } from "@stripe/stripe-js"

// Initialize Stripe instance
let stripePromise: Promise<Stripe | null>

export const getStripe = () => {
  if (!stripePromise) {
    const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

    if (!publishableKey) {
      // Client-side logging
      console.error("[v0] Missing NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY")
      throw new Error("Stripe publishable key is not configured")
    }

    if (!publishableKey.startsWith("pk_")) {
      // Client-side logging
      console.error("[v0] Invalid Stripe publishable key format")
      throw new Error("Stripe publishable key must start with pk_")
    }

    stripePromise = loadStripe(publishableKey)
  }

  return stripePromise
}

/**
 * Stripe Elements appearance configuration
 * Matches the sophisticated design system with light/dark mode support
 */
export const getStripeAppearance = (theme: "light" | "dark" = "light"): StripeElementsOptions["appearance"] => {
  if (theme === "dark") {
    return {
      theme: "night",
      variables: {
        colorPrimary: "oklch(0.58 0.12 270)", // --primary
        colorBackground: "oklch(0.14 0.008 265)", // --card
        colorText: "oklch(0.96 0.003 75)", // --foreground
        colorDanger: "oklch(0.396 0.141 25.723)", // --destructive
        fontFamily: "Geist, system-ui, sans-serif",
        spacingUnit: "4px",
        borderRadius: "12px", // --radius-lg
        fontSizeBase: "16px",
        fontWeightNormal: "400",
        fontWeightMedium: "500",
      },
      rules: {
        ".Input": {
          backgroundColor: "oklch(0.14 0.008 265)",
          border: "1px solid oklch(0.22 0.008 265)",
          boxShadow: "none",
          padding: "14px 16px",
          fontSize: "16px",
        },
        ".Input:focus": {
          border: "1px solid oklch(0.58 0.12 270)",
          boxShadow: "0 0 0 3px oklch(0.58 0.12 270 / 0.1)",
          outline: "none",
        },
        ".Label": {
          fontSize: "14px",
          fontWeight: "500",
          color: "oklch(0.96 0.003 75)",
          marginBottom: "8px",
        },
        ".Error": {
          fontSize: "14px",
          color: "oklch(0.637 0.237 25.331)",
        },
      },
    }
  }

  // Light mode (default)
  return {
    theme: "stripe",
    variables: {
      colorPrimary: "oklch(0.42 0.09 270)", // --primary
      colorBackground: "oklch(0.995 0.002 75)", // --card
      colorText: "oklch(0.12 0.005 265)", // --foreground
      colorDanger: "oklch(0.55 0.2 25)", // --destructive
      fontFamily: "Geist, system-ui, sans-serif",
      spacingUnit: "4px",
      borderRadius: "12px", // --radius-lg
      fontSizeBase: "16px",
      fontWeightNormal: "400",
      fontWeightMedium: "500",
    },
    rules: {
      ".Input": {
        backgroundColor: "oklch(0.995 0.002 75)",
        border: "1px solid oklch(0.89 0.004 265)",
        boxShadow: "none",
        padding: "14px 16px",
        fontSize: "16px",
      },
      ".Input:focus": {
        border: "1px solid oklch(0.42 0.09 270)",
        boxShadow: "0 0 0 3px oklch(0.42 0.09 270 / 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04)",
        outline: "none",
      },
      ".Label": {
        fontSize: "14px",
        fontWeight: "500",
        color: "oklch(0.12 0.005 265)",
        marginBottom: "8px",
      },
      ".Error": {
        fontSize: "14px",
        color: "oklch(0.55 0.2 25)",
      },
    },
  }
}