import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { useMount, useLocalStorage } from "react-use";
import { toast } from "react-toastify";
import Sidebar from "./sidebar/Sidebar";
import EditorPanel from "./panels/EditorPanel";
import FilesPanel from "./panels/FilesPanel";
import PreviewPanel from "./panels/PreviewPanel";
import APIKeysConfig from "./panels/APIKeysConfig";
import AgentConfig from "./panels/AgentConfig";
import SystemPromptConfig from "./panels/SystemPromptConfig";
import AskAI from "./ask-ai/ask-ai";
import agents from "../../agents.json";
import { defaultHTML } from "../../utils/consts";
function App() {
    const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content", "");
    const [html, setHtml] = useState(htmlStorage || defaultHTML);
    const [error, setError] = useState(false);
    const [isAiWorking, setIsAiWorking] = useState(false);
    const [selectedAgent, setSelectedAgent] = useLocalStorage("selectedAgent", agents[0].id);
    const agentId = selectedAgent || agents[0].id; // ← nunca undefined
    const [activePanel, setActivePanel] = useState("editor");
    const [prompts, setPrompts] = useState([]);
    const [activeViewer, setActiveViewer] = useState("viewer1");
    const editorRef = useRef(null);
    useMount(() => {
        if (htmlStorage) {
            removeHtmlStorage();
            toast.warn("Conteúdo HTML restaurado do storage.");
        }
    });
    return (_jsxs("div", { className: "h-screen flex overflow-hidden bg-gray-950 text-gray-200", children: [_jsxs("div", { className: "w-20 bg-gray-900 border-r border-gray-800 flex flex-col items-center py-4", children: [_jsx("div", { className: "mb-6", children: _jsx("img", { src: "/logo.svg", alt: "Logo", className: "w-10 h-10" }) }), _jsx("div", { className: "flex flex-col items-center space-y-6", children: agents.slice(0, 5).map((agent) => (_jsx("div", { className: `w-12 h-12 rounded-full flex items-center justify-center cursor-pointer transition-all
                ${selectedAgent === agent.id ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`, onClick: () => setSelectedAgent(agent.id), title: agent.name, children: _jsx("span", { className: "text-lg font-bold", children: agent.name.charAt(0) }) }, agent.id))) })] }), _jsxs("div", { className: "w-[320px] bg-gray-900 border-r border-gray-800 flex flex-col", children: [_jsxs("div", { className: "p-4 border-b border-gray-800", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Agentes IA" }), _jsx("p", { className: "text-sm text-gray-400 mt-1", children: "Selecione um agente para ajudar no seu projeto" })] }), _jsx(AskAI, { agentId: agentId, html: html, setHtml: setHtml, isAiWorking: isAiWorking, setisAiWorking: setIsAiWorking, onNewPrompt: (p) => setPrompts((ps) => [...ps, p]), onScrollToBottom: () => {
                            editorRef.current?.revealLine(editorRef.current?.getModel()?.getLineCount() ?? 0);
                        } })] }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsx("div", { className: "h-14 bg-gray-900 border-b border-gray-800 flex items-center px-4", children: _jsxs("div", { className: "flex space-x-2", children: [_jsx("button", { className: `px-4 py-2 rounded ${activeViewer === 'viewer1' ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`, onClick: () => setActiveViewer('viewer1'), children: "Viewer 1" }), _jsx("button", { className: `px-4 py-2 rounded ${activeViewer === 'viewer2' ? 'bg-indigo-600' : 'bg-gray-800 hover:bg-gray-700'}`, onClick: () => setActiveViewer('viewer2'), children: "Viewer 2" })] }) }), _jsxs("div", { className: "flex flex-1", children: [_jsx(Sidebar, { view: activePanel, onSelect: setActivePanel }), _jsxs("div", { className: "flex-1 overflow-auto bg-gray-900 p-4", children: [activePanel === "editor" && (_jsx(EditorPanel, { html: html, setHtml: setHtml, isAiWorking: isAiWorking, setError: setError, editorRef: editorRef })), activePanel === "files" && _jsx(FilesPanel, {}), activePanel === "preview" && _jsx(PreviewPanel, { html: html }), activePanel === "apikeys" && _jsx(APIKeysConfig, {}), activePanel === "agents" && _jsx(AgentConfig, {}), activePanel === "system" && _jsx(SystemPromptConfig, {})] })] })] })] }));
}
export default App;