import React from 'react';
import './TutorialPanel.css';

interface Props {
    isOpen: boolean;
    onClose: () => void;
}

const TutorialPanel: React.FC<Props> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    return (
        <div className="tutorial-panel">
            <div className="tutorial-header">
                <h3>🚀 Quick Start Tutorial</h3>
                <button className="tutorial-close" onClick={onClose}>×</button>
            </div>
            
            <div className="tutorial-scroll">
                <div className="tutorial-step">
                    <div className="step-circle">1</div>
                    <div className="step-content">
                        <strong>Locate your site</strong>
                        <p>Use the 🔍 search bar in the top menu to find your facility or site area.</p>
                    </div>
                </div>

                <div className="tutorial-step">
                    <div className="step-circle">2</div>
                    <div className="step-content">
                        <strong>Lock the Map</strong>
                        <p>When you've framed your site, click <strong>🔓 Lock Map</strong>. This enables the placement and editing mode.</p>
                    </div>
                </div>

                <div className="tutorial-step">
                    <div className="step-circle">3</div>
                    <div className="step-content">
                        <strong>Add Processes</strong>
                        <p>Click <strong>⚙️ Add Process</strong> in the top menu to create a new process group for your site.</p>
                    </div>
                </div>

                <div className="tutorial-step">
                    <div className="step-circle">4</div>
                    <div className="step-content">
                        <strong>Geospatial Placement</strong>
                        <p>Click the <strong>📍 icon</strong> next to a process name in the left panel, then click on the map to place its marker.</p>
                    </div>
                </div>

                <div className="tutorial-step">
                    <div className="step-circle">5</div>
                    <div className="step-content">
                        <strong>Enter Stream Data</strong>
                        <p>Expand a process to add <strong>Hot/Cold Streams</strong>. Enter Temperatures (°C) and CP (kW/K) to track heat loads.</p>
                    </div>
                </div>

                <div className="tutorial-step">
                    <div className="step-circle">6</div>
                    <div className="step-content">
                        <strong>Analyze Potential</strong>
                        <p>Switch to the <strong>Potential Analysis</strong> page in the sidebar to see energy savings and pinch integration curves.</p>
                    </div>
                </div>

                <div className="tutorial-footer">
                    <p>💡 <em>Tip: Double-click map bubbles to jump to their data editing controls in the sidebar.</em></p>
                </div>
            </div>
        </div>
    );
};

export default TutorialPanel;