"use client"

import { Dialog, Transition } from "@headlessui/react"
import { clx } from "@medusajs/ui"
import React, { Fragment, useMemo } from "react"

import useToggleState from "@lib/hooks/use-toggle-state"
import ChevronDown from "@modules/common/icons/chevron-down"
import X from "@modules/common/icons/x"

import { getProductPrice } from "@lib/util/get-product-price"
import OptionSelect from "./option-select"
import { HttpTypes } from "@medusajs/types"
import { isSimpleProduct } from "@lib/util/product"

type MobileActionsProps = {
  product: HttpTypes.StoreProduct
  variant?: HttpTypes.StoreProductVariant
  options: Record<string, string | undefined>
  updateOptions: (title: string, value: string) => void
  inStock?: boolean
  handleAddToCart: () => void
  isAdding?: boolean
  show: boolean
  optionsDisabled: boolean
}

const MobileActions: React.FC<MobileActionsProps> = ({
  product,
  variant,
  options,
  updateOptions,
  inStock,
  handleAddToCart,
  isAdding,
  show,
  optionsDisabled,
}) => {
  const { state, open, close } = useToggleState()

  const price = getProductPrice({ product, variantId: variant?.id })

  const selectedPrice = useMemo(() => {
    if (!price) return null
    const { variantPrice, cheapestPrice } = price
    return variantPrice || cheapestPrice || null
  }, [price])

  const isSimple = isSimpleProduct(product)

  return (
    <>
      <div
        className={clx("lg:hidden inset-x-0 bottom-0 fixed z-50", {
          "pointer-events-none": !show,
        })}
      >
        <Transition
          as={Fragment}
          show={show}
          enter="ease-in-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-300"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div
            className="bg-white flex flex-col gap-y-3 p-4 w-full border-t-2 border-gray-100 shadow-[0_-4px_20px_rgba(0,0,0,0.08)]"
            data-testid="mobile-actions"
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-gray-500 font-medium" data-testid="mobile-title">
                  {product.title}
                </p>
                {selectedPrice && (
                  <div className="flex items-center gap-2">
                    <span className={`font-black text-lg ${selectedPrice.price_type === "sale" ? "text-red-600" : "text-black"}`}>
                      {selectedPrice.calculated_price}
                    </span>
                    {selectedPrice.price_type === "sale" && (
                      <span className="text-sm text-gray-400 line-through">
                        {selectedPrice.original_price}
                      </span>
                    )}
                  </div>
                )}
              </div>
            </div>
            <div className={clx("grid gap-2", { "grid-cols-2": !isSimple, "grid-cols-1": isSimple })}>
              {!isSimple && (
                <button
                  onClick={open}
                  className="w-full py-3 rounded-xl border-2 border-gray-200 text-sm font-bold text-black flex items-center justify-between px-4"
                  data-testid="mobile-actions-button"
                >
                  <span>{variant ? Object.values(options).join(" / ") : "Select Options"}</span>
                  <ChevronDown size={14} />
                </button>
              )}
              <button
                onClick={handleAddToCart}
                disabled={!inStock || !variant || isAdding}
                className="w-full py-3 rounded-xl bg-[#7B4A2A] text-yellow-400 font-black text-sm shadow-[3px_3px_0px_rgba(0,0,0,0.2)] hover:bg-[#6a3d22] transition-colors disabled:opacity-40"
                data-testid="mobile-cart-button"
              >
                {isAdding ? "Adding..." : !variant ? "Select option" : !inStock ? "Out of stock" : "Add to Cart →"}
              </button>
            </div>
          </div>
        </Transition>
      </div>

      <Transition appear show={state} as={Fragment}>
        <Dialog as="div" className="relative z-[75]" onClose={close}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-gray-700 bg-opacity-75 backdrop-blur-sm" />
          </Transition.Child>
          <div className="fixed bottom-0 inset-x-0">
            <div className="flex min-h-full h-full items-center justify-center text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <Dialog.Panel
                  className="w-full transform overflow-hidden text-left flex flex-col gap-y-3"
                  data-testid="mobile-actions-modal"
                >
                  <div className="w-full flex justify-end pr-6">
                    <button
                      onClick={close}
                      className="bg-white w-12 h-12 rounded-full flex justify-center items-center shadow-lg"
                      data-testid="close-modal-button"
                    >
                      <X />
                    </button>
                  </div>
                  <div className="bg-white px-6 py-10 rounded-t-3xl">
                    <p className="font-black text-lg mb-6">{product.title}</p>
                    {(product.variants?.length ?? 0) > 1 && (
                      <div className="flex flex-col gap-y-5">
                        {(product.options || []).map((option) => (
                          <div key={option.id}>
                            <OptionSelect
                              option={option}
                              current={options[option.id]}
                              updateOption={updateOptions}
                              title={option.title ?? ""}
                              disabled={optionsDisabled}
                            />
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

export default MobileActions