import gradio as gr

# Gradio Blocks with dark theme and custom styles
with gr.Blocks(
    theme=gr.themes.Monochrome(),
    css=(
        ":root{--bg:#0b0f19;--fg:#f3f4f6;--muted:#94a3b8;} "
        ".light{--bg:#ffffff;--fg:#111827;--muted:#4b5563;} "
        ".gradio-container {background-color: var(--bg); color: var(--fg); font-family: Arial;} "
        ".brand-title{font-size:28px;color:var(--fg);margin:10px 0 6px 0;} "
        "#logoimg img{display:block;margin:0 auto;max-height:180px;object-fit:contain;border-radius:12px;} "
        "#themeToggle{position:fixed;top:10px;right:12px;z-index:1000;"
        "background:#111827;color:#f9fafb;border:1px solid rgba(255,255,255,0.15);"
        "padding:6px 10px;border-radius:8px;cursor:pointer;} "
        ".light #themeToggle{background:#e5e7eb;color:#111827;border-color:rgba(0,0,0,0.15);} "
    ),
) as demo:

    # Logo (make sure logo.png exists in your Space files)
    gr.Image(
        value="logo.png",
        show_label=False,
        interactive=False,
        elem_id="logoimg",
        height=180
    )

    gr.HTML(
        """
        <div style="text-align:center;">
            <button id="themeToggle" title="Toggle theme">🌙</button>

            <script>
              (function(){
                try{
                  var pref = localStorage.getItem('aiguruji_theme') || 'dark';
                  if(pref === 'light') document.documentElement.classList.add('light');
                  var btn = document.getElementById('themeToggle');
                  function setIcon(){
                    btn.textContent = document.documentElement.classList.contains('light') ? '☀️' : '🌙';
                  }
                  setIcon();
                  btn.onclick = function(){
                    document.documentElement.classList.toggle('light');
                    var isLight = document.documentElement.classList.contains('light');
                    localStorage.setItem('aiguruji_theme', isLight ? 'light' : 'dark');
                    setIcon();
                  };
                }catch(e){}
              })();
            </script>

            <div class="brand-title">AI Guruji</div>

            <div>
                <a href="https://www.youtube.com/@AI_Guruji_97" target="_blank"
                   style="display:inline-block;margin:8px;padding:8px 16px;border-radius:10px;
                          text-decoration:none;color:#fff;font-weight:700;
                          background:#ff3b30;box-shadow:0 4px 12px rgba(255,59,48,0.35);">
                   YouTube
                </a>

                <a href="https://buymeacoffee.com/bdas7906" target="_blank"
                   style="display:inline-block;margin:8px;padding:8px 16px;border-radius:10px;
                          text-decoration:none;color:#111827;font-weight:800;
                          background:#FFDD00;box-shadow:0 4px 12px rgba(255,221,0,0.35);">
                   Buy me a coffee
                </a>

                <a href="https://t.me/ai_guruji_97" target="_blank"
                   style="display:inline-block;margin:8px;padding:8px 16px;border-radius:10px;
                          text-decoration:none;color:#fff;font-weight:700;
                          background:#229ED9;box-shadow:0 4px 12px rgba(34,158,217,0.35);">
                   Telegram
                </a>
            </div>

            <div style="margin-top:30px;padding:22px;border-radius:14px;
                        background:rgba(255,255,255,0.05);
                        max-width:720px;margin-left:auto;margin-right:auto;">
                <h2>🚧 This Space Is Currently Not Working</h2>

                <p style="color:var(--muted);font-size:16px;line-height:1.6;">
                    This FaceFusion Space is temporarily unavailable.
                    Please visit our <b>updated and fully working FaceFusion Space</b>
                    using the link below.
                </p>

                <a href="https://huggingface.co/spaces/aiguruji97/facefusion"
                   target="_blank"
                   style="display:inline-block;margin-top:16px;
                          padding:12px 24px;border-radius:12px;
                          background:#22c55e;color:#022c22;
                          font-weight:800;text-decoration:none;
                          box-shadow:0 6px 16px rgba(34,197,94,0.35);">
                   👉 Go to Updated FaceFusion Space
                </a>
            </div>
        </div>
        """
    )

demo.launch()