import { cn } from "@/lib/utils";
import { ReactNode } from "react";

interface IProps {
  status?: string;
  children: ReactNode;
}

const reds = [
  "cancelled",
  "inactive",
  "rejected",
  "failed",
  "denied",
  "blocked",
];
const greens = [
  "active",
  "approved",
  "completed",
  "success",
  "verified",
  "published",
  "sent",
];
const blues = ["awarded", "processing", "in-review", "scheduled", "reviewed"];
const yellows = ["pending", "warning", "on-hold", "delayed"];
const oranges = ["expired", "expiring", "limited"];
const grays = ["draft", "disabled", "archived", "paused", "suspended"];

type Tone =
  | "green"
  | "red"
  | "blue"
  | "yellow"
  | "orange"
  | "gray"
  | "new"
  | "info"
  | "urgent"
  | "featured";

type PulseKind = "ping" | "pulse" | "none";

function resolveTone(status: string): Tone {
  if (greens.includes(status)) return "green";
  if (reds.includes(status)) return "red";
  if (blues.includes(status)) return "blue";
  if (yellows.includes(status)) return "yellow";
  if (oranges.includes(status)) return "orange";
  if (grays.includes(status)) return "gray";
  if (status === "new") return "new";
  if (status === "info") return "info";
  if (status === "urgent") return "urgent";
  if (status === "featured") return "featured";
  return "gray";
}

const toneStyles: Record<
  Tone,
  {
    root: string;
    dot: string;
    dotRing?: string;
    pingColor?: string;
    pulse: PulseKind;
    shimmer: boolean;
  }
> = {
  green: {
    root: "bg-gradient-to-br from-green via-green to-green-dark text-white shadow-[0_2px_10px_-2px_rgba(34,173,92,0.55)] ring-1 ring-inset ring-white/25",
    dot: "bg-white shadow-[0_0_10px_rgba(255,255,255,0.85)]",
    dotRing: "ring-1 ring-white/40",
    pingColor: "bg-white/70",
    pulse: "ping",
    shimmer: true,
  },
  red: {
    root: "bg-gradient-to-br from-error via-error to-error-dark text-white shadow-[0_2px_10px_-2px_rgba(242,48,48,0.5)] ring-1 ring-inset ring-white/20",
    dot: "bg-white shadow-[0_0_10px_rgba(255,255,255,0.75)]",
    dotRing: "ring-1 ring-white/35",
    pingColor: "bg-white/70",
    pulse: "pulse",
    shimmer: true,
  },
  blue: {
    root: "bg-gradient-to-br from-blue via-blue to-blue-dark text-white shadow-[0_2px_10px_-2px_rgba(60,80,224,0.45)] ring-1 ring-inset ring-white/25",
    dot: "bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)]",
    dotRing: "ring-1 ring-white/35",
    pingColor: "bg-white/70",
    pulse: "ping",
    shimmer: true,
  },
  yellow: {
    root: "border border-yellow-dark-2/15 bg-gradient-to-br from-yellow-light to-yellow-light/70 text-yellow-dark-2 shadow-sm shadow-yellow-dark/10 ring-1 ring-inset ring-white/60",
    dot: "bg-yellow-dark-2 shadow-[0_0_8px_rgba(217,119,6,0.45)]",
    dotRing: "ring-2 ring-yellow-dark-2/25",
    pingColor: "bg-yellow-dark-2/50",
    pulse: "pulse",
    shimmer: false,
  },
  orange: {
    root: "bg-gradient-to-br from-orange-light to-orange-light/85 text-white shadow-[0_2px_10px_-2px_rgba(245,148,96,0.45)] ring-1 ring-inset ring-white/25",
    dot: "bg-white shadow-[0_0_8px_rgba(255,255,255,0.7)]",
    dotRing: "ring-1 ring-white/30",
    pingColor: "bg-white/70",
    pulse: "pulse",
    shimmer: true,
  },
  gray: {
    root: "border border-gray-4/60 bg-gradient-to-b from-gray-1 to-gray-2 text-gray-7 shadow-sm ring-1 ring-inset ring-white/80",
    dot: "bg-gray-5 shadow-inner",
    dotRing: "ring-1 ring-gray-4/50",
    pulse: "none",
    shimmer: false,
  },
  new: {
    root: "border border-green-light-3/80 bg-gradient-to-br from-green-light-6 via-green-light-6 to-green-light-5 text-green-dark shadow-sm shadow-green/10 ring-1 ring-inset ring-white/70",
    dot: "bg-green shadow-[0_0_8px_rgba(34,173,92,0.5)]",
    dotRing: "ring-2 ring-green/20",
    pingColor: "bg-green/60",
    pulse: "ping",
    shimmer: false,
  },
  info: {
    root: "border border-blue-light-3/80 bg-gradient-to-br from-blue-light-5 via-blue-light-5 to-blue-light-4 text-blue-dark shadow-sm shadow-blue/10 ring-1 ring-inset ring-white/70",
    dot: "bg-blue shadow-[0_0_8px_rgba(60,80,224,0.45)]",
    dotRing: "ring-2 ring-blue/15",
    pingColor: "bg-blue/60",
    pulse: "ping",
    shimmer: false,
  },
  urgent: {
    root: "border border-error-light-3/90 bg-gradient-to-br from-error-light-6 via-error-light-6 to-error-light-5 text-error-dark shadow-sm shadow-error/10 ring-1 ring-inset ring-white/70",
    dot: "bg-error shadow-[0_0_8px_rgba(242,48,48,0.45)]",
    dotRing: "ring-2 ring-error/20",
    pingColor: "bg-error/60",
    pulse: "pulse",
    shimmer: false,
  },
  featured: {
    root: "bg-gradient-to-br from-primary via-[#6B63F3] to-primary text-white shadow-[0_2px_12px_-2px_rgba(87,80,241,0.55)] ring-1 ring-inset ring-white/30",
    dot: "bg-white shadow-[0_0_12px_rgba(255,255,255,0.9)]",
    dotRing: "ring-1 ring-white/40",
    pingColor: "bg-white/70",
    pulse: "ping",
    shimmer: true,
  },
};

const Status = ({ status = "draft", children }: IProps) => {
  const tone = resolveTone(status);
  const { root, dot, dotRing, pingColor, pulse, shimmer } = toneStyles[tone];

  return (
    <span
      className={cn(
        "group/status relative inline-flex max-w-full items-center justify-center gap-2 overflow-hidden rounded-full px-3.5 py-1.5 text-center text-xs font-semibold capitalize tracking-wide transition-all duration-300 ease-out",
        "hover:-translate-y-[1px] hover:brightness-110 motion-reduce:hover:translate-y-0",
        root,
      )}
    >
      {/* Shimmer sweep */}
      {shimmer && (
        <span
          aria-hidden
          className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent motion-safe:animate-[shimmer_3.2s_ease-in-out_infinite] motion-reduce:hidden"
        />
      )}

      {/* Dot + radar ping */}
      <span
        aria-hidden
        className="relative inline-flex h-2 w-2 shrink-0 items-center justify-center"
      >
        {pulse === "ping" && pingColor && (
          <span
            className={cn(
              "absolute inline-flex h-full w-full rounded-full opacity-75 motion-safe:animate-ping motion-reduce:hidden",
              pingColor,
            )}
          />
        )}
        <span
          className={cn(
            "relative inline-flex h-2 w-2 rounded-full",
            dot,
            dotRing,
            pulse === "pulse" && "motion-safe:animate-pulse",
          )}
        />
      </span>

      <span className="relative min-w-0 truncate">{children}</span>
    </span>
  );
};

export default Status;
