// ~/src/siteplane/components/badge/badge.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

import {
  siteplaneUIDefaults,
  useResolvedControlSize,
} from "../../system/provider/siteplane-ui-provider";
import { cn } from "../../system/utils/cn";
import { baseClass, slotClass } from "../../system/utils/slot-class";
import { wrapTextRuns } from "../../system/utils/text-runs";
import "./badge.css";

// The badge sets no white-space of its own: its label wraps the way the text
// around the badge does (design-rework.css, the badge-label rule).
export const badgeVariants = cva(
  "shrink-0 items-center justify-center disabled:opacity-(--sp-rw-disabled-opacity-action) [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11",
  {
    defaultVariants: {
      size: siteplaneUIDefaults.controlSize,
      variant: "default",
    },
    variants: {
      size: {
        md: "",
        lg: "",
        sm: "",
        xl: "",
      },
      // The variant colors, the link and button hover tint and the focus
      // ring all come from the kit rules in design-rework.css, so no variant
      // adds a class of its own.
      variant: {
        accent: "",
        // Deprecated: the earlier name of accent.
        brand: "",
        default: "",
        destructive: "",
        error: "",
        info: "",
        inverse: "",
        outline: "",
        secondary: "",
        success: "",
        warning: "",
      },
    },
  },
);

export type BadgeProfile = "count" | "entitlement" | "status" | "verified";

// Counts never truncate (design-rework.css), so their label carries no title.
const countProfiles: ReadonlySet<string> = new Set([
  "count",
  "group-overflow-count",
]);

/**
 * The text of a badge is one label: every run of text children, such as
 * `{count} new`, becomes one label span. The label stays on one line and ends
 * with an ellipsis where the badge meets the edge of its space (rulebook K5);
 * its title carries the full text. Icons and other elements stay children of
 * the badge, which lays them out.
 */
function badgeLabels(
  children: React.ReactNode,
  titled: boolean,
): React.ReactNode[] {
  return wrapTextRuns(children, (text, index) => (
    <span
      className="sp-badge-label"
      data-slot="badge-label"
      key={`badge-label-${index}`}
      title={titled ? text.trim() : undefined}
    >
      {text}
    </span>
  ));
}

export type BadgeVariant = Exclude<
  NonNullable<VariantProps<typeof badgeVariants>["variant"]>,
  BadgeDeprecatedVariant
>;
/**
 * @deprecated `brand` is the earlier name of `accent`, the kit's brand value;
 * it renders `accent`.
 */
export type BadgeDeprecatedVariant = "brand";

export interface BadgeProps extends useRender.ComponentProps<"span"> {
  /**
   * A form of the badge. `count` is a compact count that grows as a pill and
   * never truncates; `entitlement` labels a plan with its icon; `status` is a
   * state in words after a colored dot, without fill or contour, with the dot
   * in the tone of the variant; `verified` is the check circle on an avatar.
   */
  profile?: BadgeProfile;
  /**
   * `default` is a white surface with a hairline contour and `outline` keeps
   * only the contour. `secondary` is a light, translucent neutral fill that
   * reads on a white card, on a tinted row and in Dark.
   * `accent`, `inverse` and `destructive` are solid fills,
   * like the Button variants of those names; `info`, `success`, `warning` and
   * `error` tint with a status color. A `count` badge is `inverse` and an
   * `entitlement` badge is `info` unless a variant is set. A `status` badge
   * keeps no fill: its variant gives the dot's tone, `success`, `warning`,
   * `error` (or `destructive`) and `info` (or `accent`), and gray for the
   * others. `brand` is the deprecated earlier name of `accent`.
   */
  variant?: BadgeVariant | BadgeDeprecatedVariant | null | undefined;
  size?: VariantProps<typeof badgeVariants>["size"];
  /**
   * `pill` rounds the badge fully at every size; the size keeps its height
   * and padding, and the variant keeps its styling. `default` takes the
   * theme's badge radius, `--sp-rw-radius-badge`.
   */
  shape?: "default" | "pill";
  /**
   * Runs two soft lights, the brand accent and the amber highlight, around
   * the badge's edge, for the one announcement on a page. Use it on an opaque
   * badge such as `default`; reduced motion keeps the lights still.
   */
  light?: boolean;
}

export function Badge({
  className,
  profile,
  variant,
  size,
  shape = "default",
  light = false,
  render,
  children,
  ...props
}: BadgeProps): React.ReactElement {
  const resolvedSize = useResolvedControlSize(size);
  const resolvedVariant: BadgeVariant =
    variant === "brand"
      ? "accent"
      : (variant ??
        (profile === "count"
          ? "inverse"
          : profile === "entitlement"
            ? "info"
            : "default"));
  // A badge stays on one line: its text is a label that ends with an ellipsis
  // when the badge would be wider than the space it sits in (rulebook K5), so
  // a long value never pushes a row apart. The badge-label rule in
  // design-rework.css owns that; icons beside the label keep their size.
  const label = badgeLabels(children, !countProfiles.has(profile ?? ""));
  // The status dot comes from the badge; the words carry the state, so the
  // dot is hidden from assistive technology.
  const dot =
    profile === "status" ? (
      <span aria-hidden="true" className="sp-badge-dot" data-slot="badge-dot" />
    ) : null;
  const defaultProps = {
    // The light lives inside the badge, so className and style place a lit
    // badge exactly like any other.
    children: light ? (
      <>
        <span
          aria-hidden="true"
          className="sp-badge-light-halo"
          data-slot="badge-light-halo"
        />
        <span
          aria-hidden="true"
          className="sp-badge-light-ring"
          data-slot="badge-light-ring"
        />
        {dot}
        {label}
      </>
    ) : (
      <>
        {dot}
        {label}
      </>
    ),
    className: cn(
      slotClass("badge", props, render),
      baseClass("badge", props, render),
      badgeVariants({ size: resolvedSize, variant: resolvedVariant }),
      className,
    ),
    "data-foundation": "badge",
    "data-light": light ? "" : undefined,
    "data-profile": profile,
    "data-shape": shape,
    "data-size": resolvedSize,
    "data-slot": "badge",
    "data-variant": resolvedVariant,
  };

  return useRender({
    defaultTagName: "span",
    props: mergeProps<"span">(defaultProps, props),
    render,
  });
}


