<script lang="ts">
  // v0.2 Phase 5 primitive — native <progress> styled with Lumotia
  // tokens. The plan called for falling back to role="progressbar"
  // only if native styling proved inconsistent; Chromium on Linux/
  // macOS/Windows now renders ::-webkit-progress-* uniformly, so
  // native <progress> stands.
  interface Props {
    value: number;
    max?: number;
    label?: string;          // visible label (above bar)
    ariaLabel?: string;      // sr-only label when no visible label
    showValue?: boolean;     // render "X / max" beside label
    tone?: "default" | "success" | "caution" | "danger";
  }

  let {
    value,
    max = 100,
    label,
    ariaLabel,
    showValue = false,
    tone = "default",
  }: Props = $props();

  const fillToken = $derived(
    tone === "success" ? "var(--color-success)"
    : tone === "caution" ? "var(--color-caution)"
    : tone === "danger" ? "var(--color-danger)"
    : "var(--color-accent)"
  );
  const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0);
</script>

{#if label}
  <div class="flex items-baseline justify-between mb-1.5">
    <span class="text-[12px] text-text-secondary">{label}</span>
    {#if showValue}
      <span class="text-[12px] text-text-tertiary tabular-nums">{value} / {max}</span>
    {/if}
  </div>
{/if}
<progress
  {value}
  {max}
  aria-label={ariaLabel ?? label}
  class="lumotia-progress block w-full h-2 rounded-full overflow-hidden"
  style="--lumotia-progress-fill: {fillToken}; --lumotia-progress-pct: {pct}%"
>{value} / {max}</progress>

<style>
  .lumotia-progress {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
  }
  /* Chromium / Edge */
  .lumotia-progress::-webkit-progress-bar {
    background-color: var(--color-bg-elevated);
  }
  .lumotia-progress::-webkit-progress-value {
    background-color: var(--lumotia-progress-fill);
    transition: width var(--duration-ui) ease-out;
  }
  /* Firefox */
  .lumotia-progress::-moz-progress-bar {
    background-color: var(--lumotia-progress-fill);
  }
</style>
