/**
 * Mermaid Component - Dynamic Import Wrapper
 *
 * Lazy loads the heavy Mermaid library (~800KB) only when needed.
 * This significantly reduces the initial bundle size.
 */

'use client';

import React, { lazy, Suspense } from 'react';

// Lazy load the client component
const MermaidClient = lazy(() => import('./Mermaid.client'));

// Loading fallback component
const LoadingFallback = () => (
  <div className="flex justify-center items-center min-h-[100px]">
    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
  </div>
);

export interface MermaidProps {
  chart: string;
  className?: string;
  isCompact?: boolean;
  /** Enable click-to-fullscreen functionality (default: true) */
  fullscreen?: boolean;
  /**
   * Enable the FloatingToolbar's "click to scroll" lock overlay.
   * Defaults to `false` — Mermaid diagrams don't scroll internally,
   * so the lock overlay just steals page wheel events. See the
   * Mermaid.client implementation for the full rationale.
   */
  scrollIsolation?: boolean;
  /**
   * Debounce window (ms) before (re)rendering after `chart` changes.
   * Lower feels snappier for static charts; higher reduces churn while
   * a diagram is streamed in. Default 300.
   */
  debounceMs?: number;
}

const Mermaid: React.FC<MermaidProps> = (props) => {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <MermaidClient {...props} />
    </Suspense>
  );
};

export default Mermaid;

// Re-export builders for declarative diagram construction
export {
  // Core
  DiagramStore,
  sanitizeLabel,
  toNodeId,
  // Theme hooks
  useThemePalette,
  useStylePresets,
  useBoxColors,
  // FlowDiagram
  FlowDiagram,
  STYLE_PRESETS,
  // SequenceDiagram
  SequenceDiagram,
  // JourneyDiagram
  JourneyDiagram,
} from './builders';

export type {
  // Core types
  DiagramStoreOptions,
  FlowDirection,
  NodeShape,
  ParticipantType,
  TaskScore,
  // Theme types
  ThemePalette,
  StyleColors,
  StylePresets,
  BoxColors,
  // FlowDiagram types
  FlowDiagramOptions,
  FlowDiagramBuilder,
  NodeBuilder,
  EdgeBuilder,
  StyleBuilder,
  // SequenceDiagram types
  ParticipantsObject,
  SequenceDiagramOptions,
  SequenceDiagramBuilder,
  // JourneyDiagram types
  JourneyDiagramOptions,
  JourneyDiagramBuilder,
  SectionBuilder,
} from './builders';