'use client';

import React, { useRef } from 'react';

import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
import { FloatingToolbar } from '../../components/FloatingToolbar';
import { CopyAction, FullscreenAction } from '../../components/FloatingToolbar/actions';
import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
import { useMermaidRenderer } from './hooks/useMermaidRenderer';

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 SVGs are short, the diagram itself
     * doesn't scroll internally, and a lock overlay just steals
     * wheel events from the page. Standalone callers can opt in if
     * they have a reason to.
     */
    scrollIsolation?: boolean;
}

const Mermaid: React.FC<MermaidProps> = ({
    chart,
    className = '',
    isCompact = false,
    fullscreen = true,
    scrollIsolation = false,
}) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const theme = useResolvedTheme();

    // Rendering logic
    const { mermaidRef, svgContent, isVertical, isRendering } = useMermaidRenderer({
        chart,
        theme,
        isCompact,
    });

    // Fullscreen modal logic (only used if fullscreen prop is true)
    const {
        isFullscreen,
        fullscreenRef,
        openFullscreen,
        closeFullscreen,
        handleBackdropClick,
    } = useMermaidFullscreen();


    return (
        <>
            <div ref={containerRef} className={`relative ${className}`}>
                <div
                    ref={mermaidRef}
                    className="flex justify-center items-center"
                    style={{ isolation: 'isolate' }}
                />
                {isRendering && (
                    <div className="absolute inset-0 flex items-center justify-center">
                        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
                    </div>
                )}

                {svgContent && !isRendering && (
                    <FloatingToolbar containerRef={containerRef} scrollIsolation={scrollIsolation}>
                        <CopyAction value={chart} title="Copy source" />
                        {fullscreen && (
                            <FullscreenAction onToggle={openFullscreen} title="Fullscreen" />
                        )}
                    </FloatingToolbar>
                )}
            </div>

            {fullscreen && (
                <MermaidFullscreenModal
                    isOpen={isFullscreen}
                    svgContent={svgContent}
                    isVertical={isVertical}
                    theme={theme}
                    chart={chart}
                    fullscreenRef={fullscreenRef}
                    onClose={closeFullscreen}
                    onBackdropClick={handleBackdropClick}
                />
            )}
        </>
    );
};

export default Mermaid;
