# nsx/templates.py

# ---------------------------------------------------------
# 🐍 PYTHON ENGINE TEMPLATE
# ---------------------------------------------------------
APP_PY_TEMPLATE = """from nsx.ns14engine import run_nsx_app

if __name__ == '__main__':
    run_nsx_app()
"""

# ---------------------------------------------------------
# 🎨 CSS TEMPLATES (React की तरह)
# ---------------------------------------------------------
STYLE_CSS_TEMPLATE = """/* src/style.css - Global Styles (जैसे React का index.css) */
body {
    background-color: #111122;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    color: #61dafb;
    margin-bottom: 10px;
}

hr {
    border: 0.5px solid #333;
}
"""

APP_CSS_TEMPLATE = """/* src/App.css - App Component Styles */
.container {
    text-align: center;
    padding: 50px;
}

.btn {
    padding: 12px 25px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s ease;
}

.btn:hover {
    background: #0d9668;
    transform: scale(1.05);
}

.input-box {
    padding: 12px;
    border-radius: 8px;
    border: none;
    width: 250px;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
}

.input-box:focus {
    border: 2px solid #61dafb;
}

/* Splash Screen Loader */
.loader {
    border: 4px solid #1a1a2e;
    border-top: 4px solid #61dafb;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
"""

# ---------------------------------------------------------
# ⚛️ NSX COMPONENT TEMPLATES
# ---------------------------------------------------------

# 1. App.nsx (Router / Splash Screen)
APP_NSX_TEMPLATE = """def render():
    return f'''
    <head>
        <link rel="stylesheet" href="src/style.css">
        <link rel="stylesheet" href="src/App.css">
    </head>
    <body style="text-align: center; padding-top: 20%;">
        <div class="loader"></div>
        <h1>NSX Framework Load हो रहा है...</h1>
        <script>
            setTimeout(() => {{ window.pywebview.api.navigate('HomeScreen'); }}, 1500);
        </script>
    </body>
    '''
"""

# 2. HomeScreen.nsx 
HOME_NSX_TEMPLATE = """def render():
    return f'''
    <head>
        <link rel="stylesheet" href="src/style.css">
        <link rel="stylesheet" href="src/App.css">
    </head>
    <body>
        <div class="container">
            <h1>🏠 Home Screen</h1>
            <p>अपना नाम लिखें और Profile देखें:</p>
            <br>
            <input type="text" id="username" class="input-box" placeholder="Name यहाँ लिखें...">
            <br>
            <button class="btn" onclick="window.pywebview.api.navigate('ProfileScreen', {{'user_name': document.getElementById('username').value}})">
                Profile पर जाएँ 🚀
            </button>
        </div>
    </body>
    '''
"""

# 3. ProfileScreen.nsx
PROFILE_NSX_TEMPLATE = """def render():
    user = props.get("user_name", "Guest")
    return f'''
    <head>
        <link rel="stylesheet" href="src/style.css">
        <link rel="stylesheet" href="src/App.css">
        <style>
            /* सिर्फ इस स्क्रीन के लिए अलग CSS */
            .profile-card {{
                background: #1a1a2e; 
                padding: 40px; 
                border-radius: 20px; 
                border: 1px solid #61dafb; 
                display: inline-block;
            }}
            .back-btn {{
                background: none; border: 1px solid #61dafb; color: #61dafb; 
                padding: 8px 20px; border-radius: 5px; cursor: pointer; transition: 0.3s;
            }}
            .back-btn:hover {{ background: #61dafb; color: #111122; }}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="profile-card">
                <h1 style="color:white;">👤 User Profile</h1>
                <hr>
                <h2>स्वागत है, {user}!</h2>
                <p style="color:#888;">यह डेटा 'Props' के ज़रिए दूसरी स्क्रीन से आया है।</p>
                <br>
                <button class="back-btn" onclick="window.pywebview.api.navigate('HomeScreen')">
                    ← वापस जाएँ
                </button>
            </div>
        </div>
    </body>
    '''
"""