import React from 'react';

export interface Message {
  role: 'user' | 'model';
  text: string;
  fullText?: string;
}

const parseInlineStyles = (text: string): React.ReactNode[] => {
  // Regex to split by bold (**text**)
  const parts = text.split(/(\*\*.*?\*\*)/g);
  return parts.map((part, i) => {
      if (part.startsWith('**') && part.endsWith('**')) {
          const content = part.slice(2, -2);
          // Highlight key values or important labels with brighter white/cyan
          return <span key={i} className="text-foreground font-bold mx-0.5">{content}</span>;
      }
      return part;
  });
};

export const renderFormattedMessage = (text: string) => {
  // Hide json blocks from UI (json:nodes, json:workflow, json:actions, json:edges)
  const displayText = text
    .replace(/```json:(?:nodes|workflow|actions|edges)[\s\S]*?```/g, '')
    .trim();
  const lines = displayText.split('\n');
  const elements: React.ReactNode[] = [];
  
  lines.forEach((line, index) => {
    const key = `line-${index}`;
    const trimmed = line.trim();
    
    // Empty lines
    if (!trimmed) {
       elements.push(<div key={key} className="h-2" />);
       return;
    }

    // H1 (# Title)
    if (line.startsWith('# ')) {
        elements.push(
            <h1 key={key} className="text-base font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 mt-5 mb-3 border-b border-white/10 pb-2">
                {line.replace(/^#\s/, '')}
            </h1>
        );
        return;
    }
    
    // H2 (## Title)
    if (line.startsWith('## ')) {
         elements.push(
            <h2 key={key} className="text-sm font-bold text-foreground mt-4 mb-2 flex items-center gap-2">
                <span className="w-1 h-4 bg-cyan-500 rounded-full inline-block" />
                {line.replace(/^##\s/, '')}
            </h2>
        );
        return;
    }

    // H3/H4 (### Title)
    if (line.startsWith('### ') || line.startsWith('#### ')) {
        const content = line.replace(/^#+\s/, '');
         elements.push(
            <h3 key={key} className="text-xs font-bold text-cyan-300 mt-3 mb-1 uppercase tracking-wider">
                {content}
            </h3>
        );
        return;
    }

    // List Items (* Item or - Item)
    if (trimmed.startsWith('* ') || trimmed.startsWith('- ')) {
        const content = trimmed.replace(/^[\*\-]\s/, '');
        elements.push(
            <div key={key} className="flex gap-2 ml-1 mb-1.5 items-start group/list">
                <span className="w-1.5 h-1.5 rounded-full bg-primary/20 mt-[7px] shrink-0 group-hover/list:bg-primary transition-colors" />
                <div className="text-[13px] leading-relaxed text-muted-foreground flex-1">
                    {parseInlineStyles(content)}
                </div>
            </div>
        );
        return;
    }

    // Numbered Lists (1. Item)
    if (/^\d+\.\s/.test(trimmed)) {
        const [num, ...rest] = trimmed.split(/\.\s/);
        const content = rest.join('. ');
        elements.push(
            <div key={key} className="flex gap-2 ml-1 mb-1.5 items-start">
                <span className="text-xs font-mono text-primary/80 mt-[2px] shrink-0">{num}.</span>
                <div className="text-[13px] leading-relaxed text-muted-foreground flex-1">
                    {parseInlineStyles(content)}
                </div>
            </div>
        );
        return;
    }

    // Blockquotes (> Quote)
    if (trimmed.startsWith('> ')) {
        const content = trimmed.replace(/^>\s/, '');
        elements.push(
            <div key={key} className="pl-3 border-l-2 border-primary/30 italic text-muted-foreground my-2 text-xs">
                {parseInlineStyles(content)}
            </div>
        );
        return;
    }

    // Normal Paragraphs
    elements.push(
        <div key={key} className="text-[13px] leading-relaxed text-muted-foreground mb-1">
            {parseInlineStyles(line)}
        </div>
    );
  });
  
  return <div className="space-y-0.5 select-text cursor-text">{elements}</div>;
};
