---
// MermaidDiagram.astro
// Component for rendering Mermaid diagrams with proper styling and error handling

export interface Props {
  id: string;
  source: string;
  class?: string;
}

const { id, source, class: className = '' } = Astro.props;
---

<div class={`mermaid-diagram ${className}`} data-mermaid-id={id} data-mermaid-source={source}>
  <div class="mermaid-diagram-content">
    <pre class="mermaid-diagram-source"><code>{source}</code></pre>
  </div>
</div>

<style>
  .mermaid-diagram {
    @apply my-6 mx-auto max-w-full overflow-hidden;
  }

  .mermaid-diagram-content {
    @apply relative;
  }

  .mermaid-diagram-source {
    @apply hidden;
  }

  /* Mermaid diagram styling */
  .mermaid-diagram :global(.mermaid) {
    @apply text-center;
  }

  /* Error state styling */
  .mermaid-diagram.error {
    @apply border border-red-200 dark:border-red-800 rounded-lg p-4 bg-red-50 dark:bg-red-900/20;
  }

  .mermaid-diagram.error .mermaid-diagram-content {
    @apply text-red-700 dark:text-red-300;
  }

  /* Loading state styling */
  .mermaid-diagram.loading {
    @apply border border-primary-200 dark:border-primary-600 rounded-lg p-4 bg-primary-50 dark:bg-primary-800/20;
  }

  .mermaid-diagram.loading .mermaid-diagram-content {
    @apply text-primary-600 dark:text-primary-400;
  }

  /* Loading skeleton styling */
  .mermaid-loading-skeleton {
    @apply relative overflow-hidden;
  }

  .mermaid-loading-skeleton::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-primary-200/50 dark:via-primary-700/50 to-transparent;
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* Smooth transitions for rendered diagrams */
  .mermaid-diagram svg {
    @apply transition-opacity duration-300 ease-in-out;
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

/* NUCLEAR BOMB HIDING - Hide all Mermaid error bombs permanently */
.mermaid-diagram svg[aria-roledescription="error"],
.mermaid-diagram svg:has(.error-icon),
.mermaid-diagram svg:has(.error-text),
.mermaid-diagram svg[viewBox="0 0 2412 512"],
.mermaid-diagram svg[viewBox="0 0 417 625"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

  /* Performance optimizations */
  .mermaid-diagram {
    contain: layout style paint;
  }

  .mermaid-diagram svg {
    will-change: auto;
  }

  /* Responsive design */
  @media (max-width: 768px) {
    .mermaid-diagram {
      @apply mx-0;
    }
    
    .mermaid-diagram svg {
      @apply max-w-full h-auto;
    }
  }
</style>