import gradio as gr
import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

from agent.pipeline import (
    analyze_change,
    oob_troubleshoot,
    perform_recovery,
    load_synapse_log,
    reset_state,
)
from agent import topology
from agent.network_ops import (
    get_lab_topology,
    get_lab_projects,
    manage_device,
    get_device_configuration,
    configure_device,
    backup_device_config,
    build_network_from_description,
)
import json

VINE_CSS = """
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');
:root {
  --og-green: #2d5f4f;
  --og-mint: #5fc9a0;
  --og-fern: #3d8169;
  --og-cream: #fafaf8;
  --og-shadow: 0 8px 24px rgba(45,95,79,0.12);
}
html, body { overflow-x: hidden; }
body, .gradio-container {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: 
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(95,201,160,0.03) 35px, rgba(95,201,160,0.03) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(61,129,105,0.03) 35px, rgba(61,129,105,0.03) 70px),
    linear-gradient(to bottom, #fafaf8, #f5f7f5);
  color: #1a2f26;
  position: relative;
  min-height: 100vh;
}

.gradio-container > * { position: relative; z-index: 1; }

.og-hero {
  background:
    linear-gradient(135deg, rgba(95,201,160,0.08), rgba(61,129,105,0.12)),
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(95,201,160,0.04) 20px, rgba(95,201,160,0.04) 40px),
    repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(61,129,105,0.04) 20px, rgba(61,129,105,0.04) 40px),
    linear-gradient(to bottom right, #f8faf9, #f0f5f2);
  border: 1px solid rgba(95,201,160,0.2);
  box-shadow: var(--og-shadow);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.og-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--og-mint), transparent);
  opacity: 0.6;
}
.og-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(95,201,160,0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(61,129,105,0.08), transparent 40%);
  pointer-events: none;
}
.og-hero::after {
  inset: auto auto -120px -20px;
  transform: rotate(8deg);
}

.og-hero h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--og-green);
  letter-spacing: 0.02em;
}
.og-hero p {
  margin: 0;
  font-size: 15px;
  color: #0f4d3f;
  max-width: 720px;
}

.og-pill {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(60,191,154,0.22);
  color: var(--og-green);
  font-weight: 700;
  margin: 0 10px 8px 0;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.og-panel {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(95,201,160,0.15);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(45,95,79,0.08);
  position: relative;
  overflow: hidden;
}

/* Hide transparent boxes on empty rows/columns */
.og-main-row > div:empty,
.og-main-row > div > div:empty {
  display: none !important;
}

/* Ensure main row doesn't create unwanted backgrounds */
.og-main-row {
  background: transparent !important;
  gap: 16px;
}
.og-main-row > div {
  background: transparent !important;
}

.og-panel::before {
.og-panel::after {
  content: "";
  position: absolute;
  inset: auto -20px -40px auto;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, rgba(15,77,63,0.14), transparent 65%);
  opacity: 0.55;
  pointer-events: none;
}

.og-tab-title {
  font-family: 'Playfair Display', serif;
  color: var(--og-green);
}
.og-tabs .tab-nav button {
  font-family: 'Playfair Display', serif;
  color: var(--og-fern);
}
.og-tabs .tab-nav button.selected {
  background: rgba(60,191,154,0.16);
  border-color: rgba(60,191,154,0.4);
  color: var(--og-green);
}

.og-divider { border-bottom: 1px solid rgba(15,77,63,0.12); margin: 10px 0 14px 0; }
.og-label { color: var(--og-green); font-weight: 700; letter-spacing: 0.02em; }

textarea, input, select {
  border-radius: 12px !important;
  border: 1px solid rgba(15,77,63,0.16) !important;
  background: rgba(255,255,255,0.95) !important;
}
.gr-button {
  border-radius: 12px !important;
  box-shadow: 0 12px 22px rgba(15,77,63,0.18) !important;
  background: linear-gradient(120deg, var(--og-green), #128162) !important;
  color: #f5f3ec !important;
  border: none !important;
}
.gr-button.secondary {
  background: rgba(15,77,63,0.08) !important;
  color: var(--og-green) !important;
  box-shadow: none !important;
}
"""


