import { clx } from "@medusajs/ui"
import { ChevronRightMini } from "@medusajs/icons"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import * as MedusaIcons from "@medusajs/icons"
import * as CustomIcons from "@modules/common/icons"
import LocalizedClientLink from "@modules/common/components/localized-client-link"

interface SocialIcon {
  href?: string
  icon?: string
  imgSrc?: string
  className?: string
}

export default function VtFooterHero({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}
  const IconComp = (name?: string) => {
    if (!name) return null
    return (
      (MedusaIcons as Record<string, any>)[name] ||
      (CustomIcons as Record<string, any>)[name] ||
      null
    )
  }
  const renderSocialContent = (item: SocialIcon) => {
    const Icon = IconComp(item.icon)
    if (Icon) return <Icon className={item.className} />
    if (item.imgSrc)
      return (
        <img
          src={item.imgSrc}
          alt={item.icon ?? "social"}
          className={item.className}
        />
      )
    return (
      <span className="w-4 h-4 rounded-md bg-white/10 text-white flex items-center justify-center text-sm">
        {item.icon?.[0] ?? "?"}
      </span>
    )
  }

  const renderSocialIcon = (icon: SocialIcon, idx: number) => {
    const content = renderSocialContent(icon)
    return icon.href ? (
      <a
        key={idx}
        href={icon.href}
        className={clx("hover:opacity-80", icon.className)}
      >
        {content}
      </a>
    ) : (
      <span key={idx} className={clx("", icon.className)}>
        {content}
      </span>
    )
  }
  return (
    <div className={clx("flex flex-col items-start", props.className)}>
      {props.logoSrc && (
        <img
          src={props.logoSrc}
          alt={props.logoAlt ?? "logo"}
          className={clx("object-contain", props.logoClassName)}
        />
      )}
      {props.title && (
        <h2
          className={clx(
            "mt-4 w-[320px] text-[24px] font-semibold text-[#11314E]",
            props.titleClassName
          )}
        >
          {props.title}
        </h2>
      )}
      {props.description && (
        <p
          className={clx(
            "mt-2 text-ui-fg-subtle txt-small",
            props.descriptionClassName
          )}
        >
          {props.description}
        </p>
      )}
      {props.cta && (
        <LocalizedClientLink
          href={props.cta.href}
          className={clx(
            "bg-black text-white items-center flex gap-2 px-4 mt-[24px] py-2 rounded-md w-fit text-[14px]",
            props.ctaClassName
          )}
        >
          <span>{props.cta.label}</span>
          <ChevronRightMini className="order-1" />
        </LocalizedClientLink>
      )}

      {props.email && (
        <form
          className={clx(
            "mt-4 w-full max-w-[500px]",
            props.email?.emailInputClassName
          )}
        >
          <div className="relative flex items-center justify-between border border-white/40 rounded-md px-4 py-3">
            <input
              id="vt-footer-hero-email"
              type="email"
              name="contact[email]"
              placeholder=" "
              autoComplete="email"
              required
              className="peer bg-transparent outline-none text-white/90 placeholder-transparent flex-1"
            />
            <label
              htmlFor="vt-footer-hero-email"
              className="absolute left-4 text-white/60 pointer-events-none transition-all duration-300
            peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-white/50
            peer-focus:top-3 peer-focus:-translate-y-2 peer-focus:left-3 peer-focus:text-white
            peer-[:not(:placeholder-shown)]:translate-y-[-0.85rem]"
            >
              E-Mail
            </label>
            <button
              type="submit"
              className="ml-4 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center"
            >
              <span className="sr-only">Abonnieren</span>
              <ChevronRightMini />
            </button>
          </div>
        </form>
      )}
      {props.socials && props.socials.length > 0 ? (
        <div
          className={clx(
            "flex items-center gap-4 mt-2",
            props.socialsClassName
          )}
        >
          {props.socials.map(renderSocialIcon)}
        </div>
      ) : null}
    </div>
  )
}
