"use client";

import React from "react";
import type { Lang } from "@/lib/config";

type RibbonColor = "emerald" | "indigo" | "amber" | "rose" | "teal";
type RibbonPosition = "top-left" | "top-right";

interface PromoRibbonProps {
  lang: Lang;
  message?: string;
  messageKey?: "trial" | "noCard" | "popular" | "bestValue" | "limited";
  color?: RibbonColor;
  position?: RibbonPosition;
  animate?: boolean;
  className?: string;
}

const messageTranslations = {
  trial: {
    en: "14-Day Free Trial",
    ar: "تجربة مجانية 14 يوم",
  },
  noCard: {
    en: "No Credit Card",
    ar: "بدون بطاقة ائتمان",
  },
  popular: {
    en: "Most Popular",
    ar: "الأكثر شعبية",
  },
  bestValue: {
    en: "Best Value",
    ar: "أفضل قيمة",
  },
  limited: {
    en: "Limited Offer",
    ar: "عرض محدود",
  },
};

const colorClasses: Record<RibbonColor, { bg: string; shadow: string }> = {
  emerald: {
    bg: "bg-gradient-to-r from-emerald-600 to-teal-600",
    shadow: "shadow-emerald-500/30",
  },
  indigo: {
    bg: "bg-gradient-to-r from-indigo-600 to-purple-600",
    shadow: "shadow-indigo-500/30",
  },
  amber: {
    bg: "bg-gradient-to-r from-amber-500 to-orange-500",
    shadow: "shadow-amber-500/30",
  },
  rose: {
    bg: "bg-gradient-to-r from-rose-500 to-pink-500",
    shadow: "shadow-rose-500/30",
  },
  teal: {
    bg: "bg-gradient-to-r from-teal-600 to-cyan-600",
    shadow: "shadow-teal-500/30",
  },
};

/**
 * PromoRibbon Component
 *
 * A corner ribbon effect for pricing cards and promotional elements.
 * Displays configurable messages like "14-Day Free Trial" or "No Credit Card Required".
 *
 * Features:
 * - Corner ribbon design (top-left or top-right)
 * - Bilingual support (Arabic/English)
 * - Multiple color themes
 * - Optional pulse animation
 * - Configurable message via key or custom text
 *
 * @example
 * // Using predefined message key
 * <div className="relative overflow-hidden">
 *   <PromoRibbon lang="en" messageKey="trial" color="emerald" />
 *   <YourPricingCard />
 * </div>
 *
 * @example
 * // Using custom message
 * <div className="relative overflow-hidden">
 *   <PromoRibbon lang="en" message="Special Offer" color="amber" animate />
 *   <YourPricingCard />
 * </div>
 */
export function PromoRibbon({
  lang,
  message,
  messageKey = "trial",
  color = "emerald",
  position = "top-right",
  animate = false,
  className = "",
}: PromoRibbonProps) {
  const isRTL = lang === "ar";
  const displayMessage = message || messageTranslations[messageKey][lang];
  const colorClass = colorClasses[color];

  // Adjust position for RTL
  const effectivePosition = isRTL
    ? position === "top-right"
      ? "top-left"
      : "top-right"
    : position;

  const positionStyles = {
    "top-right": {
      container: "top-0 right-0",
      ribbon: "origin-top-right rotate-45 translate-x-[29%] -translate-y-[10%]",
    },
    "top-left": {
      container: "top-0 left-0",
      ribbon:
        "origin-top-left -rotate-45 -translate-x-[29%] -translate-y-[10%]",
    },
  };

  const posStyle = positionStyles[effectivePosition];

  return (
    <div
      className={`absolute ${posStyle.container} overflow-hidden w-32 h-32 pointer-events-none ${className}`}
      aria-hidden="true"
    >
      <div
        className={`
          absolute ${posStyle.ribbon}
          ${colorClass.bg}
          text-white text-[10px] sm:text-xs font-bold
          py-1.5 px-8
          shadow-lg ${colorClass.shadow}
          ${animate ? "animate-pulse-subtle" : ""}
        `}
        style={{
          width: "180px",
          textAlign: "center",
        }}
      >
        {displayMessage}
      </div>
    </div>
  );
}

/**
 * PromoRibbonInline Component
 *
 * An inline version of the promo ribbon for use in card headers or titles.
 * Not a corner ribbon, but a badge-style element.
 */
export function PromoRibbonInline({
  lang,
  message,
  messageKey = "trial",
  color = "emerald",
  animate = false,
  className = "",
}: Omit<PromoRibbonProps, "position">) {
  const displayMessage = message || messageTranslations[messageKey][lang];
  const colorClass = colorClasses[color];

  return (
    <span
      className={`
        inline-flex items-center
        ${colorClass.bg}
        text-white text-[10px] sm:text-xs font-semibold
        px-2.5 py-1 rounded-full
        shadow-sm ${colorClass.shadow}
        ${animate ? "animate-pulse-subtle" : ""}
        ${className}
      `}
    >
      {displayMessage}
    </span>
  );
}

export default PromoRibbon;