def build_ui():
    with gr.Blocks(
        title="Overgrowth – a living digital environment",
        css=VINE_CSS,
        theme=gr.themes.Soft(primary_hue="green", neutral_hue="slate"),
    ) as demo:
        gr.HTML(
            """
            <div class="og-hero">
              <div class="og-pill">Living OOB Mesh</div>
              <div class="og-pill">MCP + Topology</div>
              <h2 style="font-family:'Playfair Display',serif; margin:6px 0 4px 0;">🌿 Overgrowth</h2>
              <p style="margin:0; font-size:15px; color:#0f4d3f;">
                A living digital environment
              </p>
            </div>
            """,
        )

        device_choices = topology.list_devices()

        # Main Pipeline UI
        gr.Markdown("""### 🌿 Network Automation Pipeline
        **From Consultation → Production**
        
        Describe your network in plain English. Overgrowth handles the rest:
        1. 💬 **Consultation** - Capture requirements
        2. 📋 **Source of Truth** - Generate network data model
        3. 📊 **Diagram** - Visualize topology
        4. 🛒 **Bill of Materials** - Hardware shopping list
        5. 🔧 **Setup Guide** - Human deployment steps + OOB network
        6. 🤖 **Autonomous Deploy** - AI configures devices (Ansible/Netmiko)
        7. 👁️ **Observability** - Monitoring, SNMP, topology discovery
        8. ✅ **Validation** - pytest-based network testing & compliance
        """)
        
        with gr.Row(elem_classes=["og-main-row"]):
            with gr.Column(scale=1, elem_classes=["og-panel"]):
                pipeline_input = gr.Textbox(
                    label="Describe Your Network",
                    placeholder=(
                        "Example: We're a coffee shop chain with 3 locations. "
                        "We need WiFi for customers, POS systems with payment processing, "
                        "security cameras, and secure VPN to HQ for centralized management. "
                        "Each location has ~50 customers at peak time."
                    ),
                    lines=10,
                )
                run_pipeline_btn = gr.Button("🚀 Run Full Pipeline", variant="primary", size="lg")
                
                gr.Markdown("#### 🔄 Tool Calls & Logs")
                tool_log_md = gr.Markdown(label="MCP Activity")

            with gr.Column(scale=2, elem_classes=["og-panel", "og-tabs"]):
                gr.Markdown("#### 📦 Pipeline Outputs")
                pipeline_status = gr.Markdown(label="Status")
                
                with gr.Tabs():
                    with gr.Tab("📋 Source of Truth"):
                        sot_output = gr.Code(label="Network Model (YAML)", language="yaml", lines=20)
                    
                    with gr.Tab("🛒 Bill of Materials"):
                        bom_output = gr.Markdown(label="Shopping List")
                    
                    with gr.Tab("🔧 Setup Guide"):
                        setup_output = gr.Markdown(label="Deployment Guide")
                    
                    with gr.Tab("📊 Diagram"):
                        diagram_output = gr.Textbox(label="Network Diagram", lines=25, max_lines=50)

        # Pipeline handler
        def run_pipeline(user_input):
            """Execute the full automation pipeline"""
            from agent.pipeline_engine import OvergrowthPipeline
            
            pipeline = OvergrowthPipeline()
            
            try:
                # Run the pipeline
                results = pipeline.run_full_pipeline(user_input)
                
                # Check pre-flight validation
                preflight = results.get('preflight', {})
                ready_to_deploy = preflight.get('ready_to_deploy', False)
                
                # Format status
                status = "## 🚀 Pipeline Execution Complete!\n\n"
                
                # Pre-flight validation section
                if ready_to_deploy:
                    status += "### ✅ Pre-flight Validation PASSED\n"
                    status += f"- Schema validation: ✓ Passed\n"
                    status += f"- Policy checks: ✓ Passed\n"
                    if preflight.get('warnings'):
                        status += f"- Warnings: {len(preflight['warnings'])}\n"
                    if preflight.get('info'):
                        status += f"- Info: {len(preflight['info'])}\n"
                    status += "\n"
                else:
                    status += "### ❌ Pre-flight Validation FAILED\n"
                    status += "**Deployment blocked until errors are fixed:**\n\n"
                    for error in preflight.get('errors', []):
                        status += f"- ❌ {error}\n"
                    status += "\n"
                    if preflight.get('warnings'):
                        status += "**Warnings:**\n"
                        for warning in preflight.get('warnings', []):
                            status += f"- ⚠️  {warning}\n"
                        status += "\n"
                
                # Completed stages
                status += "### Completed Stages:\n"
                status += "0. " + ("✅" if ready_to_deploy else "❌") + " Pre-flight Validation\n"
                status += "1. ✅ Consultation - Intent captured\n"
                status += "2. ✅ Source of Truth - Network model generated\n"
                status += "3. ✅ Diagrams - Visualizations created\n"
                status += "4. ✅ Bill of Materials - Shopping list ready\n"
                status += "5. ✅ Setup Guide - Deployment instructions generated\n"
                
                if ready_to_deploy:
                    status += "6. ⏳ Autonomous Deploy - Ready for execution\n"
                    status += "7. ⏳ Observability - Ready for setup\n"
                    status += "8. ⏳ Validation - Ready for verification\n\n"
                else:
                    status += "6. 🚫 Autonomous Deploy - BLOCKED (fix validation errors)\n"
                    status += "7. 🚫 Observability - BLOCKED\n"
                    status += "8. 🚫 Validation - BLOCKED\n\n"
                
                status += "### 📁 Files Created:\n"
                status += "- `infra/network_model.yaml` - Source of Truth\n"
                status += "- `infra/bill_of_materials.json` - BOM data\n"
                status += "- `infra/setup_guide.md` - Deployment guide\n"
                
                # Extract outputs
                sot_yaml = results.get('model', {})
                import yaml
                sot_str = yaml.dump(sot_yaml, default_flow_style=False)
                
                bom_md = results.get('shopping_list', 'No BOM generated')
                setup_md = results.get('setup_guide', 'No setup guide generated')
                diagram = results.get('diagrams', {}).get('ascii', 'No diagram available')
                
                return status, sot_str, bom_md, setup_md, diagram
                
            except Exception as e:
                error = f"## ❌ Pipeline Error\n\n{str(e)}"
                import traceback
                error += f"\n\n```\n{traceback.format_exc()}\n```"
                return error, "", "", "", ""

        # Event Handlers
        run_pipeline_btn.click(
            fn=run_pipeline,
            inputs=[pipeline_input],
            outputs=[pipeline_status, sot_output, bom_output, setup_output, diagram_output],
        )

    return demo


demo = build_ui().queue()  # enable queue by default for Spaces
app = demo  # Hugging Face picks this up automatically

if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860, share=False, show_api=False)