Alert

---
import InfoIcon from "lucide-static/icons/info.svg";
import CircleCheckIcon from "lucide-static/icons/circle-check.svg";
import AlertTriangleIcon from "lucide-static/icons/triangle-alert.svg";
import OctagonAlertIcon from "lucide-static/icons/octagon-alert.svg";
import XIcon from "lucide-static/icons/x.svg";
import { type AlertVariant, variantStyles as sharedVariantStyles } from "./alert-config";

export type { AlertVariant };

export interface Props {
  /**
   * Alert message content.
   * Changes to this prop trigger screen reader announcements.
   */
  message?: string;
  /**
   * Alert variant for visual styling.
   * Does NOT affect ARIA - all variants use role="alert"
   */
  variant?: AlertVariant;
  /**
   * Custom ID for the alert container.
   * Useful for SSR/hydration consistency.
   */
  id?: string;
  /**
   * Whether to show dismiss button.
   * Note: Manual dismiss only - NO auto-dismiss per WCAG 2.2.3
   */
  dismissible?: boolean;
  /**
   * Additional class name for the alert container
   */
  class?: string;
}

const {
  message = "",
  variant = "info",
  id,
  dismissible = false,
  class: className = "",
} = Astro.props;

const alertId = id ?? `alert-${crypto.randomUUID().slice(0, 8)}`;

const variantIcons = {
  info: InfoIcon,
  success: CircleCheckIcon,
  warning: AlertTriangleIcon,
  error: OctagonAlertIcon,
};

const IconComponent = variantIcons[variant];
const hasContent = Boolean(message);
---

<apg-alert
  class:list={[
    "apg-alert",
    hasContent && [
      "relative flex items-start gap-3 px-4 py-3 rounded-lg border",
      "transition-colors duration-150",
      sharedVariantStyles[variant],
    ],
    !hasContent && "contents",
    className,
  ]}
  data-alert-id={alertId}
  data-dismissible={dismissible ? "true" : undefined}
  data-variant={variant}
>
  {/* Live region - contains only content for screen reader announcement */}
  <div id={alertId} role="alert" class:list={[
    hasContent && "flex-1 flex items-start gap-3",
    !hasContent && "contents"
  ]}>
    {
      hasContent && (
        <>
          <span class="apg-alert-icon flex-shrink-0 mt-0.5" aria-hidden="true">
            <IconComponent class="size-5" />
          </span>
          <span class="apg-alert-content flex-1">{message}</span>
        </>
      )
    }
  </div>
  {/* Dismiss button - outside live region to avoid SR announcing it as part of alert */}
  {
    hasContent && dismissible && (
      <button
        type="button"
        class:list={[
          "apg-alert-dismiss",
          "flex-shrink-0 min-w-11 min-h-11 p-2 -m-2 rounded",
          "flex items-center justify-center",
          "hover:bg-black/10 dark:hover:bg-white/10",
          "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current",
        ]}
        aria-label="Dismiss alert"
      >
        <XIcon class="size-5" aria-hidden="true" />
      </button>
    )
  }
</apg-alert>

<script>
  import {
    variantStyles,
    variantIconSvgs,
    dismissIconSvg,
  } from "./alert-config";

  class ApgAlert extends HTMLElement {
    private alertId: string = "";

    connectedCallback() {
      this.alertId = this.dataset.alertId ?? "";
      const dismissBtn = this.querySelector(".apg-alert-dismiss");

      if (dismissBtn) {
        dismissBtn.addEventListener("click", this.handleDismiss);
      }
    }

    disconnectedCallback() {
      const dismissBtn = this.querySelector(".apg-alert-dismiss");
      if (dismissBtn) {
        dismissBtn.removeEventListener("click", this.handleDismiss);
      }
    }

    private handleDismiss = () => {
      // Clear content but keep the alert container (live region)
      const alertEl = this.querySelector(`#${this.alertId}`);
      if (alertEl) {
        alertEl.replaceChildren();
        // Update live region classes
        alertEl.classList.remove("flex-1", "flex", "items-start", "gap-3");
        alertEl.classList.add("contents");
      }
      // Update custom element display
      this.className = "apg-alert contents";
      // Remove dismiss button
      const existingDismissBtn = this.querySelector(".apg-alert-dismiss");
      if (existingDismissBtn) {
        existingDismissBtn.remove();
      }

      // Dispatch custom event
      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }));
    };

    /**
     * Method to update alert message programmatically.
     * The live region container remains in DOM - only content changes.
     */
    setMessage(message: string, variant?: string) {
      const alertEl = this.querySelector(`#${this.alertId}`);
      if (!alertEl) return;

      const currentVariant = (variant ?? this.dataset.variant ?? "info") as keyof typeof variantStyles;

      if (message) {
        // Update live region classes
        alertEl.classList.remove("contents");
        alertEl.classList.add("flex-1", "flex", "items-start", "gap-3");
        // Update custom element styles
        this.classList.remove("contents");
        this.className = `apg-alert relative flex items-start gap-3 px-4 py-3 rounded-lg border transition-colors duration-150 ${variantStyles[currentVariant]}`;

        // Build DOM nodes safely (avoid innerHTML for user content)
        const iconSpan = document.createElement("span");
        iconSpan.className = "apg-alert-icon flex-shrink-0 mt-0.5";
        iconSpan.setAttribute("aria-hidden", "true");
        iconSpan.innerHTML = variantIconSvgs[currentVariant]; // Safe: hardcoded SVG

        const contentSpan = document.createElement("span");
        contentSpan.className = "apg-alert-content flex-1";
        contentSpan.textContent = message; // Safe: uses textContent

        // Update live region content (icon + message only)
        alertEl.replaceChildren(iconSpan, contentSpan);

        // Remove existing dismiss button if any
        const existingDismissBtn = this.querySelector(".apg-alert-dismiss");
        if (existingDismissBtn) {
          existingDismissBtn.remove();
        }

        // Add dismiss button outside live region
        if (this.dataset.dismissible === "true") {
          const dismissBtn = document.createElement("button");
          dismissBtn.type = "button";
          dismissBtn.className = "apg-alert-dismiss flex-shrink-0 min-w-11 min-h-11 p-2 -m-2 rounded flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current";
          dismissBtn.setAttribute("aria-label", "Dismiss alert");
          dismissBtn.innerHTML = dismissIconSvg; // Safe: hardcoded SVG
          dismissBtn.addEventListener("click", this.handleDismiss);
          this.appendChild(dismissBtn);
        }
      } else {
        alertEl.replaceChildren();
        // Update live region classes
        alertEl.classList.remove("flex-1", "flex", "items-start", "gap-3");
        alertEl.classList.add("contents");
        // Update custom element display
        this.className = "apg-alert contents";
        // Remove dismiss button
        const existingDismissBtn = this.querySelector(".apg-alert-dismiss");
        if (existingDismissBtn) {
          existingDismissBtn.remove();
        }
      }
    }
  }

  customElements.define("apg-alert", ApgAlert);
</script>

---
import Alert from './Alert.astro';
---

<!-- IMPORTANT: Alert container is always in DOM -->
<Alert
  id="my-alert"
  variant="info"
  dismissible
/>

<button onclick="document.querySelector('apg-alert').setMessage('Hello!')">
  Show Alert
</button>

<script>
  // Listen for dismiss events
  document.querySelector('apg-alert')?.addEventListener('dismiss', () => {
    console.log('Alert dismissed');
  });
</script>