import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import type { ChatMessage } from './types';
import { ToolActivity } from './ToolActivity';
import { QuestionActivity } from './QuestionActivity';

const FRONTMATTER_RE = /^<frontmatter>([\s\S]*?)<\/frontmatter>\s*/;

const CollapsibleBlock = ({ label, content }: { label: string; content: string }) => (
  <div className="flex justify-center">
    <details className="max-w-[85%] rounded-2xl bg-duck-dark/5 border border-duck-dark/10 px-4 py-2 text-sm">
      <summary className="text-xs text-duck-dark/40 hover:text-duck-dark/60 cursor-pointer select-none">
        {label}
      </summary>
      <div className="mt-1.5 text-xs text-duck-dark/40 whitespace-pre-wrap border-l-2 border-duck-dark/10 pl-2 max-h-48 overflow-y-auto">
        {content}
      </div>
    </details>
  </div>
);

type MessageBubbleProps = {
  message: ChatMessage;
  onAnswer?: (text: string) => void;
};

export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
  switch (message.role) {
    case 'user': {
      const match = message.text.match(FRONTMATTER_RE);
      const metadata = match ? match[1]!.trim() : null;
      const text = match ? message.text.slice(match[0]!.length) : message.text;
      return (
        <>
          {metadata && <CollapsibleBlock label="Frontmatter" content={metadata} />}
          <div className="flex justify-end">
            <div className="max-w-[80%] rounded-2xl rounded-tr-sm bg-duck-yellow/10 border border-duck-yellow/20 px-4 py-2.5 text-sm text-duck-dark">
              {message.images?.map((img, i) => (
                <img key={i} src={img.dataUrl} alt={img.filename} className="max-w-full max-h-64 rounded-lg mb-2" />
              ))}
              <div className="whitespace-pre-wrap">{text}</div>
            </div>
          </div>
        </>
      );
    }

    case 'system':
      return <CollapsibleBlock label="System prompt" content={message.text} />;

    case 'assistant':
      if (!message.text) return null;
      return (
        <div className="flex justify-start">
          <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
            <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
              {message.text}
            </ReactMarkdown>
          </div>
        </div>
      );

    case 'tool':
      if (message.toolName === 'question' && onAnswer) {
        return <QuestionActivity message={message} onAnswer={onAnswer} />;
      }
      return <ToolActivity message={message} />;

    case 'result':
      return (
        <div className="flex justify-center py-1">
          <span className="text-xs text-duck-dark/40">
            Done · ${message.costUsd.toFixed(3)} · {(message.durationMs / 1000).toFixed(1)}s · {message.numTurns} turn
            {message.numTurns !== 1 ? 's' : ''}
            {message.isError ? ' (with errors)' : ''}
          </span>
        </div>
      );

    case 'error':
      return (
        <div className="flex justify-start">
          <div className="max-w-[80%] rounded-2xl bg-red-50 border border-red-200 px-4 py-2.5 text-sm text-red-700">
            {message.text}
          </div>
        </div>
      );
  }
};

type StreamingBubbleProps = {
  text: string;
};

export const StreamingBubble = ({ text }: StreamingBubbleProps) => {
  if (!text) return null;
  return (
    <div className="flex justify-start">
      <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
          {text}
        </ReactMarkdown>
        <span className="inline-block w-2 h-4 bg-duck-teal/60 animate-pulse ml-0.5 align-middle" />
      </div>
    </div>
  );
};