// ~/src/siteplane/components/badge/badge.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  /* The Badge light: two lights, the brand accent and the amber highlight, run
   * half a turn apart around the badge's edge, and a soft halo follows them
   * outside. Both are drawn inside the badge, so a lit badge places and sizes
   * like any other badge. A registered angle turns one conic gradient that
   * paints the 1 px ring on the edge and the blurred halo around it. */
  @property --sp-badge-light-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  /* A lit badge is its own stacking context, so the halo's negative z-index
   * stays inside it: above the badge's fill, below its label and its focus
   * outline, and never under the background of a card or page around it. The
   * ring and the halo measure the badge's edge from its border, the kit's
   * hairline width. */
  :root .sp-base-badge[data-light] {
    --sp-badge-light-edge: var(--sp-rw-border-default);
    isolation: isolate;
  }

  /* Each part shows only outside its content box, so the fill stays clean. */
  .sp-badge-light-halo,
  .sp-badge-light-ring {
    --sp-badge-light-brand: oklch(
      from var(--sp-rw-bg-accent) calc(l + 0.05) c h
    );
    position: absolute;
    background: conic-gradient(
      from var(--sp-badge-light-angle),
      transparent 0deg,
      oklch(from var(--sp-badge-light-brand) l c h / 0.85) 50deg,
      oklch(
          from var(--sp-badge-light-brand) calc(l + 0.2) calc(c * 0.55) h / 0.6
        )
        85deg,
      transparent 130deg,
      transparent 180deg,
      oklch(from var(--sp-rw-bg-highlight) l c h / 0.85) 230deg,
      oklch(from var(--sp-rw-bg-highlight) calc(l + 0.1) calc(c * 0.55) h / 0.6)
        265deg,
      transparent 310deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: sp-badge-light-turn var(--motion-duration-badge-light)
      var(--motion-ease-linear) infinite;
  }

  /* The halo. Insets start at the badge's padding box, one border width inside
   * its edge. The gradient fills the badge grown by 2 px and blurs outwards;
   * 26 px of transparent border give the blur room inside the mask, and the
   * content box, which the mask cuts out, is the badge itself. Its radius is
   * the badge's own plus those 28 px, so the cut-out keeps the badge's corners
   * at any radius and the gradient stays concentric with them. */
  .sp-badge-light-halo {
    inset: calc((var(--sp-badge-light-edge) + 28px) * -1);
    z-index: -1;
    border: 26px solid transparent;
    border-radius: calc(
      var(--sp-rw-radius-badge, var(--sp-rw-radius-xs)) + 28px
    );
    padding: 2px;
    background-clip: padding-box;
    filter: blur(7px);
    opacity: 0.4;
    transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
  }

  /* The light itself: a 1 px ring on the badge's edge, above its fill. */
  .sp-badge-light-ring {
    inset: calc(var(--sp-badge-light-edge) * -1);
    border-radius: inherit;
    padding: 1px;
  }

  .sp-base-badge[data-light]:hover > .sp-badge-light-halo {
    opacity: 0.55;
  }

  /* A lit badge answers hover with the stronger halo, not the grey link tint. */
  :root :is(a, button).sp-base-badge[data-light]:hover {
    background-image: none;
  }

  @keyframes sp-badge-light-turn {
    to {
      --sp-badge-light-angle: 360deg;
    }
  }

  /* Reduced motion keeps the lights still and the hover instant (M5): the
   * document mode, the provider preset and the system setting. */
  html[data-motion-reduce="true"] .sp-badge-light-halo,
  html[data-motion-reduce="true"] .sp-badge-light-ring,
  [data-sp-motion="reduced"] .sp-badge-light-halo,
  [data-sp-motion="reduced"] .sp-badge-light-ring {
    animation: none;
    transition-duration: 1ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .sp-badge-light-halo,
    .sp-badge-light-ring {
      animation: none;
      transition-duration: 1ms;
    }
  }
}


// ~/src/siteplane/components/badge/badge-internal.ts

import type * as React from "react";

import { Badge, type BadgeProfile, type BadgeProps } from "./badge";

/*
 * Kit-internal Badge. Not public API: the badge index does not export this
 * module, and its names and profiles may change in any release.
 *
 * `group-overflow-count` is the circular count at the end of an avatar stack.
 * AvatarGroupCount renders it; applications use AvatarGroupCount.
 */
export type KitBadgeProfile = BadgeProfile | "group-overflow-count";

export type KitBadgeProps = Omit<BadgeProps, "profile"> & {
  profile?: KitBadgeProfile;
};

/** Badge with the kit's composition profiles; the same component. */
export const KitBadge = Badge as (props: KitBadgeProps) => React.ReactElement;


// ~/src/siteplane/components/badge/index.ts

export * from "./badge";