"use client"

import { useEffect } from "react"
import { useColorPalette } from "@/contexts/color-context"
import { useDesign } from "@/contexts/design-context"
import { decodeDesignTokens, type DesignTokens } from "@/utils/share-design"

export function useSharedDesign() {
  const { setPrimaryColor, setSystemColor, updatePaletteImmediately } = useColorPalette()
  const { setBorderRadius, setFont } = useDesign()

  useEffect(() => {
    // Only run on client side
    if (typeof window === "undefined") return

    const urlParams = new URLSearchParams(window.location.search)
    const designParam = urlParams.get("design")

    if (designParam) {
      const tokens = decodeDesignTokens(designParam)

      if (tokens) {
        // Apply the shared design tokens
        applyDesignTokens(tokens)

        // Clean up the URL by removing the design parameter
        const newUrl = new URL(window.location.href)
        newUrl.searchParams.delete("design")
        window.history.replaceState({}, "", newUrl.toString())
      }
    }
  }, [])

  const applyDesignTokens = (tokens: DesignTokens) => {
    try {
      // Apply colors
      setPrimaryColor(tokens.primaryColor)
      setSystemColor("backgroundPrimary", tokens.backgroundPrimary)
      setSystemColor("backgroundSecondary", tokens.backgroundSecondary)

      // Apply border radius
      setBorderRadius(tokens.borderRadius)

      // Apply font
      setFont(tokens.font)

      // Store the selected palette name
      localStorage.setItem("selectedPalette", tokens.selectedPalette)

      console.log("Applied shared design tokens:", tokens)
    } catch (error) {
      console.error("Failed to apply design tokens:", error)
    }
  }

  return { applyDesignTokens }
}