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

# --- LUXURY CUSTOM CSS ---
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --gold: #D4AF37;
    --gold-dark: #B8941F;
    --navy: #0A1828;
    --navy-light: #1A2F42;
    --cream: #F8F6F0;
    --white: #FFFFFF;
    --shadow: rgba(10, 24, 40, 0.15);
    --shadow-heavy: rgba(10, 24, 40, 0.3);
}

.gradio-container {
    background: linear-gradient(135deg, #0A1828 0%, #1A2F42 50%, #0A1828 100%) !important;
    font-family: 'Montserrat', sans-serif !important;
    position: relative;
    overflow-x: hidden;
}

.gradio-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Header Styling */
.luxury-header {
    text-align: center;
    padding: 60px 20px 40px;
    position: relative;
    z-index: 1;
}

.luxury-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 4.5em !important;
    font-weight: 300 !important;
    color: var(--cream) !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    animation: fadeInDown 1s ease-out;
}

.luxury-header .subtitle {
    font-size: 1.1em;
    color: var(--gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 10px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.luxury-header .divider {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 25px auto;
    animation: expandWidth 1.2s ease-out 0.5s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 100px;
    }
}

/* Promotion Banner */
.promo-banner {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    color: var(--navy);
    padding: 35px;
    border-radius: 0;
    margin: 30px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px var(--shadow-heavy);
    animation: slideInFromTop 0.8s ease-out;
}

.promo-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.promo-banner .promo-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.promo-banner .promo-message {
    font-size: 2em;
    font-weight: 600;
    margin: 15px 0;
    font-family: 'Cormorant Garamond', serif;
}

.promo-banner .promo-time {
    font-size: 0.85em;
    opacity: 0.8;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Tab Styling */
.tabitem {
    background: rgba(248, 246, 240, 0.05) !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 40px !important;
    margin-top: 20px !important;
    backdrop-filter: blur(10px);
}

button.selected {
    background: var(--gold) !important;
    color: var(--navy) !important;
    font-weight: 600 !important;
    border: none !important;
    letter-spacing: 1px !important;
}

.tabs button {
    color: var(--cream) !important;
    font-size: 1em !important;
    padding: 15px 35px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.tabs button:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--gold) !important;
}

/* Hotel Cards - Luxury Table Styling */
.dataframe {
    background: var(--cream) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 50px var(--shadow-heavy) !important;
    font-family: 'Montserrat', sans-serif !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.dataframe thead {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%) !important;
}

.dataframe thead th {
    color: var(--gold) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 20px !important;
    font-size: 0.85em !important;
    border: none !important;
}

.dataframe tbody td {
    padding: 25px 20px !important;
    color: var(--navy) !important;
    font-size: 0.95em !important;
    border-bottom: 1px solid rgba(10, 24, 40, 0.08) !important;
    transition: all 0.3s ease;
}

.dataframe tbody tr {
    transition: all 0.3s ease;
}

.dataframe tbody tr:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    transform: scale(1.01);
}

/* Input Styling */
.gr-box,
input,
textarea,
select {
    background: rgba(248, 246, 240, 0.95) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--navy) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-family: 'Montserrat', sans-serif !important;
}

.gr-box:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
    outline: none !important;
}

label {
    color: var(--cream) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.85em !important;
    margin-bottom: 8px !important;
}

/* Radio Buttons */
.gr-radio {
    background: transparent !important;
}

.gr-radio label {
    color: var(--cream) !important;
    padding: 12px 20px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 8px !important;
    margin: 5px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

.gr-radio label:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: var(--gold) !important;
}

.gr-radio input:checked + label {
    background: var(--gold) !important;
    color: var(--navy) !important;
    border-color: var(--gold) !important;
    font-weight: 600 !important;
}

/* Buttons */
.gr-button {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%) !important;
    color: var(--navy) !important;
    border: none !important;
    padding: 15px 35px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: 8px !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
    font-size: 0.9em !important;
    position: relative !important;
    overflow: hidden !important;
}

.gr-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gr-button:hover::before {
    width: 300px;
    height: 300px;
}

.gr-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5) !important;
}

.gr-button-secondary {
    background: transparent !important;
    border: 2px solid var(--gold) !important;
    color: var(--gold) !important;
}

.gr-button-secondary:hover {
    background: var(--gold) !important;
    color: var(--navy) !important;
}

/* Info Box */
.info-box {
    background: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--gold);
    padding: 20px 25px;
    border-radius: 0 8px 8px 0;
    color: var(--cream);
    margin: 20px 0;
    font-size: 0.95em;
    line-height: 1.6;
    backdrop-filter: blur(5px);
}

