import React, { useState, useRef, useEffect } from 'react';
import Editor from '@monaco-editor/react';
import { api } from './apiService';
const getFileIcon = (filename) => {
if (filename.endsWith('.html')) return ;
if (filename.endsWith('.css')) return ;
if (filename.endsWith('.js') || filename.endsWith('.jsx')) return ;
if (filename.endsWith('.json')) return ;
if (filename.endsWith('.py')) return ;
if (filename.includes('/')) return ;
return ;
};
const getLanguage = (filename) => {
if (filename.endsWith('.html')) return 'html';
if (filename.endsWith('.css')) return 'css';
if (filename.endsWith('.js') || filename.endsWith('.jsx')) return 'javascript';
if (filename.endsWith('.json')) return 'json';
if (filename.endsWith('.py')) return 'python';
return 'plaintext';
};
function App() {
const [files, setFiles] = useState({
'index.html': { name: 'index.html', language: 'html', value: '\nHello Shantanu ✨
' },
'style.css': { name: 'style.css', language: 'css', value: '/* Type your CSS here */\nbody {\n background-color: #1e1e1e;\n color: white;\n}' },
'script.js': { name: 'script.js', language: 'javascript', value: 'console.log("Ethrix God Mode Active!");' }
});
const [activeTab, setActiveTab] = useState('index.html');
const [saveStatus, setSaveStatus] = useState('☁️ Synced');
const [showTerminal, setShowTerminal] = useState(false);
const [showExplorer, setShowExplorer] = useState(true);
const [websiteTheme, setWebsiteTheme] = useState('Auto Theme');
const [activeMode, setActiveMode] = useState('Agentic Mode');
const [isCreatingFile, setIsCreatingFile] = useState(false);
const [newFileName, setNewFileName] = useState('');
const [renamingFile, setRenamingFile] = useState(null);
const [renameInput, setRenameInput] = useState('');
const [chatMessages, setChatMessages] = useState([{ role: 'ai', text: 'Hi Shantanu! 🖤 Main Shanvika hu. Agentic Workflow is 100% online. Kya banana hai aaj?' }]);
const [aiInput, setAiInput] = useState('');
const [aiWorkflowStatus, setAiWorkflowStatus] = useState('');
const filesRef = useRef(files);
const terminalRef = useRef(null);
const xtermInstance = useRef(null);
const fitAddonRef = useRef(null);
const chatEndRef = useRef(null);
useEffect(() => { filesRef.current = files; }, [files]);
useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [chatMessages, aiWorkflowStatus]);
const runLivePreview = () => {
const currentFiles = filesRef.current;
const combinedCode = `
Ethrix-Forge Live Preview
${currentFiles['index.html']?.value || ''}