DeveloperDashboard.jsx

function DeveloperDashboard() {
  const { useState, useCallback, useEffect } = React;
  const [activeTab, setActiveTab] = useState('component_manager');
  const [newComponentName, setNewComponentName] = useState('');
  const [generatedCode, setGeneratedCode] = useState('');
  const [scriptTag, setScriptTag] = useState('');
  const [manifest, setManifest] = useState({ components: [], tests: [] });
  const [selectedComponent, setSelectedComponent] = useState('');
  const [generatedTestCode, setGeneratedTestCode] = useState('');

  useEffect(() => {
    // In a real application, we would fetch a manifest.json file here.
    // For now, we will use a hardcoded list of components.
    setManifest({
      components: ['JulesIntrospector.jsx', 'TestComponent.jsx'],
      tests: ['JulesIntrospector.test.jsx']
    });
  }, []);

  const componentTemplate = (name) => `
function ${name}() {
  const { useState, useEffect } = React;
  return (
    <div>
      <h1>${name} Component</h1>
      <p>This is a new component generated by the Developer Dashboard.</p>
    </div>
  );
}

// --- Self-Rendering Logic ---
const container = document.getElementById('root');
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(${name}));
}
`;

  const testTemplate = (name) => `
function ${name}Test() {
  const { useEffect } = React;

  useEffect(() => {
    let success = false;
    let message = '${name} did not render correctly';

    try {
      const component = document.querySelector('h1');
      if (component && component.textContent === "${name} Component") {
        success = true;
        message = '${name} rendered correctly';
      }
    } catch (e) {
      message = \`An error occurred during the test: \${e.message}\`;
    }

    window.parent.postMessage({
      type: 'test-complete',
      detail: { success, message }
    }, '*');
  }, []);

  return React.createElement(${name});
}

// --- Self-Rendering Logic ---
const container = document.getElementById('root');
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(${name}Test));
}
`;

  const handleGenerateCode = useCallback(() => {
    if (!newComponentName) {
      alert('Please enter a component name.');
      return;
    }
    const componentName = newComponentName.trim();
    const boilerplate = componentTemplate(componentName);
    setGeneratedCode(boilerplate);
    setScriptTag(`<script type="text/babel" src="src/${componentName}.jsx"></script>`);
  }, [newComponentName]);

  const handleGenerateTestCode = useCallback(() => {
    if (!selectedComponent) {
      alert('Please select a component to test.');
      return;
    }
    const componentName = selectedComponent.replace('.jsx', '');
    const boilerplate = testTemplate(componentName);
    setGeneratedTestCode(boilerplate);
  }, [selectedComponent]);

  const componentsWithoutTests = manifest.components.filter(
    c => !manifest.tests.includes(c.replace('.jsx', '.test.jsx'))
  );

  return (
    <div className="min-h-screen bg-gray-900 text-white font-sans p-8">
      <h1 className="text-4xl md:text-5xl font-extrabold text-center mb-8">Developer Dashboard</h1>
      <div className="flex justify-center border-b border-gray-700 mb-6">
        <button onClick={() => setActiveTab('component_manager')} className={`py-3 px-6 text-lg font-medium ${activeTab === 'component_manager' ? 'border-b-4 border-blue-500 text-blue-400' : 'text-gray-500 hover:text-gray-300'}`}>Component Manager</button>
        <button onClick={() => setActiveTab('test_generator')} className={`py-3 px-6 text-lg font-medium ${activeTab === 'test_generator' ? 'border-b-4 border-blue-500 text-blue-400' : 'text-gray-500 hover:text-gray-300'}`}>Test Generator</button>
      </div>
      <div className="w-full max-w-6xl mx-auto">
        {activeTab === 'component_manager' && (
          <div>
            <h2 className="text-3xl font-bold mb-4">Component Manager</h2>
            <div className="bg-gray-800 p-6 rounded-lg">
              <h3 className="text-2xl font-semibold mb-4">Create New Component</h3>
              <div className="flex items-center space-x-4 mb-4">
                <input
                  type="text"
                  placeholder="Enter Component Name"
                  value={newComponentName}
                  onChange={(e) => setNewComponentName(e.target.value)}
                  className="bg-gray-700 text-white rounded-md px-4 py-2 w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <button onClick={handleGenerateCode} className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md">Generate Code</button>
              </div>
              {generatedCode && (
                <div className="mt-6">
                  <h4 className="text-xl font-semibold mb-2">Generated Component Code</h4>
                  <p className="text-sm text-gray-400 mb-2">Copy this code and save it in a new file under `src/&lt;ComponentName&gt;.jsx`</p>
                  <textarea
                    readOnly
                    value={generatedCode}
                    className="w-full h-72 p-4 font-mono text-sm bg-gray-700 text-white rounded-md border border-gray-600"
                  />
                  <h4 className="text-xl font-semibold mt-6 mb-2">Script Tag for index.html</h4>
                  <p className="text-sm text-gray-400 mb-2">To run this component, replace the existing component script tag in `index.html` with this one:</p>
                   <textarea
                    readOnly
                    value={scriptTag}
                    className="w-full p-4 font-mono text-sm bg-gray-700 text-white rounded-md border border-gray-600"
                  />
                </div>
              )}
            </div>
          </div>
        )}
        {activeTab === 'test_generator' && (
          <div>
            <h2 className="text-3xl font-bold mb-4">Test Generator</h2>
            <div className="bg-gray-800 p-6 rounded-lg">
              <h3 className="text-2xl font-semibold mb-4">Generate Test for Component</h3>
               <div className="flex items-center space-x-4 mb-4">
                <select
                  value={selectedComponent}
                  onChange={(e) => setSelectedComponent(e.target.value)}
                  className="bg-gray-700 text-white rounded-md px-4 py-2 w-full max-w-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Select a component...</option>
                  {componentsWithoutTests.map(file => <option key={file} value={file}>{file}</option>)}
                </select>
                <button onClick={handleGenerateTestCode} className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md">Generate Test Code</button>
              </div>
              {generatedTestCode && (
                <div className="mt-6">
                  <h4 className="text-xl font-semibold mb-2">Generated Test Code</h4>
                  <p className="text-sm text-gray-400 mb-2">Copy this code and save it in a new file under `src/&lt;ComponentName&gt;.test.jsx`</p>
                  <textarea
                    readOnly
                    value={generatedTestCode}
                    className="w-full h-72 p-4 font-mono text-sm bg-gray-700 text-white rounded-md border border-gray-600"
                  />
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// --- Self-Rendering Logic ---
const container = document.getElementById('root');
if (container) {
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(DeveloperDashboard));
}