import React from 'react';
import { MathJax } from 'better-react-mathjax';

export const isMathQuery = (q) => {
  return /[\d+\-*/^=()[\]{}]/.test(q) || q.toLowerCase().includes('solve') || q.toLowerCase().includes('plot');
};

export const getSuggestedQueries = (topic) => {
  const suggestions = {
    'Quadratic Equation': ['solve x^2 + 5x + 6 = 0', 'plot y = x^2 - 4x + 4'],
    'Fourier Transform': ['Fourier transform of rect(t)', 'FourierTransform[exp(-a t^2), t, w]'],
    'Linear Algebra': ['eigenvalues {{1,2},{3,4}}', 'det {{a,b},{c,d}}'],
    'Calculus': ['derivative of sin(x) * exp(x)', 'integrate log(x) from 1 to e'],
    'Stochastic Calculus': ['Brownian motion path', 'Ito integral example'],
  };
  return suggestions[topic] || [`properties of ${topic}`, `plot ${topic} function`];
};

export const formatAIText = (text) => {
  if (!text) return null;

  const SECTIONS = [
    {
      key: 'SIMPLE EXPLANATION:',
      label: 'Simple Explanation',
      icon: '💡',
      accent: 'from-blue-500 to-indigo-500',
      bg: 'bg-blue-50 dark:bg-blue-950/30',
      border: 'border-blue-200 dark:border-blue-800/50',
      tag: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
    },
    {
      key: 'INTUITION:',
      label: 'Intuition',
      icon: '🧠',
      accent: 'from-violet-500 to-purple-500',
      bg: 'bg-violet-50 dark:bg-violet-950/30',
      border: 'border-violet-200 dark:border-violet-800/50',
      tag: 'bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300',
    },
    {
      key: 'EXAMPLE:',
      label: 'Example',
      icon: '⚡',
      accent: 'from-amber-500 to-orange-500',
      bg: 'bg-amber-50 dark:bg-amber-950/30',
      border: 'border-amber-200 dark:border-amber-800/50',
      tag: 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300',
      isCode: true,
    },
    {
      key: 'USED IN:',
      label: 'Used In',
      icon: '🔗',
      accent: 'from-emerald-500 to-teal-500',
      bg: 'bg-emerald-50 dark:bg-emerald-950/30',
      border: 'border-emerald-200 dark:border-emerald-800/50',
      tag: 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300',
    },
  ];

  const blocks = text.split('\n\n');

  return (
    <MathJax>
      <div className="space-y-4">
        {blocks.map((block, i) => {
          const section = SECTIONS.find(s => block.startsWith(s.key));

          if (section) {
            const lines = block.split('\n');
            const bodyLines = lines.slice(1).join('\n').trim();

            return (
              <div key={i} className={`rounded-xl border overflow-hidden ${section.border}`}>
                {/* Section header */}
                <div className={`flex items-center gap-2.5 px-4 py-2.5 bg-gradient-to-r ${section.accent}`}>
                  <span className="text-base">{section.icon}</span>
                  <span className="text-xs font-bold text-white uppercase tracking-widest">{section.label}</span>
                </div>

                {/* Section body */}
                <div className={`px-4 py-4 ${section.bg}`}>
                  {section.isCode || bodyLines.includes('=') || bodyLines.includes('f(') ? (
                    <div className="bg-slate-900 dark:bg-black rounded-lg p-4 font-mono text-sm text-emerald-300 overflow-x-auto shadow-inner border border-slate-700">
                      <pre className="whitespace-pre-wrap leading-relaxed">{bodyLines}</pre>
                    </div>
                  ) : (
                    <p className="text-sm leading-relaxed text-slate-700 dark:text-slate-300">
                      {bodyLines}
                    </p>
                  )}
                </div>
              </div>
            );
          }

          // Fallback for unrecognised paragraphs
          if (block.trim()) {
            return (
              <p key={i} className="text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                {block}
              </p>
            );
          }
          return null;
        })}
      </div>
    </MathJax>
  );
};