import streamlit as st
import pandas as pd
import folium
from streamlit_folium import st_folium
from datetime import datetime

# --- GEN Z DESIGN: CUSTOM CSS ---
st.set_page_config(page_title="Maldives Vessel Tracker", page_icon="🚢", layout="wide")

st.markdown("""
    <style>
    /* Maldivian Blue Gradient Header */
    .main {
        background: linear-gradient(135deg, #0077B6 0%, #00B4D8 50%, #90E0EF 100%);
        color: white;
    }
    .stApp {
        background-color: #f8f9fa;
    }
    .vessel-card {
        background: white;
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 15px;
        color: #333;
    }
    .status-badge {
        padding: 5px 12px;
        border-radius: 15px;
        font-size: 0.8em;
        font-weight: bold;
    }
    </style>
    """, unsafe_allow_html=True)

# --- MOCK DATA: CONNECTED TO YOUR ANDROID LOGIC ---
vessel_data = [
    {"id": 1, "name": "Aanu Quick", "type": "Speedboat", "status": "Live: On Time", "lat": 4.1755, "lon": 73.5093, "speed": "31 knots"},
    {"id": 2, "name": "Coral Express", "type": "Ferry", "status": "Delayed", "lat": 4.1910, "lon": 73.5200, "speed": "12 knots"},
    {"id": 3, "name": "Dhon Hiri", "type": "Dhoni", "status": "Live: On Time", "lat": 4.2100, "lon": 73.5350, "speed": "22 knots"},
    {"id": 4, "name": "Altec Dash", "type": "Speedboat", "status": "Scheduled", "lat": 4.1850, "lon": 73.5150, "speed": "0 knots"}
]
df = pd.DataFrame(vessel_data)

# --- HEADER ---
st.title("🌊 Maldives Vessel Tracker")
st.write(f"Last Synced with FollowMe: {datetime.now().strftime('%H:%M:%S')}")

# --- LAYOUT: MAP & LIST ---
col1, col2 = st.columns([2, 1])

with col1:
    st.subheader("📍 Live Fleet Map")
    # Modern Map centered on Male'
    m = folium.Map(location=[4.1850, 73.5150], zoom_start=13, tiles="CartoDB positron")
    
    for _, boat in df.iterrows():
        color = "green" if "On Time" in boat["status"] else "orange" if "Delayed" in boat["status"] else "gray"
        folium.Marker(
            [boat["lat"], boat["lon"]],
            popup=f"<b>{boat['name']}</b><br>Speed: {boat['speed']}",
            icon=folium.Icon(color=color, icon="ship", prefix="fa")
        ).add_to(m)
    
    st_folium(m, width="100%", height=500)

with col2:
    st.subheader("🚢 Vessel List")
    search = st.text_input("Search (e.g. 'Aanu')", "")
    
    for _, boat in df.iterrows():
        if search.lower() in boat["name"].lower():
            with st.container():
                st.markdown(f"""
                <div class="vessel-card">
                    <h3 style="margin:0;">{boat['name']}</h3>
                    <p style="color:gray; margin-bottom:10px;">{boat['type']} • {boat['speed']}</p>
                    <span class="status-badge" style="background:#e1f5fe; color:#01579b;">{boat['status']}</span>
                </div>
                """, unsafe_allow_html=True)
                if st.button(f"Pay 50 MVR for {boat['name']}", key=boat['id']):
                    st.balloons()
                    st.success("Payment successful! 🎫")

# --- FOOTER ---
st.divider()
st.info("💡 Note: This is a web preview. For the full experience with real-time push notifications, download the Android APK.")