"use client";
import { motion } from "framer-motion";
import type { PaymentStatus, OrderStatus } from "./types";

const STATUS_CONFIG: Record<
  string,
  { label: string; dot: string; bg: string; text: string; ring: string }
> = {
  pending: {
    label: "Pending",
    dot: "#f0c040",
    bg: "rgba(240,192,64,0.1)",
    text: "#f0c040",
    ring: "rgba(240,192,64,0.3)",
  },
  paid: {
    label: "Paid",
    dot: "#22c55e",
    bg: "rgba(34,197,94,0.1)",
    text: "#22c55e",
    ring: "rgba(34,197,94,0.3)",
  },
  refunded: {
    label: "Refunded",
    dot: "#60a5fa",
    bg: "rgba(96,165,250,0.1)",
    text: "#60a5fa",
    ring: "rgba(96,165,250,0.3)",
  },
  failed: {
    label: "Failed",
    dot: "#f87171",
    bg: "rgba(248,113,113,0.1)",
    text: "#f87171",
    ring: "rgba(248,113,113,0.3)",
  },
  cancelled: {
    label: "Cancelled",
    dot: "#6b7280",
    bg: "rgba(107,114,128,0.1)",
    text: "#6b7280",
    ring: "rgba(107,114,128,0.3)",
  },
  awaiting_payment: {
    label: "Awaiting Payment",
    dot: "#f0c040",
    bg: "rgba(240,192,64,0.1)",
    text: "#f0c040",
    ring: "rgba(240,192,64,0.3)",
  },
  awaiting_confirmation: {
    label: "Awaiting Confirmation",
    dot: "#fb923c",
    bg: "rgba(251,146,60,0.1)",
    text: "#fb923c",
    ring: "rgba(251,146,60,0.3)",
  },
  confirmed: {
    label: "Confirmed",
    dot: "#22c55e",
    bg: "rgba(34,197,94,0.1)",
    text: "#22c55e",
    ring: "rgba(34,197,94,0.3)",
  },
  completed: {
    label: "Completed",
    dot: "#22c55e",
    bg: "rgba(34,197,94,0.1)",
    text: "#22c55e",
    ring: "rgba(34,197,94,0.3)",
  },
  requested: {
    label: "Refund Requested",
    dot: "#f0c040",
    bg: "rgba(240,192,64,0.1)",
    text: "#f0c040",
    ring: "rgba(240,192,64,0.3)",
  },
  processed: {
    label: "Refund Processed",
    dot: "#60a5fa",
    bg: "rgba(96,165,250,0.1)",
    text: "#60a5fa",
    ring: "rgba(96,165,250,0.3)",
  },
};

interface Props {
  status: PaymentStatus | OrderStatus | string;
  pulse?: boolean;
  size?: "sm" | "md";
}

export function StatusBadge({ status, pulse = false, size = "md" }: Props) {
  const cfg = STATUS_CONFIG[status] ?? {
    label: status,
    dot: "#6b7280",
    bg: "rgba(107,114,128,0.1)",
    text: "#6b7280",
    ring: "rgba(107,114,128,0.3)",
  };

  const px = size === "sm" ? "px-2 py-0.5 text-[9px]" : "px-2.5 py-1 text-[10px]";
  const dotSize = size === "sm" ? "w-1.5 h-1.5" : "w-2 h-2";

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full font-semibold ${px}`}
      style={{ background: cfg.bg, color: cfg.text }}
    >
      <span className={`${dotSize} rounded-full relative shrink-0`} style={{ background: cfg.dot }}>
        {pulse && (
          <motion.span
            className={`absolute inset-0 rounded-full`}
            style={{ background: cfg.dot }}
            animate={{ scale: [1, 2.2, 1], opacity: [0.7, 0, 0.7] }}
            transition={{ duration: 1.6, repeat: Infinity }}
          />
        )}
      </span>
      {cfg.label}
    </span>
  );
}