import streamlit as st
import gradio as gr
from datetime import datetime
import persianutils as pu
from transformers import pipeline

# تنظیمات پایه
SETTINGS = {
    "dark_mode": False,
    "font_size": 14,
    "language": "fa",
    "theme_color": "#fa8721"
}

# پیام‌های پیش‌فرض
DEFAULT_MESSAGES = [
    "سلام! چطور می‌تونم کمکتون کنم؟",
    "خوشحالم که اینجا هستید!",
    "بفرمایید، در خدمتم"
]

# آیکون‌های SVG
ICONS = {
    'settings': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3"/>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>''',
    'user': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
        <circle cx="12" cy="7" r="4"/>
    </svg>''',
    'send': '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="22" y1="2" x2="11" y2="13"/>
        <polygon points="22 2 15 22 11 13 2 9 22 2"/>
    </svg>'''
}

# تابع پردازش پیام و تاریخ
def chat_assistant(message, history):
    """پردازش پیام و تولید پاسخ"""
    current_time = pu.convert_en_numbers(datetime.now().strftime("%H:%M"))
    response = DEFAULT_MESSAGES[0]  # پیام پیش‌فرض
    history = history + [(message, response)]
    return "", history

# تابع ساخت رابط کاربری
def create_interface():
    """ساخت رابط کاربری"""
    with gr.Blocks(css=get_custom_css()) as demo:
        # هدر
        gr.HTML(create_header())

        # بخش چت
        chatbox = gr.Chatbot(
            elem_id="chatbox",
            label="چت با دستیار",
            placeholder="پیام خود را تایپ کنید...",
            height="70vh"
        )

        # بخش ورودی
        with gr.Row():
            with gr.Column(scale=10):
                msg_box = gr.Textbox(
                    show_label=False,
                    placeholder="پیام خود را بنویسید...",
                    elem_id="message-box"
                )
            with gr.Column(scale=2):
                send_btn = gr.Button(
                    "ارسال",
                    variant="primary",
                    elem_id="send-button"
                )

        # تنظیمات
        with gr.Accordion("تنظیمات", open=False):
            dark_mode = gr.Checkbox(
                label="حالت شب",
                value=SETTINGS["dark_mode"]
            )
            font_size = gr.Slider(
                minimum=12,
                maximum=20,
                value=SETTINGS["font_size"],
                label="اندازه فونت"
            )
            language = gr.Dropdown(
                choices=["فارسی", "English"],
                value="فارسی",
                label="زبان"
            )

        # رویدادها
        msg_box.submit(
            chat_assistant,
            [msg_box, chatbox],
            [msg_box, chatbox]
        )
        send_btn.click(
            chat_assistant,
            [msg_box, chatbox],
            [msg_box, chatbox]
        )

        return demo

# تابع برای اضافه کردن استایل‌های سفارشی
def get_custom_css():
    """استایل‌های سفارشی"""
    return """
    @font-face {
        font-family: 'Vazir';
        src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v27.2.2/dist/Vazir.woff2') format('woff2');
    }

    * {
        font-family: 'Vazir', Arial, sans-serif;
        direction: rtl;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .chat-area {
        height: 500px;
        overflow-y: auto;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 10px;
    }

    .message {
        margin: 10px 0;
        padding: 10px;
        border-radius: 10px;
        animation: fadeIn 0.3s ease-out;
    }

    .user-message {
        background: white;
        margin-left: 20%;
    }

    .bot-message {
        background: #fa8721;
        color: white;
        margin-right: 20%;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    """

# تابع برای ساخت هدر
def create_header():
    """ساخت هدر"""
    return f"""
    <div class="header">
        <div class="logo">
            {ICONS['user']}
            <h1>دستیار هوشمند</h1>
        </div>
        <div class="settings">
            {ICONS['settings']}
        </div>
    </div>
    """

# تنظیمات صفحه Streamlit
def setup_page():
    st.set_page_config(
        page_title="دستیار هوشمند فارسی",
        page_icon="🤖",
        layout="centered"
    )

