/**
 * StudioControls — shared Sorbet Studio control atoms.
 *
 * MetricPill: series toggle whose color dot doubles as the chart legend
 *   (charts using these should NOT also render a recharts <Legend/>).
 * LegendChip: non-interactive series chip for charts without toggles.
 * QuietStat: deemphasized stat cell for gap-px strips (secondary metrics).
 * PILL_TRIGGER_CLASS / PILL_BUTTON_CLASS: class strings that make ad-hoc
 *   Select triggers and small buttons match BusinessRangeSelect's pill look.
 */
import React from "react";
import { cn } from "@/lib/utils";

export const PILL_TRIGGER_CLASS =
  "h-8 w-auto gap-1.5 rounded-full border-border bg-card px-3.5 text-xs font-semibold text-foreground shadow-none hover:bg-surface-subtle focus:ring-1 focus:ring-coral/30 focus:ring-offset-0";

export const PILL_BUTTON_CLASS =
  "h-8 rounded-full border-border bg-card px-3.5 text-xs font-semibold text-foreground shadow-none hover:bg-surface-subtle";

export interface MetricPillProps {
  active: boolean;
  color: string;
  /** Dashed ring dot for comparison/average series */
  dashed?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

export const MetricPill: React.FC<MetricPillProps> = ({
  active,
  color,
  dashed = false,
  onClick,
  children,
}) => (
  <button
    type="button"
    onClick={onClick}
    className={cn(
      "flex h-7 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium transition-colors",
      active
        ? "bg-muted text-foreground hover:bg-[#eae7e2]"
        : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
    )}
  >
    <span
      className="inline-block h-2 w-2 rounded-full"
      style={
        dashed
          ? { background: "transparent", border: `1.5px dashed ${active ? color : "#d8d4cd"}` }
          : { background: active ? color : "#d8d4cd" }
      }
    />
    {children}
  </button>
);

export interface LegendChipProps {
  color: string;
  dashed?: boolean;
  children: React.ReactNode;
}

/** Static series chip — for charts whose series aren't toggleable */
export const LegendChip: React.FC<LegendChipProps> = ({ color, dashed = false, children }) => (
  <span className="flex h-7 shrink-0 items-center gap-1.5 px-2 text-xs font-medium text-muted-foreground">
    <span
      className="inline-block h-2 w-2 rounded-full"
      style={
        dashed
          ? { background: "transparent", border: `1.5px dashed ${color}` }
          : { background: color }
      }
    />
    {children}
  </span>
);

export interface QuietStatProps {
  label: string;
  value: React.ReactNode;
  sub?: React.ReactNode;
  onClick?: () => void;
  loading?: boolean;
}

/**
 * Deemphasized stat cell. Place inside:
 * <div className="grid grid-cols-2 gap-px overflow-hidden rounded-[14px]
 *      border border-border bg-muted sm:grid-cols-3 lg:grid-cols-6">
 */
export const QuietStat: React.FC<QuietStatProps> = ({ label, value, sub, onClick, loading }) => {
  const Tag = onClick ? "button" : "div";
  return (
    <Tag
      {...(onClick ? { type: "button" as const, onClick } : {})}
      className={cn(
        "bg-card px-3.5 py-2.5 text-left",
        onClick &&
          "transition-colors hover:bg-surface-subtle focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      )}
    >
      <div className="text-[10.5px] font-semibold text-muted-foreground/75">{label}</div>
      {loading ? (
        <div className="mt-1.5 h-4 w-16 animate-pulse rounded bg-muted" />
      ) : (
        <>
          <div className="text-[15px] font-bold tabular-nums tracking-tight text-foreground">
            {value}
          </div>
          {sub && <div className="text-[10.5px] text-muted-foreground">{sub}</div>}
        </>
      )}
    </Tag>
  );
};

export const QUIET_STRIP_CLASS =
  "grid gap-px overflow-hidden rounded-[14px] border border-border bg-muted";
