"""
Sidebar component with step-by-step guide
"""

import gradio as gr


def create_sidebar(current_step):
    """Create the sidebar with progress steps"""
    
    with gr.Column(elem_classes="sidebar"):
        gr.Markdown("### Workflow Steps")
        
        # Step indicators
        steps = [
            {"number": 1, "title": "Provide Code", "description": "Upload or paste your Python code"},
            {"number": 2, "title": "Generate Files", "description": "Download individual components"},
            {"number": 3, "title": "Deploy", "description": "Deploy to Hugging Face"}
        ]
        
        step_html = '<div class="steps-container">'
        for step in steps:
            active_class = "active" if step["number"] == current_step.value else ""
            step_html += f'''
            <div class="step {active_class}">
                <div class="step-number">{step["number"]}</div>
                <div class="step-content">
                    <div class="step-title">{step["title"]}</div>
                    <div class="step-description">{step["description"]}</div>
                </div>
            </div>
            '''
        step_html += '</div>'
        
        gr.HTML(step_html)
        
        # Quick tips
        gr.Markdown("### Quick Tips")
        
        tips_html = '''
        <div class="tips-container">
            <div class="tip">
                <span class="material-icons tip-icon">code</span>
                <div class="tip-content">
                    <strong>Clean Code</strong>
                    <p>Ensure your Python code is well-structured for better conversion results.</p>
                </div>
            </div>
            <div class="tip">
                <span class="material-icons tip-icon">security</span>
                <div class="tip-content">
                    <strong>API Security</strong>
                    <p>Your API keys are used only for conversion and are not stored.</p>
                </div>
            </div>
            <div class="tip">
                <span class="material-icons tip-icon">cloud_upload</span>
                <div class="tip-content">
                    <strong>Easy Deployment</strong>
                    <p>Deploy with one click to Hugging Face Spaces.</p>
                </div>
            </div>
        </div>
        '''
        
        gr.HTML(tips_html)
        
        # System requirements
        gr.Markdown("### System Requirements")
        requirements_html = '''
        <div class="requirements">
            <ul>
                <li>Python 3.8 or higher</li>
                <li>Valid Groq API Key</li>
                <li>Hugging Face Account (for deployment)</li>
                <li>Internet connection</li>
            </ul>
        </div>
        '''
        
        gr.HTML(requirements_html)