# استایل‌های سفارشی Streamlit
def apply_custom_styles():
    st.markdown("""
    <style>
        @font-face {
            font-family: 'Vazir';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v27.2.2/dist/Vazir.woff2') format('woff2');
        }

        body {
            font-family: 'Vazir', Arial, sans-serif;
            direction: rtl;
            background: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .chat-container {
            max-width: 900px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo h1 {
            margin-left: 10px;
        }

        .send-button {
            background-color: #fa8721;
            color: white;
            padding: 12px 16px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .send-button:hover {
            background-color: #f78f34;
        }
    </style>
    """, unsafe_allow_html=True)

# هدر صفحه
def display_header():
    st.markdown("""
    <div class="container">
        <div class="header">
            <div class="header-icons">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h.01"></path><path d="M7 20v-4"></path><path d="M12 20v-8"></path><path d="M17 20V8"></path></svg>
                </div>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h.01"></path><path d="M2 8.82a15 15 0 0 1 20 0"></path><path d="M5 12.859a10 10 0 0 1 14 0"></path><path d="M8.5 16.429a5 5 0 0 1 7 0"></path></svg>
                </div>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="16" height="10" x="2" y="7" rx="2" ry="2"></rect><line x1="22" x2="22" y1="11" y2="13"></line></svg>
                </div>
                <div class="settings-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2"></path><circle cx="12" cy="12" r="3"></circle><path d="M12 8v1M12 15v1M8 12h1M15 12h1"></path></svg>
                </div>
            </div>
            <div class="header-buttons">
                <button>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="5"/>
                        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                    </svg>
                </button>
                <button>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 12h18M3 6h18M3 18h18"/>
                    </svg>
                </button>
            </div>
            <h1>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2a10 10 0 0 1 10 10c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2"/>
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M12 8v1M12 15v1M8 12h1M15 12h1"/>
                </svg>
                دستیار هوشمند
            </h1>
            <div class="admin-avatar">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

# بخش چت
def display_chat():
    st.markdown("""
        <div class="chat-container">
            <div class="chat-bubble left">
                سلام! من دستیار هوشمند شما هستم. چطور میتونم کمکتون کنم؟
            </div>
            <div class="chat-bubble right">
                سلام، خوشحالم که اینجایی
            </div>
            <div class="chat-bubble left">
                ممنون! من آماده‌ام به سوالات شما پاسخ بدم
            </div>
            <div class="typing-indicator">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>
    """, unsafe_allow_html=True)

# بخش ورودی
def display_input():
    st.markdown("""
        <div class="input-container">
            <input type="text" placeholder="پیام خود را بنویسید..." id="user-input">
            <button onclick="sendMessage()">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="22" y1="2" x2="11" y2="13"/>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
            </button>
        </div>
    """, unsafe_allow_html=True)

    st.markdown("""
    <script>
        function sendMessage() {
            const userInput = document.getElementById('user-input').value;
            if (userInput) {
                const chatContainer = document.querySelector('.chat-container');
                const userMessage = document.createElement('div');
                userMessage.classList.add('chat-bubble', 'right');
                userMessage.textContent = userInput;
                chatContainer.appendChild(userMessage);

                // Simulate bot response
                setTimeout(() => {
                    const botMessage = document.createElement('div');
                    botMessage.classList.add('chat-bubble', 'left');
                    botMessage.textContent = 'پاسخ به پیام شما: ' + userInput;
                    chatContainer.appendChild(botMessage);
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 1000);

                document.getElementById('user-input').value = '';
            }
        }
    </script>
    """, unsafe_allow_html=True)

# اجرای توابع
setup_page()
apply_custom_styles()
display_header()
display_chat()
display_input()

# اجرای برنامه Gradio
if __name__ == "__main__":
    # توکن احراز هویت Hugging Face را اینجا قرار دهید
   
    # استفاده از توکن برای دسترسی به مدل خصوصی
 
    create_interface().launch(share=True)