"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const statusBadgeVariants = cva(
  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors border",
  {
    variants: {
      variant: {
        success: "",
        warning: "",
        danger:  "",
        info:    "",
        neutral: "",
        purple:  "",
        teal:    "",
        orange:  "",
      },
      type: {
        /** Latar soft + border subtle — default */
        soft:    "",
        /** Latar solid penuh + teks putih */
        solid:   "border-transparent",
        /** Bg transparan, hanya border + teks */
        outline: "bg-transparent",
      },
    },
    compoundVariants: [
      /* ── SOFT ─────────────────────────────────── */
      { variant: "success", type: "soft",    class: "d-bg-success-soft d-border-success" },
      { variant: "warning", type: "soft",    class: "d-bg-warning-soft d-border-warning" },
      { variant: "danger",  type: "soft",    class: "d-bg-danger-soft  d-border-danger" },
      { variant: "info",    type: "soft",    class: "d-bg-info-soft    d-border-info" },
      { variant: "neutral", type: "soft",    class: "d-bg-neutral-soft border-border" },
      { variant: "purple",  type: "soft",    class: "d-bg-purple-soft  border-purple-300 dark:border-purple-700" },
      { variant: "teal",    type: "soft",    class: "d-bg-primary-soft d-border-primary" },
      { variant: "orange",  type: "soft",    class: "d-bg-orange-soft  border-orange-300 dark:border-orange-700" },

      /* ── SOLID ────────────────────────────────── */
      { variant: "success", type: "solid",   class: "d-bg-success-solid" },
      { variant: "warning", type: "solid",   class: "d-bg-warning-solid" },
      { variant: "danger",  type: "solid",   class: "d-bg-danger-solid" },
      { variant: "info",    type: "solid",   class: "d-bg-info-solid" },
      { variant: "neutral", type: "solid",   class: "d-bg-neutral-solid" },
      { variant: "purple",  type: "solid",   class: "d-bg-purple-solid" },
      { variant: "teal",    type: "solid",   class: "d-bg-primary-solid" },
      { variant: "orange",  type: "solid",   class: "d-bg-orange-solid" },

      /* ── OUTLINE ──────────────────────────────── */
      { variant: "success", type: "outline", class: "d-text-success d-border-success" },
      { variant: "warning", type: "outline", class: "d-text-warning d-border-warning" },
      { variant: "danger",  type: "outline", class: "d-text-danger  d-border-danger" },
      { variant: "info",    type: "outline", class: "d-text-info    d-border-info" },
      { variant: "neutral", type: "outline", class: "d-text-muted   border-border" },
      { variant: "purple",  type: "outline", class: "d-text-purple  border-purple-400 dark:border-purple-700" },
      { variant: "teal",    type: "outline", class: "d-text-primary d-border-primary" },
      { variant: "orange",  type: "outline", class: "d-text-orange  border-orange-400 dark:border-orange-700" },
    ],
    defaultVariants: {
      variant: "neutral",
      type: "soft",
    },
  }
);

/** Warna dot mengikuti variant */
const DOT_COLOR: Record<string, string> = {
  success: "bg-emerald-500 dark:bg-emerald-400",
  warning: "bg-amber-500   dark:bg-amber-400",
  danger:  "bg-rose-500    dark:bg-rose-400",
  info:    "bg-blue-500    dark:bg-blue-400",
  neutral: "bg-gray-400    dark:bg-gray-500",
  purple:  "bg-purple-500  dark:bg-purple-400",
  teal:    "bg-teal-500    dark:bg-teal-400",
  orange:  "bg-orange-500  dark:bg-orange-400",
};

export type StatusVariant = NonNullable<VariantProps<typeof statusBadgeVariants>["variant"]>;
export type StatusType    = NonNullable<VariantProps<typeof statusBadgeVariants>["type"]>;

interface StatusBadgeProps extends VariantProps<typeof statusBadgeVariants> {
  children?: React.ReactNode;
  /** Icon Lucide di kiri label */
  icon?: React.ReactNode;
  /** Tampilkan dot pill di kiri label */
  withDot?: boolean;
  className?: string;
}

export function StatusBadge({
  variant = "neutral",
  type = "soft",
  icon,
  withDot,
  children,
  className,
}: StatusBadgeProps) {
  return (
    <span
      data-slot="status-badge"
      className={cn(statusBadgeVariants({ variant, type }), className)}
    >
      {withDot && (
        <span
          className={cn("size-1.5 shrink-0 rounded-full", DOT_COLOR[variant ?? "neutral"])}
        />
      )}
      {icon && !withDot && (
        <span className="shrink-0 [&_svg]:size-3">{icon}</span>
      )}
      {children}
    </span>
  );
}