krow_talent_app/src/components/ds/MetricStrip.tsx

import type { DsProps } from './props';
import * as React from 'react';
import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * MetricStrip — modern executive operational metric card strip.
 *
 * `items: [{ label, value, delta?, deltaLabel?, invertTrend?, sub?, icon?, tone? }]`
 */

const TONE = {
  default: 'text-ink-1',
  brand: 'text-blue-600 dark:text-blue-400',
  success: 'text-emerald-600 dark:text-emerald-400',
  warning: 'text-amber-600 dark:text-amber-400',
  risk: 'text-red-600 dark:text-red-400',
};

const ICON_BG = {
  default: 'bg-surface-subtle text-ink-3',
  brand: 'bg-blue-50 text-blue-600 dark:bg-blue-950/60 dark:text-blue-400',
  success: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400',
  warning: 'bg-amber-50 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400',
  risk: 'bg-red-50 text-red-600 dark:bg-red-950/60 dark:text-red-400',
};

const ACCENT_BAR = {
  default: 'from-gray-400 to-gray-600',
  brand: 'from-blue-500 to-indigo-500',
  success: 'from-emerald-500 to-teal-500',
  warning: 'from-amber-500 to-orange-500',
  risk: 'from-red-500 to-rose-500',
};

function Delta({ delta, label, invert }) {
  if (typeof delta !== 'number') return null;

  const flat = delta === 0;
  const good = invert ? delta < 0 : delta > 0;
  const Icon = flat ? Minus : delta > 0 ? ArrowUpRight : ArrowDownRight;

  return (
    <span
      className={cn(
        'inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-[11px] font-semibold tabular-nums border',
        flat
          ? 'bg-surface-subtle text-ink-4 border-border/60'
          : good
          ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400 border-emerald-200/50'
          : 'bg-red-50 text-red-700 dark:bg-red-950/60 dark:text-red-400 border-red-200/50'
      )}
    >
      <Icon className="h-3 w-3 shrink-0" aria-hidden="true" />
      {flat ? '0%' : `${Math.abs(delta)}%`}
      {label && <span className="ml-1 font-normal opacity-80">{label}</span>}
    </span>
  );
}

/** @param {any} props */
export function MetricStrip({ items = [], columns, className, loading = false }: DsProps) {
  const count = columns ?? Math.min(items.length, 6);

  const gridCols = {
    2: 'sm:grid-cols-2',
    3: 'sm:grid-cols-3',
    4: 'grid-cols-2 sm:grid-cols-4',
    5: 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-5',
    6: 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6',
  }[count] || 'grid-cols-2 sm:grid-cols-4';

  return (
    <div className={cn('grid gap-3.5', gridCols, className)}>
      {items.map((item) => {
        const IconComponent = item.icon;
        const toneKey = item.tone || 'default';

        return (
          <div
            key={item.label}
            className="group relative flex flex-col justify-between rounded-xl border border-border/80 bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-blue-500/40"
          >
            <div>
              {/* Header: Label & Icon */}
              <div className="flex items-center justify-between gap-1.5">
                {/* Wraps on a phone, clips on everything wider.
                    Two of these sit side by side at 320px, which leaves about
                    110px for the label — enough for "OPEN POSITIONS" over two
                    lines and not enough for it on one, so a flat `truncate`
                    turned every metric on the Control Center into "OPEN POSI…".
                    From `sm` the strip is three or six across with room for the
                    label on one line, which is where clipping was the intent. */}
                <p className="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">
                  {item.label}
                </p>
                {IconComponent && (
                  <div
                    className={cn(
                      'flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs',
                      ICON_BG[toneKey] || ICON_BG.default
                    )}
                  >
                    <IconComponent className="h-3.5 w-3.5" aria-hidden="true" />
                  </div>
                )}
              </div>

              {/* Metric Main Display & Delta */}
              {loading ? (
                <div className="mt-2.5 h-8 w-16 animate-pulse rounded-lg bg-surface-sunken" />
              ) : (
                <div className="mt-2 flex flex-wrap items-baseline gap-2">
                  <span
                    className={cn(
                      'font-heading text-title-xl font-bold leading-none tabular-nums',
                      TONE[toneKey] || TONE.default
                    )}
                  >
                    {item.value}
                  </span>
                  <Delta delta={item.delta} label={item.deltaLabel} invert={item.invertTrend} />
                </div>
              )}
            </div>

            {/* Sub-label & Accent bar */}
            <div className="mt-3.5 space-y-2">
              {item.sub && (
                <span className="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">
                  {item.sub}
                </span>
              )}

              <div
                className={cn(
                  'h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity',
                  ACCENT_BAR[toneKey] || ACCENT_BAR.default
                )}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}