"use client"
import { Button, Input } from "@medusajs/ui"
import { clx } from "@medusajs/ui"
import * as MedusaIcons from "@medusajs/icons"
import * as CustomIcons from "@modules/common/icons"
import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
import React, { useState } from "react"

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

interface VtFooterSignupConfig {
  title?: string
  placeholder?: string
  buttonLabel?: string
  className?: string
  titleClassName?: string
  formClassName?: string
  inputClassName?: string
  buttonClassName?: string
  socialsClassName?: string
  socials?: SocialIcon[]
}

export default function VtFooterSignUp({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = (nodes.config as VtFooterSignupConfig) ?? {}
  const [email, setEmail] = useState("")

  const IconComp = (name?: string) => {
    if (!name) return null
    return (
      (MedusaIcons as Record<string, any>)[name] ||
      (CustomIcons as Record<string, any>)[name] ||
      null
    )
  }

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("newsletter_signup", { email })
  }

  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 gap-4", props.className)}>
      {props.title && (
        <p className={clx("text-white text-[18px]", props.titleClassName)}>
          {props.title}
        </p>
      )}

      <form onSubmit={onSubmit} className={clx("flex items-center gap-4", props.formClassName)}>
        <input
          type="email"
          placeholder={props.placeholder ?? "Email"}
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className={clx(
            "h-[48px] rounded-lg bg-white text-black px-4",
            props.inputClassName
          )}
        />
        <Button
          type="submit"
          className={clx(
            "h-[48px] rounded-lg bg-[#C4622C] text-white",
            props.buttonClassName
          )}
        >
          {props.buttonLabel ?? "Sign Up"}
        </Button>
      </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>
  )
}
