import gradio as gr
import pandas as pd
from datetime import datetime

# --- CUSTOM CSS FOR SOOTHING UI ---
custom_css = """
.gradio-container {
    background-color: #f0f7f9 !important;
    font-family: 'Inter', sans-serif !important;
}
.main-header {
    text-align: center;
    color: #0077b6;
    margin-bottom: 20px;
}
.promo-card {
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    text-align: center;
}
.hotel-card {
    border-radius: 12px !important;
    border: 1px solid #e0e0e0 !important;
    background: white !important;
    transition: all 0.3s ease;
}
.hotel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
footer {display: none !important;}
"""

# --- DATA ---
data = {
    "🏨 Hotel Name": ["Coral Reef View", "Male Grand Stay", "Villi Blue Inn"],
    "📍 Location": ["Hulhumale Phase 1", "Male' City", "Villingili"],
    "💰 Price/Night": ["850 MVR", "1,100 MVR", "650 MVR"],
    "✅ Status": ["Available", "Available", "Occupied"],
    "📞 Direct Contact": ["+960 7771234", "+960 7785678", "+960 7799101"]
}
df = pd.DataFrame(data)

# --- FUNCTIONS ---
def send_deal(hotel, msg):
    if not msg: return gr.update(visible=False), ""
    time_now = datetime.now().strftime("%H:%M")
    alert_html = f"""
    <div class='promo-card'>
        <p style='font-size: 1.2em; margin: 0;'>🔥 <b>FLASH DEAL</b> from {hotel}</p>
        <p style='font-size: 1.5em; font-weight: bold; margin: 10px 0;'>"{msg}"</p>
        <p style='font-size: 0.8em; opacity: 0.8;'>Posted at {time_now} • Valid for tonight only</p>
    </div>
    """
    return gr.update(value=alert_html, visible=True), "✅ Promotion sent to all users!"

# --- UI LAYOUT ---
with gr.Blocks(css=custom_css, title="Hulhumale Room Finder") as demo:
    
    # Header Section
    gr.HTML("<div class='main-header'><h1>🏝️ Hulhumale Direct</h1><p>Real-time rooms in Male', Hulhumale & Villingili</p></div>")
    
    # Active Promotion Area (Hidden by default)
    promo_display = gr.HTML(visible=False)
    
    with gr.Tabs() as tabs:
        
        # --- TRAVELER TAB ---
        with gr.Tab("🔍 Find a Room"):
            with gr.Row():
                filter_loc = gr.Radio(["All", "Male' City", "Hulhumale", "Villingili"], value="All", label="Filter by Island")
            
            room_table = gr.DataFrame(
                value=df,
                interactive=False,
                elem_classes="hotel-card"
            )
            
            with gr.Row():
                gr.Markdown("ℹ️ **How to book:** Copy the number and call/Viber the owner directly. No commission fees!")
                refresh_btn = gr.Button("🔄 Refresh Availability", size="sm")

        # --- OWNER TAB ---
        with gr.Tab("⚙️ Hotel Dashboard"):
            gr.Markdown("### 🔑 Client Portal (350 MVR/mo)")
            
            with gr.Row():
                with gr.Column(scale=1):
                    owner_hotel = gr.Dropdown(choices=list(data["🏨 Hotel Name"]), label="Your Property")
                    new_status = gr.Radio(["Available", "Occupied"], label="Current Status")
                    update_price = gr.Textbox(label="Tonight's Price (MVR)", placeholder="e.g. 750")
                    update_btn = gr.Button("💾 Update Live Listing", variant="secondary")
                
                with gr.Column(scale=1):
                    gr.Markdown("### 📣 Marketing Tools")
                    promo_text = gr.Textbox(placeholder="e.g. 15% off for airport arrivals!", label="Flash Promotion Message")
                    promo_btn = gr.Button("🚀 Blast Notification", variant="primary")
                    status_msg = gr.Markdown("")

    # --- LOGIC ---
    promo_btn.click(send_deal, inputs=[owner_hotel, promo_text], outputs=[promo_display, status_msg])
    
    gr.HTML("<div style='text-align:center; margin-top:50px; opacity:0.5;'><p>Reliable Local App Concept © 2024</p></div>")

demo.launch()