"use client"
import { Button } from "@medusajs/ui"
import { clx } from "@medusajs/ui"
import {
  LayoutComponentDefinition,
  LayoutContext,
} from "@vibentec/component-map"
import React, { useState } from "react"

interface BenefitItem {
  icon?: string
  imgSrc?: string
  title?: string
  description?: string
  className?: string
  iconClassName?: string
  titleClassName?: string
  descriptionClassName?: string
}

export default function VtSubcription({
  nodes,
  context,
}: {
  nodes: LayoutComponentDefinition
  context: LayoutContext
}) {
  const props = nodes.config ?? {}

  const [firstName, setFirstName] = useState("")
  const [email, setEmail] = useState("")
  const [accepted, setAccepted] = useState(false)
  const [submitted, setSubmitted] = useState(false)

  const classes = {
    container: props.className ?? "content-container",
    left: props.leftClassName ?? "",
    card: props.cardClassName ?? "rounded-2xl bg-[#CFECD9] p-8 small:p-12",
    title:
      props.titleClassName ??
      "text-white text-[28px] font-bold text-center",
    description:
      props.descriptionClassName ?? "mt-2 text-white",
    highlight: props.highlightClassName ?? "font-bold",
    form: props.formClassName ?? "mt-8 flex flex-col gap-6",
    fields: props.fieldsClassName ?? "grid grid-cols-1 small:grid-cols-2 gap-4",
    input:
      props.inputClassName ??
      "h-[52px] rounded-md border border-[#003F31]/40 px-4 bg-transparent text-white",
    checkboxRow: props.checkboxRowClassName ?? "flex items-center gap-3",
    checkbox:
      props.checkboxClassName ??
      "w-5 h-5 rounded-md border border-[#003F31]/60",
    checkboxLabel: props.checkboxLabelClassName ?? "text-white text-[16px]",
    subtextClass: props.subtextClassName ?? "text-white",
    submit:
      props.submitClassName ?? "",
    success: props.successClassName ?? "mt-4 text-center text-white",
    benefits:
      props.benefitsClassName ??
      "mt-8 grid grid-cols-1 small:grid-cols-3 gap-8",
    benefitItem:
      props.benefitItemClassName ??
      "flex flex-col items-center text-center gap-3",
    benefitIcon:
      props.benefitIconClassName ??
      "w-12 h-12 rounded-full bg-[#003F31] text-white flex items-center justify-center",
    benefitTitle: props.benefitTitleClassName ?? "text-white font-semibold",
    benefitDesc: props.benefitDescClassName ?? "text-white opacity-80",
    subtextSubcribe: props.subtextSubcribe ?? {},
  }

  const submitConfig = props.cta ?? {}
  const policyLabel: string =
    props.policyLabel ?? "Ich habe die DSGVO gelesen und akzeptiere sie."
  const firstNameField = props.firstName ?? null
  const emailField = props.email ?? null

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!accepted) return
    setSubmitted(true)
    console.log("subscription_submit", { firstName, email, accepted })
  }

  return (
    <section className={classes.container}>
      {classes.left && <div className={classes.left}>
        half
      </div>}
      <div className={classes.card}>
        {props.title && <h2 className={classes.title}>{props.title}</h2>}
        {props.description && (
          <p className={classes.description}>
            {props.descriptionPrefix}{" "}
            <span className={classes.highlight}>
              {props.descriptionHighlight}
            </span>{" "}
            {props.descriptionSuffix}
          </p>
        )}
        {Array.isArray(props.benefits) && props.benefits.length > 0 && (
          <div className={classes.benefits}>
            {props.benefits.map((b: BenefitItem, i: number) => (
              <div
                key={`benefit-${i}`}
                className={clx(classes.benefitItem, b.className)}
              >
                {b.imgSrc ? (
                  <img
                    src={b.imgSrc}
                    alt={b.title ?? `benefit-${i}`}
                    className={clx(classes.benefitIcon, b.iconClassName)}
                  />
                ) : (
                  <div
                    className={clx(classes.benefitIcon, b.iconClassName)}
                    aria-hidden="true"
                  >
                    {b.icon ?? ""}
                  </div>
                )}
                {b.title && (
                  <div className={clx(classes.benefitTitle, b.titleClassName)}>
                    {b.title}
                  </div>
                )}
                {b.description && (
                  <div
                    className={clx(classes.benefitDesc, b.descriptionClassName)}
                  >
                    {b.description}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
        {props.subtext && (
          <p
            className={clx(
              "mt-2 text-center", classes?.subtextClass ?? "text-[#003F31]"
            )}
          >
            {props.subtext}
          </p>
        )}
        <form className={classes.form} onSubmit={onSubmit}>
          <div className={classes.fields}>
            {firstNameField && (
              <input
                type="text"
                placeholder={firstNameField.placeholder ?? "Vorname"}
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className={clx(classes.input, firstNameField.className)}
              />
            )}
            {emailField && (
              <input
                type="email"
                placeholder={emailField.placeholder ?? "E-Mail-Adresse"}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={clx(classes.input, emailField.className)}
                required
              />
            )}
          </div>
          {props.newCheckboxRowClassName && (
            <label className={classes.checkboxRow}>
              <input
                type="checkbox"
                checked={accepted}
                onChange={(e) => setAccepted(e.target.checked)}
                className={classes.checkbox}
              />
              <span className={classes.checkboxLabel}>{policyLabel}</span>
            </label>
          )}

          <button
            type="submit"
            className={clx(classes.submit, submitConfig.className)}
          >
            {submitConfig.label ?? "Anmelden"}
          </button>
         
        </form>
         {classes?.subtextSubcribe && (
            <div className={props.subtextSubcribe?.className}>
              {props.subtextSubcribe?.label}
            </div>
          )}
        {submitted && (
          <div className={classes.success}>
            {props.successMessage ??
              "Danke! Prüfe deine E-Mails für den Rabattcode."}
          </div>
        )}
      </div>

    </section>
  )
}
