import gradio as gr
import os

# CSS to change orange UI elements to blue
blue_ui_css = """
/* Change orange checkboxes and radio buttons to blue */
.gradio-container input[type="checkbox"]:checked,
.gradio-container .gr-checkbox input:checked + .checkmark,
.gradio-container .gr-checkboxgroup input:checked + .checkmark {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

.gradio-container input[type="radio"]:checked,
.gradio-container .gr-radio input:checked + .checkmark,
.gradio-container .gr-radio input:checked::before {
    background-color: #667eea !important;
    border-color: #667eea !important;
}

/* Override any orange accent colors */
.gradio-container .gr-checkbox input:checked,
.gradio-container .gr-checkboxgroup input:checked,
.gradio-container .gr-radio input:checked {
    accent-color: #667eea !important;
}

/* Target specific Gradio checkbox styling */
.gradio-container label input[type="checkbox"]:checked::before,
.gradio-container label input[type="radio"]:checked::before {
    background-color: #667eea !important;
}

/* Comprehensive button styling to override orange buttons */
.gradio-container button,
.gradio-container .gr-button,
.gradio-container input[type="button"],
.gradio-container input[type="submit"],
.gradio-container .btn,
.gradio-container [role="button"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
    border-color: #667eea !important;
    color: white !important;
    border: 1px solid #667eea !important;
}

.gradio-container button:hover,
.gradio-container .gr-button:hover,
.gradio-container input[type="button"]:hover,
.gradio-container input[type="submit"]:hover,
.gradio-container .btn:hover,
.gradio-container [role="button"]:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%) !important;
    background-color: #5a6fd8 !important;
    border-color: #5a6fd8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.gradio-container button:active,
.gradio-container .gr-button:active,
.gradio-container input[type="button"]:active,
.gradio-container input[type="submit"]:active,
.gradio-container .btn:active,
.gradio-container [role="button"]:active {
    background: linear-gradient(135deg, #4e5bc6 0%, #5e397e 100%) !important;
    background-color: #4e5bc6 !important;
    border-color: #4e5bc6 !important;
    transform: translateY(0) !important;
}

/* Primary button variants */
.gradio-container button.primary,
.gradio-container .gr-button.primary,
.gradio-container button[data-variant="primary"],
.gradio-container .primary,
.gradio-container .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
    border-color: #667eea !important;
    color: white !important;
}

/* Secondary button variants */
.gradio-container button.secondary,
.gradio-container .gr-button.secondary,
.gradio-container button[data-variant="secondary"],
.gradio-container .secondary,
.gradio-container .btn-secondary {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

/* Stop/danger button variants */
.gradio-container button.stop,
.gradio-container .gr-button.stop,
.gradio-container button[data-variant="stop"],
.gradio-container .stop,
.gradio-container .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: white !important;
}

/* Override any remaining orange colors */
.gradio-container * {
    --primary-color: #667eea !important;
    --primary-600: #667eea !important;
    --primary-500: #667eea !important;
    --primary-400: #667eea !important;
    --orange-500: #667eea !important;
    --orange-600: #667eea !important;
}

/* Force override for stubborn orange buttons */
.gradio-container button[style*="background"],
.gradio-container .gr-button[style*="background"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
}
"""

SPACE_REPO_ID = "IneqMath/IneqMath_Judge_Private"

hf_token = os.environ.get("HF_TOKEN")
if not hf_token:
    try:
        import getpass
        hf_token = getpass.getpass("Enter your Hugging Face token (input hidden): ")
    except Exception:
        hf_token = input("Enter your Hugging Face token: ")

if not hf_token:
    print("[ERROR] Hugging Face token is required. Set HF_TOKEN env variable or enter it when prompted.")
    exit(1)

remote_space = None
load_error = None
try:
    remote_space = gr.load(f"spaces/{SPACE_REPO_ID}", hf_token=hf_token)
except Exception as e:
    load_error = str(e)
    print(f"[ERROR] Failed to load remote Space: {load_error}")

with gr.Blocks(css=blue_ui_css) as demo:
    if remote_space is not None:
        remote_space.render()
    else:
        gr.Markdown(f"**Failed to load remote Space.**\n\nError: {load_error}")

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