<!-- #region DashboardMaintenanceBadge [C:2] [TYPE Component] [SEMANTICS maintenance, badge, dashboard, indicator] -->
<!-- @BRIEF Orange badge in Dashboard Hub row when maintenance is active. Native title tooltip. Renders nothing when inactive. -->
<!-- @LAYER Component -->
<!-- @RELATION DEPENDS_ON -> [MaintenanceStore] -->
<!-- @UX_STATE no_maintenance -> Badge not rendered (null). -->
<!-- @UX_STATE maintenance_active -> Orange badge with tooltip showing start/end times. -->
<!-- @UX_STATE loading -> Grey skeleton badge. -->
<!-- @UX_REACTIVITY Props -> $props(dashboardId), $derived from maintenanceStore.dashboardBanners -->
<script lang="ts">
  import { maintenanceStore } from "$lib/stores/maintenance.svelte.js";
  import { t } from "$lib/i18n/index.svelte.js";

  /**
   * The dashboard ID to check for active maintenance.
   */
  let { dashboardId = null } = $props();

  /**
   * Find banner state for this dashboard from store.
   */
  let bannerState = $derived.by(() => {
    if (!dashboardId) return null;
    const banners = maintenanceStore.dashboardBanners;
    if (!Array.isArray(banners)) return null;
    return banners.find((b) => String(b.dashboard_id) === String(dashboardId)) || null;
  });

  let isActive = $derived(Boolean(bannerState?.active));
  let tooltipText = $derived.by(() => {
    if (!bannerState) return "";
    const start = bannerState.start_time ? new Date(bannerState.start_time).toLocaleString() : "?";
    const end = bannerState.end_time ? new Date(bannerState.end_time).toLocaleString() : "TBD";
    return ($t.maintenance?.maintenance_tooltip || "Maintenance active: {start} — {end}")
      .replace("{start}", start)
      .replace("{end}", end);
  });
</script>

{#if isActive}
  <span
    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-orange-100 text-orange-700"
    title={tooltipText}
  >
    {$t.maintenance?.maintenance_badge || "Maintenance"}
  </span>
{/if}
<!-- #endregion DashboardMaintenanceBadge -->
