Linear Progress Gauge

'use client';

import type { CSSProperties } from 'react';
import './LinearProgressGauge.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * LinearProgressGauge — Multi-segmented horizontal memory or budget progress bar with breakdown legend.
 * 
 * @param {string} title - Gauge header label. Default is 'Resource Allocation'.
 * @param {Array<{label: string, value: number, color: string}>} segments - Proportion breakdown chunks.
 * @param {string} total - Formatted total capacity string (e.g. '16 GB', '100%'). Default is '100%'.
 */
export interface LinearProgressGaugeProps {
  title?: string;
  segments?: Array<{ label: string; value: number; color: string }>;
  total?: string;
}

export function LinearProgressGauge({
  title = 'System Resource Allocation',
  segments = [
    { label: 'SSR Execution', value: 45, color: '#d4a017' },
    { label: 'Asset Caching', value: 25, color: '#38bdf8' },
    { label: 'Edge Worker', value: 15, color: '#a855f7' },
    { label: 'Free Headroom', value: 15, color: 'rgb(var(--ink-rgb, 255 255 255) / 0.1)' },
  ],
  total = '100%',
}: LinearProgressGaugeProps) {
  const totalSum = segments.reduce((acc, s) => acc + s.value, 0) || 100;
  return (
    <>
      <div className="linear-gauge" data-rk-4f95ee="">
        <div className="linear-gauge__header" data-rk-4f95ee="">
          <span className="linear-gauge__title" data-rk-4f95ee="">{title}</span>
          <span className="linear-gauge__total" data-rk-4f95ee="">{total}</span>
        </div>
      
        <div className="linear-gauge__bar" role="progressbar" aria-valuemax={100} aria-valuemin={0} data-rk-4f95ee="">
          {segments.map((seg) => {
            const pct = (seg.value / totalSum) * 100;
            return (
              <div className="linear-gauge__chunk" style={st(`width: ${pct}%; background-color: ${seg.color};`)} title={`${seg.label}: ${seg.value}%`} data-rk-4f95ee="" />
            );
          })}
        </div>
      
        <div className="linear-gauge__legend" data-rk-4f95ee="">
          {segments.map((seg, __i: number) => (
            <div key={__i} className="legend-item" data-rk-4f95ee="">
              <span className="legend-item__dot" style={st(`background-color: ${seg.color};`)} data-rk-4f95ee=""></span>
              <span className="legend-item__name" data-rk-4f95ee="">{seg.label}</span>
              <span className="legend-item__val" data-rk-4f95ee="">{seg.value}%</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

export default LinearProgressGauge;

/* LinearProgressGauge — ported from astro-component-kit (charts/LinearProgressGauge.astro) */

.linear-gauge:where([data-rk-4f95ee]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: var(--sp-6, 1.5rem);
  background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
  border-radius: var(--r-xl, 20px);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.linear-gauge__header:where([data-rk-4f95ee]) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.linear-gauge__title:where([data-rk-4f95ee]) {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-text-1, #ffffff);
}

.linear-gauge__total:where([data-rk-4f95ee]) {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--c-primary-light, #d4a017);
}

.linear-gauge__bar:where([data-rk-4f95ee]) {
  display: flex;
  height: 10px;
  border-radius: var(--r-full, 9999px);
  overflow: hidden;
  background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.linear-gauge__chunk:where([data-rk-4f95ee]) {
  height: 100%;
  transition: width 0.4s ease;
}

.linear-gauge__legend:where([data-rk-4f95ee]) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  margin-top: 4px;
}

.legend-item:where([data-rk-4f95ee]) {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.legend-item__dot:where([data-rk-4f95ee]) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-item__name:where([data-rk-4f95ee]) {
  color: var(--c-text-2, #a3a3a3);
  flex: 1;
}

.legend-item__val:where([data-rk-4f95ee]) {
  font-weight: 700;
  color: var(--c-text-1, #ffffff);
}