'use client';

import { useEffect, useRef, useState } from 'react';
import mermaid from 'mermaid';

interface MermaidRendererProps {
  chart: string;
  className?: string;
}

export function MermaidRenderer({
  chart,
  className = '',
}: MermaidRendererProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let isMounted = true;

    const renderChart = async () => {
      if (!chartRef.current || !chart) return;

      try {
        setIsLoading(true);
        setError(null);

        // Clear previous content
        chartRef.current.innerHTML = '';

        // Generate unique ID for this chart
        const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;

        // Always reinitialize to pick up theme changes
        // Get computed CSS variable values
        const getCSSVariable = (variable: string): string => {
          return (
            getComputedStyle(document.documentElement)
              .getPropertyValue(variable)
              .trim() || '#000000'
          );
        };

        mermaid.initialize({
          startOnLoad: false,
          theme: 'base',
          themeVariables: {
            // Use computed CSS variable values
            primaryColor: getCSSVariable('--primary'),
            primaryTextColor: getCSSVariable('--foreground'),
            primaryBorderColor: getCSSVariable('--border'),
            lineColor: getCSSVariable('--foreground'),
            sectionBkgColor: getCSSVariable('--card'),
            altSectionBkgColor: getCSSVariable('--card-hover'),
            gridColor: getCSSVariable('--border'),
            secondaryColor: getCSSVariable('--accent'),
            tertiaryColor: getCSSVariable('--muted'),
            background: getCSSVariable('--background'),
            mainBkg: getCSSVariable('--card'),
            secondBkg: getCSSVariable('--card-hover'),
            tertiaryBkg: getCSSVariable('--muted'),
            // Additional theme variables for better integration
            nodeBkg: getCSSVariable('--card'),
            nodeBorder: getCSSVariable('--border'),
            clusterBkg: getCSSVariable('--card-hover'),
            clusterBorder: getCSSVariable('--border'),
            defaultLinkColor: getCSSVariable('--primary'),
            titleColor: getCSSVariable('--foreground'),
            edgeLabelBackground: getCSSVariable('--card'),
            edgeLabelColor: getCSSVariable('--foreground'),
            // Sequence diagram specific
            actorBkg: getCSSVariable('--card'),
            actorBorder: getCSSVariable('--border'),
            actorTextColor: getCSSVariable('--foreground'),
            actorLineColor: getCSSVariable('--foreground'),
            signalColor: getCSSVariable('--primary'),
            signalTextColor: getCSSVariable('--foreground'),
            labelBoxBkgColor: getCSSVariable('--card'),
            labelBoxBorderColor: getCSSVariable('--border'),
            labelTextColor: getCSSVariable('--foreground'),
            loopTextColor: getCSSVariable('--foreground'),
            activationBkgColor: getCSSVariable('--primary'),
            activationBorderColor: getCSSVariable('--primary'),
            // Gantt specific
            section0: getCSSVariable('--primary'),
            section1: getCSSVariable('--accent'),
            section2: getCSSVariable('--success'),
            section3: getCSSVariable('--purple'),
            altSection: getCSSVariable('--muted'),
            todayLineColor: getCSSVariable('--destructive'),
            // Pie chart specific
            pie1: getCSSVariable('--primary'),
            pie2: getCSSVariable('--accent'),
            pie3: getCSSVariable('--success'),
            pie4: getCSSVariable('--purple'),
            pie5: getCSSVariable('--yellow'),
            pie6: getCSSVariable('--blue'),
            pie7: getCSSVariable('--green'),
            pieTitleTextSize: '16px',
            pieTitleTextColor: getCSSVariable('--foreground'),
            pieSectionTextSize: '14px',
            pieSectionTextColor: getCSSVariable('--foreground'),
            pieLegendTextSize: '12px',
            pieLegendTextColor: getCSSVariable('--muted-foreground'),
            pieStrokeColor: getCSSVariable('--border'),
            pieStrokeWidth: '2px',
            pieOuterStrokeWidth: '2px',
            pieOuterStrokeColor: getCSSVariable('--border'),
            pieOpacity: '0.8',
          },
          fontFamily: 'inherit',
          fontSize: 14,
          flowchart: {
            useMaxWidth: true,
            htmlLabels: true,
            curve: 'basis',
          },
          sequence: {
            useMaxWidth: true,
            diagramMarginX: 50,
            diagramMarginY: 10,
            actorMargin: 50,
            width: 150,
            height: 65,
            boxMargin: 10,
            boxTextMargin: 5,
            noteMargin: 10,
            messageMargin: 35,
            messageAlign: 'center',
            mirrorActors: true,
            bottomMarginAdj: 1,
            rightAngles: false,
            showSequenceNumbers: false,
          },
          gantt: {
            useMaxWidth: true,
            leftPadding: 75,
            gridLineStartPadding: 35,
            fontSize: 11,
            sectionFontSize: 24,
            numberSectionStyles: 4,
          },
          pie: {
            useMaxWidth: true,
          },
          journey: {
            useMaxWidth: true,
          },
          gitGraph: {
            useMaxWidth: true,
          },
          state: {
            useMaxWidth: true,
          },
          class: {
            useMaxWidth: true,
          },
          er: {
            useMaxWidth: true,
          },
          mindmap: {
            useMaxWidth: true,
          },
          timeline: {
            useMaxWidth: true,
          },
        });

        // Render the chart
        const { svg } = await mermaid.render(id, chart);

        if (isMounted && chartRef.current) {
          chartRef.current.innerHTML = svg;
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(
            err instanceof Error
              ? err.message
              : 'Erreur lors du rendu du diagramme'
          );
          setIsLoading(false);
        }
      }
    };

    renderChart();

    return () => {
      isMounted = false;
    };
  }, [chart]);

  if (error) {
    return (
      <div
        className={`p-4 border border-[var(--destructive)]/20 bg-[var(--destructive)]/5 rounded-lg ${className}`}
      >
        <div className="text-[var(--destructive)] text-sm font-medium mb-2">
          Erreur de rendu Mermaid
        </div>
        <div className="text-[var(--muted-foreground)] text-xs font-mono bg-[var(--card)] p-2 rounded border">
          {error}
        </div>
        <details className="mt-2">
          <summary className="text-xs text-[var(--muted-foreground)] cursor-pointer">
            Code source
          </summary>
          <pre className="text-xs text-[var(--muted-foreground)] mt-1 p-2 bg-[var(--card)] rounded border overflow-x-auto">
            {chart}
          </pre>
        </details>
      </div>
    );
  }

  return (
    <div className={`relative ${className}`}>
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-[var(--background)]/80 backdrop-blur-sm rounded-lg">
          <div className="text-[var(--muted-foreground)] text-sm">
            Rendu du diagramme...
          </div>
        </div>
      )}
      <div
        ref={chartRef}
        className="mermaid-chart rounded-lg border border-[var(--border)]/60 bg-[var(--card)]/30 p-4 backdrop-blur-sm"
        style={{
          minHeight: isLoading ? '100px' : 'auto',
        }}
      />
    </div>
  );
}
