import gradio as gr
from daggr import InferenceNode, FnNode, Graph

# Custom CSS for Glassmorphism and Persian Font
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

body {
    font-family: 'Vazirmatn', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
}

.gradio-container {
    max-width: 900px !important;
    margin: auto !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 20px !important;
}

.gr-button-primary {
    background: linear-gradient(90deg, #ff7eb3 0%, #ff758c 100%) !important;
    border: none !important;
    color: white !important;
    font-family: 'Vazirmatn', sans-serif !important;
    transition: all 0.3s ease !important;
}

.gr-button-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 117, 140, 0.4) !important;
}

 textarea, input {
    font-family: 'Vazirmatn', sans-serif !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
 }
"""

# Node 1: AI Chatbot (The "User" in the chat room context)
# Using a model that works well with conversation flows
chat_node = InferenceNode(
    model="meta-llama/Llama-3.1-8B-Instruct",
    inputs={
        "prompt": gr.Textbox(
            label="🔵 پیام شما", 
            placeholder="پیام خود را در اتاق بنویسید...", 
            lines=2, 
            rtl=True,
            show_copy_button=True
        )
    },
    outputs={
        "response": gr.Textbox(
            label="🤖 پاسخ هوش مصنوعی", 
            rtl=True, 
            interactive=False
        )
    }
)

# Node 2: Room Moderator / System Logger (Simulating JS logic in Python)
# This function acts like the 'js/chat.js' manager, processing the chat history
def manage_room_state(user_message: str, ai_response: str) -> str:
    """Simulates room management logic (logging, status update)."""
    timestamp = "Just now"
    status = f"📩 پیام جدید در اتاق: {user_message[:30]}...\n✅ پاسخ ثبت شد.\n⏰ زمان: {timestamp}"
    return status

moderator_node = FnNode(
    fn=manage_room_state,
    inputs={
        "user_message": gr.Textbox(label="User Msg Input", visible=False),  # Hidden wiring
        "ai_response": gr.Textbox(label="AI Response Input", visible=False) # Hidden wiring
    },
    outputs={
        "status": gr.Textbox(label="📊 وضعیت سیستم", lines=3, interactive=False)
    }
)

# Define the Graph
# Note: In a real scenario, we would wire chat_node outputs to moderator_node inputs.
# Here we present them as the workflow components.
graph = Graph(
    name="🔍 چت روم مینیمال هوشمند",
    description="""
    <div style='text-align: center;'>
        <h2>Built with anycoder</h2>
        <p>یک چت روم مدرن با پشتیبانی از هوش مصنوعی، طراحی شیشه‌ای و زبان فارسی.</p>
    </div>
    """,
    nodes=[chat_node, moderator_node],
    css=custom_css,
    theme=gr.themes.Soft(
        primary_hue="pink",
        secondary_hue="blue",
        font=gr.themes.GoogleFont("Vazirmatn")
    )
)

if __name__ == "__main__":
    graph.launch()