import React from 'react';
import { Copy, Check } from 'lucide-react';

interface Props {
  equation: string;
  label?: string;
  inline?: boolean;
}

const EquationBlock: React.FC<Props> = ({ equation, label, inline = false }) => {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(equation);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  // Simple LaTeX-like rendering (for demonstration)
  // In production, integrate KaTeX for proper math rendering
  const formatEquation = (eq: string): string => {
    return eq
      .replace(/\^(\{[^}]+\}|\d)/g, '<sup>$1</sup>')
      .replace(/\_(\{[^}]+\}|\d)/g, '<sub>$1</sub>')
      .replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '<span class="frac"><span>$1</span><span>$2</span></span>')
      .replace(/\\sqrt\{([^}]+)\}/g, '√($1)')
      .replace(/\\sum/g, 'Σ')
      .replace(/\\prod/g, 'Π')
      .replace(/\\int/g, '∫')
      .replace(/\\infty/g, '∞')
      .replace(/\\alpha/g, 'α')
      .replace(/\\beta/g, 'β')
      .replace(/\\gamma/g, 'γ')
      .replace(/\\delta/g, 'δ')
      .replace(/\\theta/g, 'θ')
      .replace(/\\lambda/g, 'λ')
      .replace(/\\mu/g, 'μ')
      .replace(/\\sigma/g, 'σ')
      .replace(/\\pi/g, 'π')
      .replace(/\\omega/g, 'ω')
      .replace(/\\partial/g, '∂')
      .replace(/\\nabla/g, '∇')
      .replace(/\\cdot/g, '·')
      .replace(/\\times/g, '×')
      .replace(/\\leq/g, '≤')
      .replace(/\\geq/g, '≥')
      .replace(/\\neq/g, '≠')
      .replace(/\\approx/g, '≈')
      .replace(/\\rightarrow/g, '→')
      .replace(/\\leftarrow/g, '←')
      .replace(/\\Rightarrow/g, '⇒')
      .replace(/\\in/g, '∈')
      .replace(/\\forall/g, '∀')
      .replace(/\\exists/g, '∃');
  };

  if (inline) {
    return (
      <span 
        className="inline-flex items-center px-2 py-0.5 mx-1 font-mono text-sm bg-gray-100 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
        dangerouslySetInnerHTML={{ __html: formatEquation(equation) }}
      />
    );
  }

  return (
    <div className="relative group my-6">
      <div className="flex items-stretch rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
        {/* Equation Number/Label */}
        {label && (
          <div className="flex items-center px-4 bg-gray-100 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
            <span className="text-xs font-mono text-gray-500 dark:text-gray-400">
              ({label})
            </span>
          </div>
        )}
        
        {/* Equation Content */}
        <div className="flex-1 flex items-center justify-center py-6 px-8">
          <div 
            className="font-mono text-lg md:text-xl text-gray-800 dark:text-gray-200 tracking-wide"
            dangerouslySetInnerHTML={{ __html: formatEquation(equation) }}
          />
        </div>
        
        {/* Copy Button */}
        <button
          onClick={handleCopy}
          className="absolute top-2 right-2 p-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
          title="Copy equation"
        >
          {copied ? (
            <Check size={14} className="text-green-500" />
          ) : (
            <Copy size={14} className="text-gray-400" />
          )}
        </button>
      </div>
      
      {/* Decorative elements */}
      <div className="absolute -left-2 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-brand-400 to-purple-400 rounded-full opacity-60" />
    </div>
  );
};

export default EquationBlock;


