cyclone/src/components/charts/SegmentedBar.tsx

// ---------------------------------------------------------------------------
// SegmentedBar — thin horizontal status distribution strip.
//
// A single bar split into N color segments showing the share of each
// status. The legend below the bar shows the segment label + count +
// percentage, color-coded to the segment. Designed for 4–6 statuses.
// ---------------------------------------------------------------------------

import { fmt } from "@/lib/format";

export interface Segment {
  id: string;
  label: string;
  count: number;
  color: string;
}

export interface SegmentedBarProps {
  segments: Segment[];
  /** Optional caption shown above the bar (e.g. "Status distribution"). */
  caption?: string;
}

export function SegmentedBar({ segments, caption }: SegmentedBarProps) {
  const total = segments.reduce((s, x) => s + x.count, 0);
  if (total <= 0) {
    return (
      <div
        className="mono text-[11px] py-6 text-center"
        style={{ color: "hsl(var(--surface-ink-3))" }}
      >
        No claims yet.
      </div>
    );
  }

  return (
    <div className="w-full">
      {caption ? (
        <div
          className="mono text-[10.5px] uppercase tracking-[0.16em] mb-2"
          style={{ color: "hsl(var(--surface-ink-3))" }}
        >
          {caption}
        </div>
      ) : null}

      {/* The bar */}
      <div
        className="flex w-full h-[10px] overflow-hidden rounded-[3px]"
        style={{ boxShadow: "inset 0 0 0 1px hsl(30 14% 14% / 0.08)" }}
      >
        {segments.map((s, i) => {
          const pct = (s.count / total) * 100;
          if (pct <= 0) return null;
          return (
            <div
              key={s.id}
              className="h-full"
              style={{
                width: `${pct}%`,
                backgroundColor: s.color,
                animation: `bar-grow-h 700ms cubic-bezier(0.2,0.8,0.2,1) ${
                  i * 50
                }ms both`,
                transformOrigin: "left center",
              }}
              title={`${s.label}: ${s.count} (${((s.count / total) * 100).toFixed(0)}%)`}
              aria-label={`${s.label}: ${s.count} of ${total}`}
            />
          );
        })}
      </div>

      {/* Legend */}
      <ul className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5">
        {segments.map((s) => {
          const pct = (s.count / total) * 100;
          if (s.count === 0) return null;
          return (
            <li
              key={s.id}
              className="flex items-center justify-between gap-2 text-[11.5px] min-w-0"
            >
              <div className="flex items-center gap-2 min-w-0">
                <span
                  aria-hidden
                  className="inline-block h-2 w-2 rounded-sm shrink-0"
                  style={{ backgroundColor: s.color }}
                />
                <span
                  className="truncate"
                  style={{ color: "hsl(var(--surface-ink-2))" }}
                >
                  {s.label}
                </span>
              </div>
              <div className="flex items-center gap-2 shrink-0 mono tabular-nums">
                <span style={{ color: "hsl(var(--surface-ink))" }}>
                  {fmt.num(s.count)}
                </span>
                <span
                  style={{
                    color: "hsl(var(--surface-ink-3))",
                    fontSize: 10.5,
                    minWidth: 30,
                    textAlign: "right",
                  }}
                >
                  {pct.toFixed(0)}%
                </span>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}