function Graph3DPlotter() {
    const [equation, setEquation] = useState('Math.sin(Math.sqrt(x**2 + y**2))');

    const plotGraph = () => {
        try {
            const size = 50;
            const range = 5;
            const step = (2 * range) / size;

            const xValues = [];
            const yValues = [];
            const zValues = [];

            for (let i = 0; i < size; i++) {
                xValues[i] = [];
                yValues[i] = [];
                zValues[i] = [];
                for (let j = 0; j < size; j++) {
                    const x = -range + i * step;
                    const y = -range + j * step;
                    xValues[i][j] = x;
                    yValues[i][j] = y;
                    try {
                        const z = eval(equation.replace(/x/g, `(${x})`).replace(/y/g, `(${y})`));
                        zValues[i][j] = isFinite(z) ? z : 0;
                    } catch (e) {
                        zValues[i][j] = 0;
                    }
                }
            }

            const data = [{
                x: xValues,
                y: yValues,
                z: zValues,
                type: 'surface',
                colorscale: 'Viridis'
            }];

            const layout = {
                title: `z = ${equation}`,
                scene: {
                    xaxis: { title: 'X' },
                    yaxis: { title: 'Y' },
                    zaxis: { title: 'Z' }
                },
                autosize: true
            };

            Plotly.newPlot('graph3d-plot', data, layout, { responsive: true });
        } catch (error) {
            alert('Error plotting 3D graph. Please check your equation.');
        }
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>📊 3D Graph Plotter</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '12px' }}>
                Enter an equation in the form <strong>z = f(x, y)</strong> where z is expressed as a function of x and y.
            </p>
            <div style={{ background: 'var(--bg-tertiary)', padding: '12px', borderRadius: '8px', marginBottom: '16px', fontSize: '13px' }}>
                <div style={{ fontWeight: '600', marginBottom: '8px', color: 'var(--text-primary)' }}>Example Equations to Try:</div>
                <div style={{ display: 'grid', gap: '4px', color: 'var(--text-secondary)' }}>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>Math.sqrt(25 - x**2 - y**2)</code> - Sphere (upper hemisphere, r=5)</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>Math.sqrt(x**2 + y**2)</code> - Cone (upright)</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>5 - Math.sqrt(x**2 + y**2)</code> - Inverted Cone</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>x**2 + y**2 &lt; 9 ? 5 : 0</code> - Cylinder (r=3, h=5)</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>x**2 + y**2</code> - Paraboloid</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>Math.sin(Math.sqrt(x**2 + y**2))</code> - Ripple</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>Math.sin(x) * Math.cos(y)</code> - Wave</div>
                    <div>• <code style={{ background: 'var(--bg-secondary)', padding: '2px 6px', borderRadius: '4px' }}>x**2 - y**2</code> - Saddle</div>
                </div>
            </div>
            <div className="form-group">
                <label className="form-label">Equation (z = ...)</label>
                <input type="text" className="form-input" value={equation} onChange={(e) => setEquation(e.target.value)} placeholder="Math.sqrt(25 - x**2 - y**2)" />
            </div>
            <button className="btn btn-primary" onClick={plotGraph}>Plot 3D Graph</button>
            <div id="graph3d-plot" style={{ marginTop: '20px', minHeight: '500px' }}></div>
        </div>
    );
}

// Export to global registry
window.Graph3DPlotter = Graph3DPlotter;