.info-box strong {
    color: var(--gold);
    font-weight: 600;
}

/* Dashboard Cards */
.dashboard-section {
    background: rgba(248, 246, 240, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
}

.dashboard-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8em;
    color: var(--gold);
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.dashboard-subtitle {
    color: var(--cream);
    opacity: 0.8;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Footer */
.luxury-footer {
    text-align: center;
    margin-top: 80px;
    padding: 40px 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    color: var(--cream);
    opacity: 0.6;
    font-size: 0.85em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Status Badge */
.status-available {
    color: #2ECC71;
    font-weight: 600;
}

.status-occupied {
    color: #E74C3C;
    font-weight: 600;
}

/* Markdown Styling */
.markdown-text {
    color: var(--cream) !important;
    line-height: 1.8 !important;
}

.markdown-text h3 {
    font-family: 'Cormorant Garamond', serif !important;
    color: var(--gold) !important;
    font-size: 1.6em !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
}

.markdown-text p {
    color: var(--cream) !important;
    opacity: 0.9 !important;
}

/* Success Message */
.success-message {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(46, 204, 113, 0.1) 100%);
    border: 1px solid rgba(46, 204, 113, 0.5);
    color: #2ECC71;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    animation: slideInFromRight 0.5s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .luxury-header h1 {
        font-size: 2.5em !important;
    }
    
    .promo-banner .promo-message {
        font-size: 1.4em;
    }
    
    .tabs button {
        padding: 12px 20px !important;
        font-size: 0.85em !important;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--navy);
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
}
"""

# --- ENHANCED DATA ---
data = {
    "🏨 Hotel Name": [
        "Coral Reef View Resort",
        "Male' Grand Stay Hotel",
        "Villi Blue Inn",
        "Azure Lagoon Suites",
        "Paradise Isle Boutique"
    ],
    "📍 Location": [
        "Hulhumale Phase 1",
        "Male' City Center",
        "Villingili Island",
        "Hulhumale Phase 2",
        "Male' Waterfront"
    ],
    "💰 Price/Night": [
        "850 MVR",
        "1,100 MVR",
        "650 MVR",
        "950 MVR",
        "1,250 MVR"
    ],
    "⭐ Rating": [
        "4.8/5.0",
        "4.6/5.0",
        "4.5/5.0",
        "4.9/5.0",
        "4.7/5.0"
    ],
    "✅ Status": [
        "Available",
        "Available",
        "Occupied",
        "Available",
        "Available"
    ],
    "📞 Direct Contact": [
        "+960 777-1234",
        "+960 778-5678",
        "+960 779-9101",
        "+960 780-2345",
        "+960 781-6789"
    ]
}
df = pd.DataFrame(data)

# --- FUNCTIONS ---
def filter_hotels(location):
    if location == "All":
        return df
    elif location == "Male' City":
        filtered = df[df["📍 Location"].str.contains("Male'", case=False, na=False)]
    elif location == "Hulhumale":
        filtered = df[df["📍 Location"].str.contains("Hulhumale", case=False, na=False)]
    elif location == "Villingili":
        filtered = df[df["📍 Location"].str.contains("Villingili", case=False, na=False)]
    else:
        filtered = df
    return filtered

def refresh_data():
    return df, "✨ Availability refreshed successfully!"

def send_promotion(hotel, message):
    if not hotel or not message:
        return gr.update(visible=False), "⚠️ Please select a hotel and enter a promotion message."
    
    time_now = datetime.now().strftime("%I:%M %p")
    date_now = datetime.now().strftime("%B %d, %Y")
    
    promo_html = f"""
    <div class='promo-banner'>
        <div class='promo-title'>⚡ Exclusive Flash Offer</div>
        <div class='promo-message'>{message}</div>
        <div style='margin: 15px 0; font-size: 1.1em; font-weight: 600;'>📍 {hotel}</div>
        <div class='promo-time'>Posted {time_now} • {date_now} • Valid Tonight Only</div>
    </div>
    """
    
    return gr.update(value=promo_html, visible=True), f"<div class='success-message'>✅ Promotion successfully broadcast to all users!</div>"

def update_listing(hotel, status, price):
    if not hotel:
        return "⚠️ Please select your property first."
    
    success_msg = f"""
    <div class='success-message'>
        ✅ <strong>{hotel}</strong> updated successfully!<br>
        Status: {status} | Price: {price} MVR/night
    </div>
    """
    return success_msg

# --- UI LAYOUT ---
with gr.Blocks(css=custom_css, title="Hulhumale Luxury Hotel Direct", theme=gr.themes.Base()) as demo:
    
    # Luxury Header
    gr.HTML("""
    <div class='luxury-header'>
        <h1>HULHUMALE DIRECT</h1>
        <div class='divider'></div>
        <div class='subtitle'>Luxury Accommodations • Direct Booking • Zero Commission</div>
    </div>
    """)
    
    # Promotion Display (Hidden by default)
    promo_display = gr.HTML(visible=False)
    
    with gr.Tabs() as tabs:
        
        # --- TRAVELER TAB ---
        with gr.Tab("🔍 Discover Your Stay"):
            
            gr.HTML("<div class='dashboard-section'>")
            
            with gr.Row():
                filter_location = gr.Radio(
                    choices=["All", "Male' City", "Hulhumale", "Villingili"],
                    value="All",
                    label="Filter by Destination",
                    elem_classes="location-filter"
                )
            
            room_table = gr.DataFrame(
                value=df,
                interactive=False,
                label="Available Properties",
                wrap=True
            )
            
            gr.HTML("""
            <div class='info-box'>
                <strong>🌟 How to Book:</strong> Contact hotels directly using the numbers listed above. 
                Speak with owners personally, negotiate rates, and enjoy commission-free bookings. 
                All properties are verified and family-operated.
            </div>
            """)
            
            with gr.Row():
                refresh_btn = gr.Button("🔄 Refresh Availability", variant="secondary", size="lg")
                refresh_status = gr.Markdown("")
            
            gr.HTML("</div>")

        # --- OWNER TAB ---
        with gr.Tab("⚙️ Property Management Portal"):
            
            gr.HTML("""
            <div class='dashboard-section'>
                <div class='dashboard-title'>Welcome to Your Dashboard</div>
                <div class='dashboard-subtitle'>Premium Client Portal • 350 MVR per Month</div>
            </div>
            """)
            
            with gr.Row():
                with gr.Column(scale=1):
                    gr.HTML("<div class='dashboard-section'>")
                    gr.Markdown("### 📊 Update Your Listing")
                    
                    owner_hotel = gr.Dropdown(
                        choices=list(data["🏨 Hotel Name"]),
                        label="Select Your Property",
                        value=None
                    )
                    
                    new_status = gr.Radio(
                        choices=["Available", "Occupied"],
                        label="Current Availability Status",
                        value="Available"
                    )
                    
                    update_price = gr.Textbox(
                        label="Tonight's Rate (MVR)",
                        placeholder="e.g., 850",
                        value=""
                    )
                    
                    update_btn = gr.Button("💾 Update Live Listing", variant="primary", size="lg")
                    update_status = gr.HTML("")
                    
                    gr.HTML("</div>")
                
                with gr.Column(scale=1):
                    gr.HTML("<div class='dashboard-section'>")
                    gr.Markdown("### 📣 Marketing & Promotions")
                    
                    gr.HTML("""
                    <div class='info-box'>
                        Broadcast instant promotions to all active users browsing the platform. 
                        Perfect for last-minute deals, early bird specials, or flash sales.
                    </div>
                    """)
                    
                    promo_hotel = gr.Dropdown(
                        choices=list(data["🏨 Hotel Name"]),
                        label="Property Name",
                        value=None
                    )
                    
                    promo_text = gr.Textbox(
                        label="Promotion Message",
                        placeholder="e.g., 20% OFF for airport arrivals before midnight!",
                        lines=3
                    )
                    
                    promo_btn = gr.Button("🚀 Broadcast Promotion", variant="primary", size="lg")
                    promo_status = gr.HTML("")
                    
                    gr.HTML("</div>")
    
    # --- EVENT HANDLERS ---
    filter_location.change(
        fn=filter_hotels,
        inputs=[filter_location],
        outputs=[room_table]
    )
    
    refresh_btn.click(
        fn=refresh_data,
        inputs=[],
        outputs=[room_table, refresh_status]
    )
    
    update_btn.click(
        fn=update_listing,
        inputs=[owner_hotel, new_status, update_price],
        outputs=[update_status]
    )
    
    promo_btn.click(
        fn=send_promotion,
        inputs=[promo_hotel, promo_text],
        outputs=[promo_display, promo_status]
    )
    
    # Luxury Footer
    gr.HTML("""
    <div class='luxury-footer'>
        <div style='margin-bottom: 10px;'>✦ ✦ ✦</div>
        Hulhumale Direct • Connecting Travelers With Local Hospitality Since 2024
        <div style='margin-top: 10px; font-size: 0.75em; opacity: 0.5;'>
            A Premium Local Marketplace
        </div>
    </div>
    """)

# Launch the app
if __name__ == "__main__":
    demo.launch(share=False)