import gradio as gr
from huggingface_hub import InferenceClient

# التنسيق البصري الفاخر لـ 7.com.ly (Cyber Neon + 3D Animated Agent)
custom_css = """
body, .gradio-container {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
}
#col-container {
    margin: 0 auto;
    max-width: 800px;
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid #bf00ff !important;
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 30px !important;
}

/* 🪐 هيكلية المحرك السيبراني ثلاثي الأبعاد والتحرك اللحظي */
.avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -10px;
    perspective: 1000px;
}
.cyber-agent-3d {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at 30% 30%, #00f3ff 0%, #bf00ff 50%, #050505 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.5), inset -10px -10px 25px rgba(0, 0, 0, 0.9), inset 10px 10px 20px rgba(255, 255, 255, 0.4);
    animation: floatAgent 4s ease-in-out infinite, rotateAgent 12s linear infinite;
    transform-style: preserve-3d;
}
.cyber-core-eye {
    width: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 32px;
    left: 32px;
    box-shadow: 0 0 20px #00f3ff, inset 0 0 5px #00f3ff;
    animation: lookAround 7s ease-in-out infinite;
}
.cyber-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px dashed rgba(191, 0, 255, 0.6);
    border-radius: 50%;
    animation: orbitRing 10s linear infinite;
    box-shadow: 0 0 15px rgba(191, 0, 255, 0.2);
}

/* 🎬 جداول الحركات الالتفاتية العشوائية والنظر للمستخدم */
@keyframes floatAgent {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-12px) scale(1.02); }
}
@keyframes orbitRing {
    0% { transform: rotate(0deg) rotateX(70deg); }
    100% { transform: rotate(36deg) rotateX(70deg); }
}
@keyframes lookAround {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(14px, -8px); }   /* التفات لليمين والأعلى */
    30% { transform: translate(-12px, 6px); }   /* التفات لليسار والأسفل */
    45% { transform: translate(0, 12px); }      /* النظر للأسفل نحو المحتوى */
    60% { transform: translate(-14px, -10px); } /* التفات حاد لليسار */
    75% { transform: translate(12px, 10px); }    /* التفات لليمين والأسفل للمستخدم */
    90% { transform: translate(0, -6px); }      /* النظر للأعلى */
}

button.primary {
    background: linear-gradient(135deg, #00f3ff, #bf00ff) !important;
    color: #000000 !important;
    font-weight: bold !important;
}
button.primary:hover {
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.5) !important;
}
input, textarea {
    background-color: #050505 !important;
    color: #ffffff !important;
    border: 1px solid #00f3ff !important;
}
.guide-box {
    background-color: #0a0a0a !important;
    border-right: 4px solid #00f3ff !important;
    padding: 15px !important;
    border-radius: 4px !important;
}
"""

def generate_byok(prompt, hf_token):
    if not hf_token:
        return None, "تنبيه: برجاء إدخال مفتاح الـ Token في الصندوق بالأسفل أولاً."
    
    try:
        client = InferenceClient("black-forest-labs/FLUX.1-schnell", token=hf_token)
        image = client.text_to_image(prompt)
        return image, "تمت العملية بنجاح عبر محركك المحفوظ!"
    except Exception as e:
        return None, f"خطأ في الاتصال اللحظي: {str(e)}"

with gr.Blocks() as demo:
    token_storage = gr.BrowserState()

    with gr.Column(elem_id="col-container"):
        # 🪐 حقن مجسم المساعد الرقمي ثلاثي الأبعاد التفاعلي في أعلى الواجهة
        gr.HTML(
            """
            <div class="avatar-container">
                <div class="cyber-ring"></div>
                <div class="cyber-agent-3d">
                    <div class="cyber-core-eye"></div>
                </div>
            </div>
            """
        )
        
        gr.Markdown("<h1 style='text-align: center; color: #00f3ff; margin-bottom: 0;'>7.com.ly</h1>")
        gr.Markdown("<p style='text-align: center; color: #bf00ff; margin-top: 0;'>Sovereign Image Engine (BYOK + Saved Session)</p>")
        
        with gr.Row():
            prompt = gr.Text(label="الوصف البصري (Prompt)", placeholder="أدخل تفاصيل الصورة بالإنجليزية...", scale=4)
            run_button = gr.Button("توليد فوري", scale=1, variant="primary")
            
        result = gr.Image(label="النتيجة السيادية", show_label=False)
        status_label = gr.Textbox(label="تقارير حالة المحرك اللحظية", interactive=False)
        
        with gr.Accordion("منطقة تفعيل المفتاح الخاص وحفظ الجلسة", open=False):
            hf_token = gr.Text(label="مفتاح العميل اللحظي (Hugging Face Token)", placeholder="hf_...", type="password")
            
            with gr.Accordion("💡 كيف أحصل على مفتاح مجاني في دقيقة؟ (اضغط هنا)", open=False):
                gr.Markdown(
                    """
                    <div class='guide-box'>
                    <b style='color: #00f3ff;'>خطوات التفعيل السريع والمجاني:</b><br>
                    1. قم بزيارة موقع <b>huggingface.co</b> وأنشئ حساباً مجانياً.<br>
                    2. اذهب إلى الإعدادات <b>(Settings)</b> ثم المفاتيح <b>(Access Tokens)</b>.<br>
                    3. اضغط على <b>Create new token</b> واجعل صلاحيته <b>Read</b> ثم انسخه وضعه هنا.<br>
                    </div>
                    """
                )

    demo.load(fn=lambda x: x, inputs=[token_storage], outputs=[hf_token])
    hf_token.change(fn=lambda x: x, inputs=[hf_token], outputs=[token_storage])

    run_button.click(
        fn=generate_byok,
        inputs=[prompt, hf_token],
        outputs=[result, status_label]
    )

if __name__ == "__main__":
    demo.launch(css=custom_css, theme=gr.themes.Base())