# 1. Scaffold a new Next.js application (Press 'Enter' to accept default options like Tailwind CSS and App Router) npx create-next-app@latest ai-flowchart

# 2. Move inside your newly created project folder cd ai-flowchart

# 3. Install our required tools: # - 'ai' and '@ai-sdk/groq': Lets us talk to the AI and stream responses line-by-line. # - 'mermaid': A tool that turns special text into beautiful visual diagrams. npm install ai @ai-sdk/groq mermaid

# 4. Start the local server to verify the baseline app works npm run dev

"use client"; // Tells Next.js this component runs in the browser, not the server
import React, { useEffect, useState } from 'react';
import mermaid from 'mermaid';

// 1. Customize Mermaid's colors and spacing rules
mermaid.initialize({
  startOnLoad: false,
  theme: 'base',
  themeVariables: {
    darkMode: true,
    background: 'transparent',
    primaryColor: '#000000', 
    primaryTextColor: '#fbbf24', 
    primaryBorderColor: '#ea580c', 
    lineColor: '#FFFFFF',
    fontFamily: '"Press Start 2P", monospace', 
  },
  flowchart: { curve: 'step', padding: 20 },
  sequence: {
    actorMargin: 60,
    messageMargin: 35,
    boxMargin: 10,
    boxTextMargin: 5,
    noteMargin: 10,
    messageAlign: 'center',
  },
  suppressErrorRendering: true, // Prevents crashes if the AI is still typing
});

