import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Database, ZoomIn, ZoomOut, Maximize } from "lucide-react";
import { StandardMarkdownViewer } from "./StandardMarkdownViewer";

interface ArchitectureViewerProps {
  content: string;
  selectedFile: string;
}

export const ArchitectureViewer = ({ content, selectedFile }: ArchitectureViewerProps) => {
  const [diagramZoom, setDiagramZoom] = useState(100);
  const [focusMode, setFocusMode] = useState(false);

  // Extract mermaid diagrams from content
  const extractDiagrams = (content: string) => {
    const mermaidRegex = /```mermaid\n([\s\S]*?)\n```/g;
    const diagrams = [];
    let match;
    
    while ((match = mermaidRegex.exec(content)) !== null) {
      diagrams.push({
        content: match[1],
        index: diagrams.length
      });
    }
    
    return diagrams;
  };

  const diagrams = extractDiagrams(content);

  return (
    <div className="h-full flex flex-col bg-white">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-gradient-to-r from-red-50 to-pink-50">
        <div className="flex items-center space-x-3">
          <Database className="h-5 w-5 text-red-600" />
          <div>
            <h2 className="font-semibold text-gray-900">{selectedFile}</h2>
            <div className="flex items-center space-x-2">
              <p className="text-sm text-gray-600">Architecture Document</p>
              {diagrams.length > 0 && (
                <Badge variant="secondary" className="text-xs">
                  {diagrams.length} diagram{diagrams.length !== 1 ? 's' : ''}
                </Badge>
              )}
            </div>
          </div>
        </div>
        
        <div className="flex space-x-2">
          <Button 
            variant={focusMode ? 'default' : 'outline'} 
            size="sm"
            onClick={() => setFocusMode(!focusMode)}
          >
            <Maximize className="h-4 w-4 mr-1" />
            Focus
          </Button>
          <Button variant="ghost" size="sm" onClick={() => setDiagramZoom(Math.min(200, diagramZoom + 25))}>
            <ZoomIn className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm" onClick={() => setDiagramZoom(Math.max(50, diagramZoom - 25))}>
            <ZoomOut className="h-4 w-4" />
          </Button>
          <span className="text-sm text-gray-500 self-center">{diagramZoom}%</span>
          <Button variant="ghost" size="sm">
            <Copy className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Content Area */}
      <div className="flex-1 overflow-y-auto">
        <div className={`mx-auto p-8 ${focusMode ? 'max-w-full' : 'max-w-4xl'}`}>
          <div className="prose prose-lg max-w-none">
            <StandardMarkdownViewer 
              content={content} 
              selectedFile={selectedFile}
              diagramZoom={diagramZoom}
            />
          </div>
        </div>
      </div>
    </div>
  );
};