import { Calendar, Edit, Trash } from "lucide-react"
import { format } from "date-fns"
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { OfferType, Offer } from "@/types/offers"
import { useConfirm } from "@/context/ConfirmDialogContext"
import { useDeleteOffer } from "@/lib/react-query/hooks/offers"
import { useTranslations } from "next-intl"

const GRADIENTS = [
  "bg-linear-to-r from-[#00BFCD] to-[#15EFFF]",
  "bg-linear-to-r from-[#655B96] to-[#1057B3]",
  "bg-linear-to-r from-[#063777] to-[#1057B3]",
  "bg-linear-to-r from-[#1e3a8a] to-[#3b82f6]",
  "bg-linear-to-r from-[#7c3aed] to-[#a855f7]",
  "bg-linear-to-r from-[#059669] to-[#10b981]",
  "bg-linear-to-r from-[#dc2626] to-[#ef4444]",
  "bg-linear-to-r from-[#ea580c] to-[#f97316]",
  "bg-linear-to-r from-[#c2410c] to-[#ea580c]",
  "bg-linear-to-r from-[#7c2d12] to-[#c2410c]",
  "bg-linear-to-r from-[#365314] to-[#65a30d]",
  "bg-linear-to-r from-[#0f172a] to-[#334155]",
  "bg-linear-to-r from-[#581c87] to-[#7c3aed]",
  "bg-linear-to-r from-[#0c4a6e] to-[#0369a1]",
  "bg-linear-to-r from-[#14532d] to-[#16a34a]"
]

const getRandomGradient = () => {
  return GRADIENTS[Math.floor(Math.random() * GRADIENTS.length)]
}

const getOfferTypeLabel = (type: OfferType, t: (key: string) => string) => {
  switch (type) {
    case OfferType.FESTIVE:
      return t("marketing.offerTypes.festive")
    case OfferType.NTH_VISIT:
      return t("marketing.offerTypes.nthVisit")
    case OfferType.SPEND_THRESHOLD:
      return t("marketing.offerTypes.spendThreshold")
    default:
      return t("marketing.offerTypes.festive")
  }
}

interface OfferCardProps {
  offer: Offer
  onEdit: (offer: Offer) => void
}

export function OfferCard({ offer, onEdit }: OfferCardProps) {
  const deleteOfferMutation = useDeleteOffer()
  const confirm = useConfirm()
  const t = useTranslations()

  const gradientClass = getRandomGradient()

  const handleDeleteOffer = () => {
    confirm.show({
      title: t("marketing.confirmDialog.deleteTitle", { title: offer.title }),
      description: t("marketing.confirmDialog.deleteDescription", { title: offer.title }),
      confirmText: t("marketing.confirmDialog.deleteConfirm"),
      cancelText: t("marketing.confirmDialog.cancel"),
      onConfirm: async () => {
        try {
          await deleteOfferMutation.mutateAsync(offer._id)
        } catch (e) {
          console.error("Delete failed", e)
        }
      }
    })
  }

  const offerTypeLabel = getOfferTypeLabel(offer.type, t)
  const discount = `${offer.discountValue}${offer.discountType === "percentage" ? "%" : "$"}`

  const offerAppliance = () => {
    switch (offer.type) {
      case OfferType.FESTIVE:
        return (
          <span className="flex gap-1 items-center">
            <Calendar className="w-3 h-3" />
            {`${t("marketing.offerDetails.validUntil")} ${format(new Date(offer.endDate || offer.createdAt), "d MMM, yyyy")}`}
          </span>
        )
      case OfferType.NTH_VISIT:
        return `${t("marketing.offerDetails.afterVisits")} ${offer.visitCount} ${t("marketing.offerDetails.visits")}`
      case OfferType.SPEND_THRESHOLD:
        return `${t("marketing.offerDetails.uponSpending")} $${offer.spendThreshold}`
      default:
        return null
    }
  }

  return (
    <div className={`${gradientClass} rounded-lg p-4 sm:p-6 mb-4 hover:shadow-md transition-shadow text-white`}>
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
        <div className="flex flex-col gap-2 w-full lg:w-3/5">
          <span className="inline-block py-1 bg-white px-3 rounded-sm font-medium text-sm w-fit">
            <span className={`${gradientClass} font-bold bg-clip-text text-transparent`}>{offerTypeLabel}</span>
          </span>
          <h2 className="text-xl sm:text-2xl font-bold">{offer.title}</h2>
          <p className="text-sm sm:text-base text-white/90">{offer.description}</p>
          {offer.message && (
            <div className="bg-white/10 rounded-md p-2 border border-white/20 mt-1">
              <p className="text-xs font-semibold text-white/70 uppercase mb-1 flex items-center gap-1">
                <span className="w-1.5 h-1.5 rounded-full bg-white/60"></span>
                {t("marketing.form.labels.message.label")}
              </p>
              <p className="text-sm italic text-white/90 leading-tight">"{offer.message}"</p>
            </div>
          )}
          <p className="text-xs sm:text-sm self-start text-white bg-white/40 backdrop-blur-sm border border-white/30 rounded-full px-2 py-1">
            {offerAppliance()}
          </p>
        </div>
        <div className="w-full lg:w-2/5 flex flex-row items-center justify-between gap-4">
          <span className="border border-white p-1 border-dashed rounded-full">
            <span className="inline-flex items-center -rotate-25 justify-center w-16 h-16 sm:w-18 sm:h-18 bg-white rounded-full font-medium text-base sm:text-lg">
              <span className={`${gradientClass} font-bold bg-clip-text text-transparent`}>
                {discount}
                <br />
                {t("marketing.offerDetails.off")}
              </span>
            </span>
          </span>
          <div className="flex flex-row justify-center gap-2 items-center">
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  size="sm"
                  variant="outline"
                  className="h-8 w-8 p-0 bg-white/20 border-white/30 text-white hover:bg-white/30 hover:text-white backdrop-blur-sm"
                  onClick={() => onEdit(offer)}
                >
                  <Edit className="w-4 h-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>{t("marketing.tooltips.editOffer")}</p>
              </TooltipContent>
            </Tooltip>

            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  size="sm"
                  variant="outline"
                  className="h-8 w-8 p-0 bg-white/20 border-white/30 text-white hover:bg-red-500/80 hover:text-white hover:border-red-400 backdrop-blur-sm"
                  onClick={handleDeleteOffer}
                >
                  <Trash className="w-4 h-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>{t("marketing.tooltips.deleteOffer")}</p>
              </TooltipContent>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  )
}

export function OfferCardSkeleton() {
  return (
    <div className="bg-gray-200 rounded-lg p-4 sm:p-6 mb-4 animate-pulse">
      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
        <div className="flex flex-col gap-2 w-full lg:w-3/5">
          <div className="h-6 bg-gray-300 rounded w-24"></div>
          <div className="h-8 bg-gray-300 rounded w-3/4"></div>
          <div className="h-4 bg-gray-300 rounded w-full"></div>
          <div className="h-6 bg-gray-300 rounded w-32"></div>
        </div>
        <div className="w-full lg:w-2/5 flex flex-row items-center justify-between gap-4">
          <div className="w-16 h-16 sm:w-18 sm:h-18 bg-gray-300 rounded-full"></div>
          <div className="flex flex-row justify-center gap-2 items-center">
            <div className="h-8 w-8 bg-gray-300 rounded"></div>
            <div className="h-8 w-8 bg-gray-300 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  )
}