export default function MermaidDiagram({ chartCode }: { chartCode: string }) {
  const [svgContent, setSvgContent] = useState<string>('');
  const [zoom, setZoom] = useState(1);
  const [editableCode, setEditableCode] = useState('');
  const [showEditor, setShowEditor] = useState(false);

  // 2. The Regex Filter: Safely extracts the diagram syntax, ignoring AI markdown
  useEffect(() => {
    if (!chartCode) return;
    
    let cleanCode = chartCode;
    const match = cleanCode.match(/(?:graph|flowchart|sequenceDiagram|erDiagram)[\s\S]*/i);
    if (match) {
      cleanCode = match[0].replace(/```.*/g, '').trim();
    }
    
    setEditableCode(cleanCode);
  }, [chartCode]);

  // 3. Render the code into a visual SVG graphic
  useEffect(() => {
    if (!editableCode) return;
    const uniqueId = `mermaid-svg-${Math.random().toString(36).substring(2, 9)}`;
    mermaid.render(uniqueId, editableCode)
      .then((result) => setSvgContent(result.svg))
      .catch(() => { });
  }, [editableCode]);

  const handleDownload = () => {
    const blob = new Blob([svgContent], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'capsule-architecture.svg';
    a.click();
    URL.revokeObjectURL(url);
  };

  // If there is no code yet, show a retro loading screen
  if (!chartCode) {
    return (
      
<div className="w-full h-full flex flex-col items-center justify-center text-white font-pixel text-xs leading-loose bg-[url('[https://www.transparenttextures.com/patterns/cubes.png](https://www.transparenttextures.com/patterns/cubes.png)')]">
        
<div className="w-12 h-12 mb-6 bg-white shadow-[4px_4px_0px_#ea580c] animate-spin" style={{ animationDuration: '3s' }}></div>

        PRESS START TO BUILD...
      </div>

    );
  }

  // 4. The actual visual layout of the diagram canvas
  return (
    
<div className="relative w-full h-full flex bg-[#1a1a1a] overflow-hidden border-t-4 border-white font-pixel">
      
      {/* 8-Bit Live IDE Editor (Hidden by default) */}
      {showEditor && (
        
<div className="w-1/3 h-full border-r-4 border-white bg-black p-4 flex flex-col z-20">
          
<div className="text-[8px] text-[#fbbf24] mb-4">{">>"} CODE_TERMINAL</div>

          <textarea 
            value={editableCode}
            onChange={(e) => setEditableCode(e.target.value)}
            className="flex-1 w-full bg-transparent text-[#22c55e] text-[8px] leading-relaxed resize-none focus:outline-none custom-scrollbar"
            spellCheck="false"
          />
        </div>

      )}

      
<div className="flex-1 relative flex flex-col">
        {/* Gamified Toolbar for Zooming and Exporting */}
        
<div className="absolute top-2 right-2 z-20 flex items-center gap-2 bg-black border-2 border-white p-1.5 shadow-[2px_2px_0px_#f97316]">
          <button onClick={() => setZoom(z => Math.max(z - 0.2, 0.4))} className="text-white hover:text-[#fbbf24] text-[8px]">[-] ZOOM</button>
          
<div className="text-[8px] text-white w-8 text-center">{Math.round(zoom * 100)}%</div>

          <button onClick={() => setZoom(z => Math.min(z + 0.2, 3))} className="text-white hover:text-[#fbbf24] text-[8px]">[+] ZOOM</button>
          
          
<div className="w-[2px] h-3 bg-white mx-1"></div>

          
          <button onClick={() => setShowEditor(!showEditor)} className="text-[8px] text-black bg-[#fbbf24] px-2 py-1.5 hover:bg-white transition-all shadow-[1px_1px_0px_#ea580c]">
            {showEditor ? 'CLOSE' : 'EDIT'}
          </button>
          <button onClick={handleDownload} className="text-[8px] text-black bg-[#fbbf24] px-2 py-1.5 hover:bg-white transition-all shadow-[1px_1px_0px_#ea580c]">
            EXPORT
          </button>
        </div>


        {/* Render Canvas */}
        
<div className="flex-1 overflow-auto flex items-start justify-center pt-20 px-8 pb-16 custom-scrollbar bg-[url('[https://www.transparenttextures.com/patterns/cubes.png](https://www.transparenttextures.com/patterns/cubes.png)')]">
          
<div 
            className="transition-transform duration-75 origin-top"
            style={{ transform: `scale(${zoom})` }}
            dangerouslySetInnerHTML={{ __html: svgContent }} 
          />
        </div>

      </div>

    </div>

  );
}

"use client";
import { useState, FormEvent, useEffect } from 'react';
import MermaidDiagram from '../components/MermaidDiagram';

const DIAGRAM_MODES = ['FLOWCHART', 'SWIMLANE', 'SEQUENCE', 'ER_DIAGRAM'];

export default function Home() {
  // 1. React State Management (The app's memory)
  const [input, setInput] = useState('');
  const [chartCode, setChartCode] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState(''); 
  const [scrollProgress, setScrollProgress] = useState(0);
  const [diagramType, setDiagramType] = useState('FLOWCHART'); 

  // 2. The function that runs when the user clicks 'EXECUTE'
  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
    
    setIsLoading(true);
    setChartCode(''); 
    setErrorMessage(''); 
    
    try {
      // Sends data to the /api/chat route we created earlier
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: input, diagramType }), 
      });

      if (!res.ok) throw new Error(await res.text());
      const reader = res.body?.getReader();
      if (!reader) throw new Error("Stream failed");
      
      const decoder = new TextDecoder();
      // Reads the AI's response chunk-by-chunk for that live typing effect
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        setChartCode((prev) => prev + decoder.decode(value, { stream: true }));
      }
    } catch (error: any) {
      setErrorMessage(error.message); 
    } finally {
      setIsLoading(false);
      setInput(''); 
    }
  };

  return (
    <main className="flex flex-col min-h-[140vh] bg-[#222222] text-white selection:bg-[#f97316]/50">
      
      {/* 3. 3D Pixel Font Styles injected globally using CSS Text Shadows */}
      
<style dangerouslySetInnerHTML={{__html: `
        @import url('[https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap](https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap)');
        .font-pixel { font-family: 'Press Start 2P', monospace; }
        .text-3d-pixel {
          color: #fbbf24; 
          text-shadow: 2px 2px 0px #ea580c, 4px 4px 0px #ea580c, 6px 6px 0px #9a3412;  
        }
      `}} />
      
      {/* We will add the visual UI in the next phases... */}

    </main>
  );
}