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;
}

/* Tab styling - no borders, only blue underline for active tabs */
.gradio-container .tab-nav button,
.gradio-container button[role="tab"],
.gradio-container .tabs button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
}

.gradio-container .tab-nav button[aria-selected="true"],
.gradio-container .tab-nav button.selected,
.gradio-container button[role="tab"][aria-selected="true"],
.gradio-container button[role="tab"].selected {
    background-color: transparent !important;
    background: transparent !important;
    color: #667eea !important;
    border: none !important;
    border-bottom: 2px solid #667eea !important;
}

.gradio-container .tabs button[aria-selected="true"],
.gradio-container .tabs button.selected {
    background-color: transparent !important;
    background: transparent !important;
    color: #667eea !important;
    border: none !important;
    border-bottom: 2px solid #667eea !important;
}

/* Hover state for tabs - subtle blue text */
.gradio-container .tab-nav button:hover,
.gradio-container button[role="tab"]:hover,
.gradio-container .tabs button:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: #5a6fd8 !important;
    border: none !important;
}

/* Specific targeting for tab icons and active states */
.gradio-container [data-testid="tab"] button[aria-selected="true"],
.gradio-container .tab button[aria-selected="true"],
.gradio-container [role="tablist"] button[aria-selected="true"] {
    background-color: transparent !important;
    background: transparent !important;
    color: #667eea !important;
    border: none !important;
    border-bottom: 2px solid #667eea !important;
}

/* Ensure all tab buttons are visible */
.gradio-container [data-testid="tab"] button,
.gradio-container .tab button,
.gradio-container [role="tablist"] button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    display: block !important;
    visibility: visible !important;
}

/* Override orange primary colors globally */
.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;
    --color-accent: #667eea !important;
    --color-accent-soft: #667eea !important;
}

/* Button styling - comprehensive coverage */
.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;
}

/* Force override for any remaining orange elements */
.gradio-container button[style*="background"],
.gradio-container .gr-button[style*="background"],
.gradio-container [style*="orange"],
.gradio-container [class*="orange"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
    color: white !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()