import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ZoomIn, ZoomOut } from "lucide-react";

interface StandardMarkdownViewerProps {
  content: string;
  selectedFile: string;
  diagramZoom?: number;
}

export const StandardMarkdownViewer = ({ 
  content, 
  selectedFile, 
  diagramZoom = 100 
}: StandardMarkdownViewerProps) => {
  const renderMarkdown = (markdown: string) => {
    return markdown.split('\n').map((line, index) => {
      if (line.startsWith('# ')) {
        return <h1 key={index} className="text-3xl font-bold mb-4 text-gray-900">{line.slice(2)}</h1>;
      } else if (line.startsWith('## ')) {
        return <h2 key={index} className="text-2xl font-semibold mb-3 text-gray-800 mt-6">{line.slice(3)}</h2>;
      } else if (line.startsWith('### ')) {
        return <h3 key={index} className="text-xl font-semibold mb-2 text-gray-700 mt-4">{line.slice(4)}</h3>;
      } else if (line.startsWith('#### ')) {
        return <h4 key={index} className="text-lg font-semibold mb-2 text-gray-700 mt-3">{line.slice(5)}</h4>;
      } else if (line.startsWith('```mermaid')) {
        return <div key={index} className="my-6 p-4 bg-gray-50 border rounded-lg">
          <div className="flex items-center justify-between mb-2">
            <Badge variant="secondary">Mermaid Diagram</Badge>
            <div className="flex items-center space-x-2">
              <span className="text-sm text-gray-500">{diagramZoom}%</span>
            </div>
          </div>
          <div 
            className="bg-white p-4 rounded border text-center text-gray-600 overflow-auto"
            style={{ transform: `scale(${diagramZoom / 100})`, transformOrigin: 'top left' }}
          >
            <div className="text-blue-600 font-mono text-sm mb-2">[Mermaid Diagram]</div>
            <div className="text-xs text-gray-500 whitespace-pre-wrap">{line}</div>
          </div>
        </div>;
      } else if (line.startsWith('```')) {
        return <div key={index} className="my-4 p-4 bg-gray-100 rounded-lg font-mono text-sm overflow-x-auto">
          <code>{line.slice(3)}</code>
        </div>;
      } else if (line.startsWith('- ')) {
        return <li key={index} className="ml-4 mb-1">{line.slice(2)}</li>;
      } else if (line.startsWith('**') && line.endsWith('**')) {
        return <p key={index} className="font-semibold mb-2">{line.slice(2, -2)}</p>;
      } else if (line.trim() === '') {
        return <br key={index} />;
      } else {
        return <p key={index} className="mb-2 leading-relaxed">{line}</p>;
      }
    });
  };

  return (
    <div className="prose prose-lg max-w-none">
      {renderMarkdown(content)}
    </div>
  );
};