import gradio as gr

from core import upscale_image, upscale_video

# ─────────────────────────────────────────────
# Gradio UI
# ─────────────────────────────────────────────
CSS = """
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

:root {
    --bg: #0a0a0f;
    --surface: #111118;
    --border: #1e1e2e;
    --accent: #7c3aed;
    --accent2: #06b6d4;
    --text: #e2e8f0;
    --muted: #64748b;
}

body, .gradio-container {
    background: var(--bg) !important;
    font-family: 'Syne', sans-serif !important;
    color: var(--text) !important;
}

h1 { 
    font-size: 2.5rem !important; 
    font-weight: 800 !important;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding: 1rem 0;
}

.tab-nav button {
    font-family: 'Space Mono', monospace !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    padding: 8px 20px !important;
}

.tab-nav button.selected {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

.gr-button-primary {
    background: linear-gradient(135deg, #7c3aed, #06b6d4) !important;
    border: none !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

footer { display: none !important; }
"""

with gr.Blocks(css=CSS, title="4K Upscaler Pro") as demo:
    gr.Markdown("# ⬆ 4K Upscaler Pro")
    gr.Markdown(
        "<p style='text-align:center; color:#64748b; font-family:Space Mono,monospace'>"
        "AI-powered image & video upscaling • Up to 4K resolution • REST API available"
        "</p>"
    )

    with gr.Tabs():
        # ── IMAGE TAB ──
        with gr.TabItem("🖼 Image Upscaler"):
            with gr.Row():
                with gr.Column():
                    img_input = gr.Image(type="filepath", label="Upload Image")
                    img_method = gr.Radio(
                        ["Real-ESRGAN (AI)", "Lanczos (Fast)"],
                        value="Lanczos (Fast)",
                        label="Upscaling Method",
                    )
                    img_target = gr.Dropdown(
                        [
                            "4K (3840×2160)",
                            "2K (2560×1440)",
                            "1080p (1920×1080)",
                            "2x Original",
                        ],
                        value="4K (3840×2160)",
                        label="Target Resolution",
                    )
                    img_btn = gr.Button("⬆ Upscale Image", variant="primary")
                with gr.Column():
                    img_output = gr.Image(label="Upscaled Image")
                    img_info = gr.Textbox(label="Info", interactive=False)
                    img_download = gr.File(label="⬇ Download PNG")

            img_btn.click(
                upscale_image,
                inputs=[img_input, img_method, img_target],
                outputs=[img_output, img_info, img_download],
            )

        # ── VIDEO TAB ──
        with gr.TabItem("🎬 Video Upscaler"):
            with gr.Row():
                with gr.Column():
                    vid_input = gr.Video(label="Upload Video")
                    vid_method = gr.Radio(
                        ["Real-ESRGAN (AI)", "Lanczos (Fast)"],
                        value="Lanczos (Fast)",
                        label="Upscaling Method",
                    )
                    vid_target = gr.Dropdown(
                        [
                            "4K (3840×2160)",
                            "2K (2560×1440)",
                            "1080p (1920×1080)",
                            "2x Original",
                        ],
                        value="4K (3840×2160)",
                        label="Target Resolution",
                    )
                    vid_btn = gr.Button("⬆ Upscale Video", variant="primary")
                with gr.Column():
                    vid_output = gr.Video(label="Upscaled Video")
                    vid_info = gr.Textbox(label="Info", interactive=False)

            vid_btn.click(
                upscale_video,
                inputs=[vid_input, vid_method, vid_target],
                outputs=[vid_output, vid_info],
            )

        # ── API DOCS TAB ──
        with gr.TabItem("📡 API Docs"):
            gr.Markdown("""
## REST API — Use from n8n, curl, or any HTTP client

Hugging Face Spaces expose a built-in API automatically via the `/api/predict` endpoint.

---

### 🖼 Image Upscaling API

**POST** `https://<your-username>-4k-upscaler.hf.space/api/predict`

```json
{
  "data": [
    "<base64_image_string>",
    "Lanczos (Fast)",
    "4K (3840×2160)"
  ]
}
```

**Response:**
```json
{
  "data": [
    "<base64_upscaled_image>",
    "✅ Upscaled: 1280×720 → 3840×2160",
    "<download_url>"
  ]
}
```

---

### 🎬 Video Upscaling API

**POST** `https://<your-username>-4k-upscaler.hf.space/api/predict`

Use fn_index: 1 for video endpoint.

```json
{
  "fn_index": 1,
  "data": [
    "<video_file_url_or_base64>",
    "Lanczos (Fast)",
    "4K (3840×2160)"
  ]
}
```

---

### 🔗 n8n Integration

Use the **HTTP Request** node in n8n:
- **Method:** POST
- **URL:** `https://<your-username>-4k-upscaler.hf.space/api/predict`
- **Body:** JSON with `data` array (see above)
- **Headers:** `Content-Type: application/json`

For authenticated spaces, add:
- **Header:** `Authorization: Bearer <your_HF_token>`
            """)

# Launch
if __name__ == "__main__":
    demo.queue(max_size=5).launch()