import gradio as gr
from typing import Literal

# --- CONFIG ---
LOAD_SIGNATURE_LIMIT_MIN = 15
CRITICAL_TASK = "Water Pump"

def execute_autonomous_logic(
    power_source: Literal["Grid_ON", "Inverter_ON", "Grid_OFF"], 
    time_elapsed_min: float
):
    action = "IDLE"
    reason = "Awaiting command."
    status_color = "#000000"

    # RULE 1 — Battery Protection
    if power_source == "Inverter_ON":
        action = "SHUTDOWN_PUMP"
        reason = "CRITICAL FAILURE: Inverter detected. Protecting battery by shutting down pump."
        status_color = "#ff3b3b"

    # RULE 2 — Grid ON
    elif power_source == "Grid_ON":
        if time_elapsed_min < LOAD_SIGNATURE_LIMIT_MIN:
            action = "RUN_PUMP"
            remaining = LOAD_SIGNATURE_LIMIT_MIN - time_elapsed_min
            reason = f"AUTO-START: Grid ON. Running for {remaining:.1f} min."
            status_color = "#21c55d"
        else:
            action = "SHUTDOWN_PUMP"
            reason = f"LOAD SIGNATURE EXCEEDED: Ran more than {LOAD_SIGNATURE_LIMIT_MIN} min."
            status_color = "#facc15"

    # RULE 3 — Blackout
    else:
        action = "IDLE"
        reason = "Blackout detected. System idle."
        status_color = "#6b7280"

    # Output with internal color
    action_html = f"""
    <div style="font-size:22px; font-weight:900; color:{status_color};">
        COMMAND: {action}
    </div>
    """

    reason_html = f"""
    <div style="font-size:18px; font-weight:600; color:{status_color};">
        {reason}
    </div>
    """

    return action_html, reason_html, status_color


# --- NEW UNIQUE OUTPUT BOX STYLE + COLOURED TEXT ---
custom_css = """

/* MAIN BACKGROUND */
.gradio-container {
    background: linear-gradient(135deg, #ddeaff 0%, #ffffff 50%, #e9ffe9 100%);
    border-radius: 20px;
    padding: 30px !important;
}

/* TITLES */
h1, h2 {
    font-weight: 800 !important;
    text-align: center;
}

/* RADIO CARD STYLE */
.gr-radio div {
    border-radius: 16px !important;
    padding: 12px !important;
    background: #f8fbff !important;
    border: 2.7px solid #cce5ff !important;
    transition: 0.3s;
    margin-bottom: 7px !important;
}

.gr-radio div:hover {
    background: #e4f1ff !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 14px rgba(0, 120, 255, 0.25);
}

.gr-radio label {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* SLIDER BOX */
.gr-slider {
    background: #ffffff;
    padding: 14px;
    border-radius: 16px;
    border: 3px solid #e3e3f5;
    box-shadow: 0 5px 16px rgba(0,0,0,0.08);
}

/* SUPER BOLD BUTTONS */
button {
    background: linear-gradient(135deg, #4f46e5, #6b21a8) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    border: 4px solid #3a2bbf !important;
    transition: 0.25s !important;
    box-shadow: 0 6px 15px rgba(50, 0, 180, 0.35) !important;
}

button:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 12px 28px rgba(90, 0, 200, 0.55) !important;
}

/* 🔥 SPECIAL OUTPUT BOX WITH TEXTURE + COLOR */
.gr-html {
    border-radius: 20px !important;
    padding: 22px !important;

    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 50%, #eef6ff 100%) !important;

    border: 4px solid #d1ddff !important;
    box-shadow:
        inset 0 0 15px rgba(150,150,255,0.25),
        0 8px 18px rgba(0,0,0,0.08) !important;

    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

/* DEFAULT BUTTON STYLE (for clear/reset etc) */
button {
    background: linear-gradient(135deg, #4f46e5, #6b21a8) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    border: 4px solid #3a2bbf !important;
    transition: 0.25s !important;
    box-shadow: 0 6px 15px rgba(50, 0, 180, 0.35) !important;
}

/* ⭐ SPECIAL LIGHT COLORED FLAG (SUBMIT) BUTTON ⭐ */
button.primary {
    background: linear-gradient(135deg, #b3e5ff, #e1f6ff) !important;
    color: #003c5f !important;
    border: 3px solid #7ecaff !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 15px rgba(120, 180, 255, 0.45) !important;
}

button.primary:hover {
    transform: translateY(-4px) scale(1.04);
    background: linear-gradient(135deg, #d7f2ff, #f1fbff) !important;
    border-color: #55b8ff !important;
    box-shadow: 0 10px 26px rgba(120, 180, 255, 0.55) !important;
}

/* HIDE the HuggingFace 'Shareable link' button */
button#share-btn, 
#share-btn {
    display: none !important;
}

"""

# --- INTERFACE ---
iface = gr.Interface(
    fn=execute_autonomous_logic,
    inputs=[
        gr.Radio(
            ["Grid_ON", "Inverter_ON", "Grid_OFF"],
            label="🔌 Power Source Sensor"
        ),
        gr.Slider(
            0, 30, step=0.1,
            label="⏱ Time Elapsed (minutes)"
        )
    ],
    outputs=[
        gr.HTML(label="⚙️ PowerSense Command"),
        gr.HTML(label="📘 Reasoning Output"),
        gr.Textbox(visible=False)
    ],
    title="🌊 PowerSense AI — Autonomous Pump Controller",
    description="Smart logic engine with Load Signature + Battery Protection.",
    css=custom_css
)

iface.launch()