"""
app.py
------
Streamlit entry point for the Pothole Detection web app.

Run with:
    conda activate pothole_env
    streamlit run app.py
"""

import streamlit as st

# ── Page config — MUST be the first Streamlit call ────────────────────────────
st.set_page_config(
    page_title="APDS | Automated Pavement Distress System",
    page_icon="🏗️",
    layout="wide",
    initial_sidebar_state="expanded",
    menu_items={
        "Get Help": None,
        "Report a bug": None,
        "About": (
            "**Automated Pavement Distress System (APDS)**\n\n"
            "An AI-based diagnostic tool for road maintenance.\n"
            "Powered by YOLOv11 · Smartathon 2024 Project\n"
            "11,962 training images · mAP50 up to 74.1%"
        ),
    },
)

# ── Custom CSS ────────────────────────────────────────────────────────────────
st.markdown(
    """
    <style>
    /* ─── Global fonts & background ─────────────────────────────────────── */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    html, body, [class*="css"] {
        font-family: 'Inter', sans-serif;
    }

    /* ─── Hide default Streamlit chrome ─────────────────────────────────── */
    #MainMenu { visibility: hidden; }
    footer     { visibility: hidden; }
    header     { visibility: hidden; }

    /* ─── Sidebar ────────────────────────────────────────────────────────── */
    [data-testid="stSidebar"] {
        background: linear-gradient(160deg, #0f0f1a 0%, #1a1a2e 100%);
        border-right: 1px solid rgba(255,255,255,0.07);
    }

    /* ─── Metric cards ───────────────────────────────────────────────────── */
    [data-testid="stMetric"] {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 16px;
    }
    [data-testid="stMetricValue"] {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
    }

    /* ─── Tabs ───────────────────────────────────────────────────────────── */
    .stTabs [data-baseweb="tab-list"] {
        gap: 6px;
        border-bottom: 2px solid rgba(255,255,255,0.08);
    }
    .stTabs [data-baseweb="tab"] {
        border-radius: 8px 8px 0 0;
        padding: 8px 20px;
        font-weight: 600;
    }

    /* ─── Buttons ────────────────────────────────────────────────────────── */
    .stButton > button, .stDownloadButton > button {
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .stButton > button:hover, .stDownloadButton > button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(79, 172, 254, 0.35);
    }

    /* ─── File uploader ──────────────────────────────────────────────────── */
    [data-testid="stFileUploadDropzone"] {
        border-radius: 12px;
        border: 2px dashed rgba(79, 172, 254, 0.4);
        background: rgba(79, 172, 254, 0.04);
        transition: border-color 0.2s;
    }
    [data-testid="stFileUploadDropzone"]:hover {
        border-color: rgba(79, 172, 254, 0.8);
    }

    /* ─── Progress bar ───────────────────────────────────────────────────── */
    .stProgress > div > div > div > div {
        background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
        border-radius: 100px;
    }

    /* ─── Divider ────────────────────────────────────────────────────────── */
    hr {
        border-color: rgba(255,255,255,0.07) !important;
        margin: 18px 0 !important;
    }

    /* ─── Slider ─────────────────────────────────────────────────────────── */
    [data-testid="stSlider"] > div > div > div > div {
        background: linear-gradient(90deg, #4facfe, #00f2fe);
    }
    </style>
    """,
    unsafe_allow_html=True,
)

# ── Import and render dashboard ───────────────────────────────────────────────
from apds import dashboard
dashboard.render()