"use client"
import React, { useMemo } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ArrowRight, TicketPercent, Medal, BanknoteArrowDown } from "lucide-react"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { OfferForm } from "./OfferForm"
import { OfferType } from "@/types/offers"
import { useTranslations } from "next-intl"

const MODAL_STEPS = {
  OFFTER_TYPE: "OFFER_TYPE",
  FESTIVE_OFFER: "FESTIVE_OFFER",
  NO_OF_VISITS: "NO_OF_VISITS",
  SPEND_THRESHOLD: "SPEND_THRESHOLD"
}

interface AddStaffModalProps {
  open: boolean
  setOpen: (open: boolean) => void
}

export default function AddOfferModal({ open, setOpen }: AddStaffModalProps) {
  const [stepType, setStepType] = React.useState(MODAL_STEPS.OFFTER_TYPE)
  const t = useTranslations()

  const OFFERS_TYPES = [
    {
      id: 1,
      icon: <TicketPercent />,
      title: t("marketing.offerCards.festive.title"),
      description: t("marketing.offerCards.festive.description"),
      offerType: MODAL_STEPS.FESTIVE_OFFER
    },
    {
      id: 2,
      icon: <Medal />,
      title: t("marketing.offerCards.visits.title"),
      description: t("marketing.offerCards.visits.description"),
      offerType: MODAL_STEPS.NO_OF_VISITS
    },
    {
      id: 3,
      icon: <BanknoteArrowDown />,
      title: t("marketing.offerCards.spend.title"),
      description: t("marketing.offerCards.spend.description"),
      offerType: MODAL_STEPS.SPEND_THRESHOLD
    }
  ]

  const handleSetIntialState = () => {
    setStepType(MODAL_STEPS.OFFTER_TYPE)
  }

  const modalTitle = useMemo(() => {
    switch (stepType) {
      case MODAL_STEPS.OFFTER_TYPE:
        return t("marketing.modals.addTitle")
      case MODAL_STEPS.FESTIVE_OFFER:
        return t("marketing.modals.createFestive")
      case MODAL_STEPS.NO_OF_VISITS:
        return t("marketing.modals.createVisits")
      case MODAL_STEPS.SPEND_THRESHOLD:
        return t("marketing.modals.createSpend")
      default:
        return t("marketing.modals.addTitle")
    }
  }, [stepType, t])

  const modalWidth = useMemo(() => {
    switch (stepType) {
      case MODAL_STEPS.OFFTER_TYPE:
        return "sm:max-w-[1100px]"
      case MODAL_STEPS.FESTIVE_OFFER:
        return "sm:max-w-[750px]"
      case MODAL_STEPS.NO_OF_VISITS:
        return "sm:max-w-[750px]"
      case MODAL_STEPS.SPEND_THRESHOLD:
        return "sm:max-w-[750px]"
      default:
        return "sm:max-w-[750px]"
    }
  }, [stepType])

  return (
    <Dialog modal={true} open={open} onOpenChange={setOpen}>
      <DialogContent
        className={`${modalWidth} bg-white border-0 max-h-[90vh] overflow-y-auto [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]`}
      >
        <DialogHeader className="bg-primary-gradient  -m-6 mb-0 px-6 py-3 rounded-t-lg">
          <DialogTitle className="text-white text-lg font-medium">{modalTitle}</DialogTitle>
        </DialogHeader>
        {stepType === MODAL_STEPS.OFFTER_TYPE && <CreateOfferStep handleOfferType={type => setStepType(type)} offersTypes={OFFERS_TYPES} />}
        {stepType === MODAL_STEPS.FESTIVE_OFFER && (
          <OfferForm
            offerType={OfferType.FESTIVE}
            mode="add"
            onSuccess={() => {
              setOpen(false)
              handleSetIntialState()
            }}
            onCancel={() => {
              setOpen(false)
              handleSetIntialState()
            }}
          />
        )}
        {stepType === MODAL_STEPS.NO_OF_VISITS && (
          <OfferForm
            offerType={OfferType.NTH_VISIT}
            mode="add"
            onSuccess={() => {
              setOpen(false)
              handleSetIntialState()
            }}
            onCancel={() => {
              setOpen(false)
              handleSetIntialState()
            }}
          />
        )}
        {stepType === MODAL_STEPS.SPEND_THRESHOLD && (
          <OfferForm
            offerType={OfferType.SPEND_THRESHOLD}
            mode="add"
            onSuccess={() => {
              setOpen(false)
              handleSetIntialState()
            }}
            onCancel={() => {
              setOpen(false)
              handleSetIntialState()
            }}
          />
        )}
      </DialogContent>
    </Dialog>
  )
}

const CreateOfferStep = ({ handleOfferType, offersTypes }: { handleOfferType: (type: string) => void, offersTypes: any[] }) => {
  const t = useTranslations()

  return (
    <div className="grid grid-cols-3 gap-3">
      {offersTypes.map(offer => (
        <Card key={offer.id} className="gap-1 shadow-none">
          <CardHeader className="flex items-start">
            <span className="p-3 bg-primary-gradient rounded-sm text-white">{offer.icon}</span>
          </CardHeader>
          <CardContent className="min-h-[255px] flex flex-col">
            <div className="flex flex-col gap-1 flex-1">
              <div className="flex flex-col">
                <span className="font-semibold text-lg">{offer.title}</span>
                <span className="text-sm text-gray-600 mt-1">{offer.description}</span>
              </div>
              <Button onClick={() => handleOfferType(offer.offerType)} className="mt-auto bg-primary-gradient text-white px-4 py-2">
                {t("marketing.offerCards.festive.button")} <ArrowRight className="inline ml-1" />
              </Button>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}