component MetricCard {
  outputs {
    select(payload: { label: string; value: string; href: string; sourceEvent: Event })
    action(payload: { label: string; value: string; href: string; sourceEvent: Event })
  }

  props {

    label: string = "Metric"
    value: string = "0"
    description: string = ""
    icon: string = ""
    iconStyle: string = "soft"
    prefix: string = ""
    suffix: string = ""
    badge: string = ""
    trend: string = ""
    trendLabel: string = ""
    trendDirection: string = "neutral"
    progress: number = -1
    progressLabel: string = ""
    href: string = ""
    target: string = ""
    rel: string = ""
    external: boolean = false
    actionLabel: string = ""
    actionIcon: string = ""
    showArrow: boolean = true
    selectable: boolean = false
    disabled: boolean = false
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    hover: string = "lift"
    align: string = "left"
    class: string = ""
  }

  functions {
    client function selectCard(sourceEvent) {
      if (disabled || !selectable) {
        return
      }
      if (sourceEvent.target.closest(".wire-metric-card__action")) {
        return
      }
      output.select({
        label: label,
        value: value,
        href: href,
        sourceEvent: sourceEvent
      })
    }

    client function activateAction(sourceEvent) {
      if (disabled) {
        sourceEvent.preventDefault()
        return
      }
      output.action({
        label: label,
        value: value,
        href: href,
        sourceEvent: sourceEvent
      })
    }
  }

  view {
    <article
      {...attrs}
      data-ui-component="MetricCard"
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-hover='{hover}'
      data-align='{align}'
      data-icon-style='{iconStyle}'
      data-disabled='{disabled ? "true" : "false"}'
      data-selectable='{selectable ? "true" : "false"}'
      class='wire-metric-card {class}'
      role='{selectable ? "button" : ""}'
      tabindex='{selectable && !disabled ? "0" : "-1"}'
      @click='selectCard(event)'
      @keydown='if (selectable && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); selectCard(event) }'
      style='--wire-metric-progress: {progress}%;'
    >
      <div class="wire-metric-card__top">
        <div class="wire-metric-card__heading">
          {#if label}
            <p class="wire-metric-card__label">{label}</p>
          {/if}

          {#if badge}
            <span class="wire-metric-card__badge">{badge}</span>
          {/if}
        </div>

        {#if icon}
          <div class="wire-metric-card__icon" aria-hidden="true">
            <span class='{icon}'></span>
          </div>
        {/if}
      </div>

      <div class="wire-metric-card__value-row">
        {#if prefix}
          <span class="wire-metric-card__prefix">{prefix}</span>
        {/if}

        <strong class="wire-metric-card__value">{value}</strong>

        {#if suffix}
          <span class="wire-metric-card__suffix">{suffix}</span>
        {/if}
      </div>

      {#if description}
        <p class="wire-metric-card__description">{description}</p>
      {/if}

      <slot></slot>

      {#if progress >= 0}
        <div class="wire-metric-card__progress-block">
          <div class="wire-metric-card__progress-meta">
            <span>{progressLabel || "Progress"}</span>
            <strong>{progress}%</strong>
          </div>
          <div
            class="wire-metric-card__progress-track"
            role="progressbar"
            aria-label='{progressLabel || label}'
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow='{progress}'
          >
            <span class="wire-metric-card__progress-value"></span>
          </div>
        </div>
      {/if}

      {#if trend || trendLabel}
        <div
          class="wire-metric-card__trend"
          data-direction='{trendDirection}'
        >
          {#if trendDirection === "up" || trendDirection === "positive"}
            <span class="icon-[lucide--trending-up] wire-metric-card__trend-icon" aria-hidden="true"></span>
          {:else if trendDirection === "down" || trendDirection === "negative"}
            <span class="icon-[lucide--trending-down] wire-metric-card__trend-icon" aria-hidden="true"></span>
          {:else}
            <span class="icon-[lucide--minus] wire-metric-card__trend-icon" aria-hidden="true"></span>
          {/if}

          {#if trend}
            <strong class="wire-metric-card__trend-value">{trend}</strong>
          {/if}

          {#if trendLabel}
            <span class="wire-metric-card__trend-label">{trendLabel}</span>
          {/if}
        </div>
      {/if}

      <div class="wire-metric-card__footer">
        <slot name="footer"></slot>

        {#if href}
          <a
            href='{href}'
            target='{target}'
            rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
            class="wire-metric-card__action"
            aria-disabled='{disabled ? "true" : "false"}'
            @click='activateAction(event)'
          >
            <span>{actionLabel || "View details"}</span>

            {#if actionIcon}
              <span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
            {:else if external}
              <span class="wire-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
            {:else if showArrow}
              <span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
            {/if}
          </a>
        {:else if actionLabel}
          <button
            type="button"
            class="wire-metric-card__action"
            disabled='{disabled}'
            @click='activateAction(event)'
          >
            <span>{actionLabel}</span>
            {#if actionIcon}
              <span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
            {:else if showArrow}
              <span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
            {/if}
          </button>
        {/if}
      </div>
    </article>
  }

  style {
    .wire-metric-card {
      --metric-accent: var(--wire-color-primary);
      --metric-accent-hover: var(--wire-color-primary-hover);
      --metric-accent-soft: var(--wire-color-primary-soft);
      --metric-accent-muted: var(--wire-color-primary-muted);
      --metric-contrast: var(--wire-color-primary-contrast);
      --metric-border: color-mix(in srgb, var(--metric-accent) 16%, var(--wire-color-border));

      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      height: 100%;
      padding: 1.5rem;
      color: var(--wire-color-text);
      background:
        radial-gradient(
          circle at 100% 0%,
          color-mix(in srgb, var(--metric-accent) 8%, transparent),
          transparent 36%
        ),
        var(--wire-color-surface-raised);
      border: 1px solid var(--metric-border);
      border-radius: 1.25rem;
      box-shadow:
        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
        0 14px 36px color-mix(in srgb, black 10%, transparent);
      overflow: hidden;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
    }

    .wire-metric-card[data-color="secondary"] {
      --metric-accent: var(--wire-color-secondary);
      --metric-accent-hover: var(--wire-color-secondary-hover);
      --metric-accent-soft: var(--wire-color-secondary-soft);
      --metric-accent-muted: var(--wire-color-secondary-muted);
      --metric-contrast: var(--wire-color-secondary-contrast);
    }

    .wire-metric-card[data-color="info"] {
      --metric-accent: var(--wire-color-info);
      --metric-accent-hover: var(--wire-color-info-hover);
      --metric-accent-soft: var(--wire-color-info-soft);
      --metric-accent-muted: var(--wire-color-info-muted);
      --metric-contrast: var(--wire-color-info-contrast);
    }

    .wire-metric-card[data-color="success"] {
      --metric-accent: var(--wire-color-success);
      --metric-accent-hover: var(--wire-color-success-hover);
      --metric-accent-soft: var(--wire-color-success-soft);
      --metric-accent-muted: var(--wire-color-success-muted);
      --metric-contrast: var(--wire-color-success-contrast);
    }

    .wire-metric-card[data-color="warning"] {
      --metric-accent: var(--wire-color-warning);
      --metric-accent-hover: var(--wire-color-warning-hover);
      --metric-accent-soft: var(--wire-color-warning-soft);
      --metric-accent-muted: var(--wire-color-warning-muted);
      --metric-contrast: var(--wire-color-warning-contrast);
    }

    .wire-metric-card[data-color="danger"] {
      --metric-accent: var(--wire-color-danger);
      --metric-accent-hover: var(--wire-color-danger-hover);
      --metric-accent-soft: var(--wire-color-danger-soft);
      --metric-accent-muted: var(--wire-color-danger-muted);
      --metric-contrast: var(--wire-color-danger-contrast);
    }

    .wire-metric-card[data-size="sm"] {
      padding: 1.1rem;
      border-radius: 1rem;
    }

    .wire-metric-card[data-size="lg"] {
      padding: 1.9rem;
      border-radius: 1.5rem;
    }

    .wire-metric-card[data-variant="soft"] {
      background:
        linear-gradient(135deg, var(--metric-accent-soft), transparent 68%),
        var(--wire-color-surface-raised);
      box-shadow: none;
    }

    .wire-metric-card[data-variant="raised"] {
      box-shadow:
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 64px color-mix(in srgb, black 16%, transparent);
    }

    .wire-metric-card[data-variant="outline"] {
      background: transparent;
      box-shadow: none;
    }

    .wire-metric-card[data-variant="minimal"] {
      padding-inline: 0;
      background: transparent;
      border-color: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .wire-metric-card[data-variant="solid"] {
      color: var(--metric-contrast);
      background:
        linear-gradient(135deg, color-mix(in srgb, white 10%, transparent), transparent 58%),
        var(--metric-accent);
      border-color: color-mix(in srgb, white 22%, transparent);
      box-shadow: 0 20px 52px color-mix(in srgb, var(--metric-accent) 28%, transparent);
    }

    .wire-metric-card[data-variant="gradient"] {
      background:
        linear-gradient(
          145deg,
          color-mix(in srgb, var(--metric-accent) 20%, var(--wire-color-surface-raised)),
          var(--wire-color-surface-raised) 58%
        );
    }

    .wire-metric-card[data-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.58;
      pointer-events: none;
    }

    .wire-metric-card[data-selectable="true"]:not([data-disabled="true"]) {
      cursor: pointer;
    }

    .wire-metric-card[data-hover="lift"]:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wire-color-border));
      box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
    }

    .wire-metric-card[data-hover="border"]:hover {
      border-color: var(--metric-accent);
    }

    .wire-metric-card[data-hover="glow"]:hover {
      border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wire-color-border));
      box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
    }

    .wire-metric-card[data-align="center"] {
      align-items: center;
      text-align: center;
    }

    .wire-metric-card[data-align="right"] {
      align-items: flex-end;
      text-align: right;
    }

    .wire-metric-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
    }

    .wire-metric-card__heading {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem;
      min-width: 0;
    }

    .wire-metric-card__label {
      margin: 0;
      color: var(--wire-color-text-muted);
      font-size: 0.84rem;
      font-weight: 600;
      line-height: 1.4;
    }

    .wire-metric-card__badge {
      display: inline-flex;
      align-items: center;
      min-height: 1.45rem;
      padding: 0.2rem 0.55rem;
      color: var(--metric-accent);
      background: var(--metric-accent-soft);
      border: 1px solid color-mix(in srgb, var(--metric-accent) 24%, transparent);
      border-radius: 999px;
      font-size: 0.69rem;
      font-weight: 700;
      line-height: 1;
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__label,
    .wire-metric-card[data-variant="solid"] .wire-metric-card__description,
    .wire-metric-card[data-variant="solid"] .wire-metric-card__trend-label,
    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-meta {
      color: color-mix(in srgb, currentColor 78%, transparent);
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__badge {
      color: currentColor;
      background: color-mix(in srgb, white 14%, transparent);
      border-color: color-mix(in srgb, white 22%, transparent);
    }

    .wire-metric-card__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 2.75rem;
      height: 2.75rem;
      color: var(--metric-accent);
      background: var(--metric-accent-soft);
      border: 1px solid color-mix(in srgb, var(--metric-accent) 18%, transparent);
      border-radius: 0.9rem;
      font-size: 1.25rem;
    }

    .wire-metric-card[data-icon-style="ghost"] .wire-metric-card__icon {
      background: transparent;
      border-color: transparent;
    }

    .wire-metric-card[data-icon-style="outline"] .wire-metric-card__icon {
      background: transparent;
      border-color: color-mix(in srgb, var(--metric-accent) 34%, var(--wire-color-border));
    }

    .wire-metric-card[data-icon-style="solid"] .wire-metric-card__icon,
    .wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
      color: var(--metric-contrast);
      background: var(--metric-accent);
      border-color: transparent;
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
      color: currentColor;
      background: color-mix(in srgb, white 14%, transparent);
      border-color: color-mix(in srgb, white 20%, transparent);
    }

    .wire-metric-card__value-row {
      display: flex;
      align-items: baseline;
      gap: 0.2rem;
      width: 100%;
      margin-top: 1.15rem;
    }

    .wire-metric-card[data-align="center"] .wire-metric-card__value-row {
      justify-content: center;
    }

    .wire-metric-card[data-align="right"] .wire-metric-card__value-row {
      justify-content: flex-end;
    }

    .wire-metric-card__value {
      color: var(--wire-color-text);
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: -0.045em;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .wire-metric-card[data-size="sm"] .wire-metric-card__value {
      font-size: clamp(1.65rem, 4vw, 2.15rem);
    }

    .wire-metric-card[data-size="lg"] .wire-metric-card__value {
      font-size: clamp(2.45rem, 6vw, 3.5rem);
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__value {
      color: currentColor;
    }

    .wire-metric-card__prefix,
    .wire-metric-card__suffix {
      color: var(--metric-accent);
      font-size: 1rem;
      font-weight: 700;
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__prefix,
    .wire-metric-card[data-variant="solid"] .wire-metric-card__suffix {
      color: currentColor;
    }

    .wire-metric-card__description {
      max-width: 38rem;
      margin: 0.8rem 0 0;
      color: var(--wire-color-text-muted);
      font-size: 0.86rem;
      line-height: 1.7;
    }

    .wire-metric-card__progress-block {
      width: 100%;
      margin-top: 1.25rem;
    }

    .wire-metric-card__progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.45rem;
      color: var(--wire-color-text-muted);
      font-size: 0.75rem;
    }

    .wire-metric-card__progress-track {
      width: 100%;
      height: 0.42rem;
      overflow: hidden;
      background: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
      border-radius: 999px;
    }

    .wire-metric-card__progress-value {
      display: block;
      width: clamp(0%, var(--wire-metric-progress), 100%);
      height: 100%;
      background: var(--metric-accent);
      border-radius: inherit;
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-track {
      background: color-mix(in srgb, white 20%, transparent);
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-value {
      background: currentColor;
    }

    .wire-metric-card__trend {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 0.42rem;
      margin-top: 1.15rem;
      color: var(--wire-color-text-muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .wire-metric-card[data-align="center"] .wire-metric-card__trend {
      align-self: center;
    }

    .wire-metric-card[data-align="right"] .wire-metric-card__trend {
      align-self: flex-end;
    }

    .wire-metric-card__trend[data-direction="up"],
    .wire-metric-card__trend[data-direction="positive"] {
      color: var(--wire-color-success);
    }

    .wire-metric-card__trend[data-direction="down"],
    .wire-metric-card__trend[data-direction="negative"] {
      color: var(--wire-color-danger);
    }

    .wire-metric-card__trend-icon {
      width: 0.95rem;
      height: 0.95rem;
    }

    .wire-metric-card__trend-label {
      color: var(--wire-color-text-muted);
      font-weight: 500;
    }

    .wire-metric-card__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      width: 100%;
      margin-top: auto;
      padding-top: 1.35rem;
    }

    .wire-metric-card__action {
      appearance: none;
      padding: 0;
      background: transparent;
      border: 0;
      font: inherit;
      cursor: pointer;
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      color: var(--metric-accent);
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.3;
      text-decoration: none;
      transition:
        color 160ms ease,
        gap 160ms ease;
    }

    .wire-metric-card__action:hover {
      gap: 0.62rem;
      color: var(--metric-accent-hover);
    }

    .wire-metric-card[data-variant="solid"] .wire-metric-card__action {
      color: currentColor;
    }

    .wire-metric-card__action-icon {
      width: 1rem;
      height: 1rem;
    }

    .wire-metric-card__action:focus-visible {
      outline: 2px solid var(--wire-color-focus);
      outline-offset: 4px;
      border-radius: 0.35rem;
    }

    @media (max-width: 639px) {
      .wire-metric-card {
        padding: 1.2rem;
      }

      .wire-metric-card__value {
        font-size: 2.05rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wire-metric-card,
      .wire-metric-card__action {
        transition: none;
      }

      .wire-metric-card[data-hover="lift"]:hover {
        transform: none;
      }
    }
  }
}