import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { useEffect } from "react"
import biomketLogo from "../assets/biomket_admin_logo.png"

const LoginBranding = () => {
  useEffect(() => {
    const headings = Array.from(
      document.querySelectorAll<HTMLHeadingElement>("h1, h2, h3, h4")
    )

    const loginHeading = headings.find((heading) =>
      (heading.textContent || "").toLowerCase().includes("welcome to")
    )

    if (loginHeading) {
      loginHeading.textContent = "Welcome to Biomket"
    }

    const hint = document.querySelector<HTMLElement>(".text-ui-fg-subtle.text-center")
    if (hint && hint.textContent?.toLowerCase().includes("sign in")) {
      hint.textContent = "Sign in to access the Biomket admin area"
    }

    const medusaAvatarSvg = document.querySelector<SVGElement>(
      "svg[viewBox='0 0 400 400']"
    )
    if (medusaAvatarSvg) {
      const iconHost = medusaAvatarSvg.closest("span, div")
      if (iconHost instanceof HTMLElement) {
        const logoImg = document.createElement("img")
        logoImg.src = biomketLogo
        logoImg.alt = "Biomket logo"
        logoImg.width = 50
        logoImg.height = 50
        logoImg.className = "rounded-[10px]"

        iconHost.style.display = "flex"
        iconHost.style.alignItems = "center"
        iconHost.style.justifyContent = "center"
        iconHost.replaceChildren(logoImg)
      }
    }
  }, [])

  return null
}

export const config = defineWidgetConfig({
  zone: "login.before",
})

export default LoginBranding