import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(
    __name__,
    use_pages=True, 
    external_stylesheets=[dbc.themes.DARKLY, dbc.icons.BOOTSTRAP],
    suppress_callback_exceptions=True
)

server = app.server

# 3D Top Navbar - Icon Only Branding
header = dbc.Navbar(
    dbc.Container([
        # Branding: Shield Icon with a glowing tile effect
        html.A(
            html.Div([
                html.I(className="bi bi-shield-lock-fill fs-2", style={"color": "#00d2ff"})
            ], style={
                "width": "50px", "height": "50px", 
                "display": "flex", "alignItems": "center", "justifyContent": "center",
                "background": "rgba(255,255,255,0.05)", 
                "borderRadius": "12px",
                "boxShadow": "0 0 20px rgba(0, 210, 255, 0.4)",
                "border": "1px solid rgba(0, 210, 255, 0.2)"
            }),
            href="/", style={"textDecoration": "none"}
        ),
        
        # Horizontal Navigation
        dbc.Nav([
            dbc.NavLink([html.I(className="bi bi-info-circle me-2"), "Introduction"], href="/", active="exact", className="nav-link-custom"),
            dbc.NavLink([html.I(className="bi bi-speedometer2 me-2"), "Performance"], href="/performance", active="exact", className="nav-link-custom"),
            dbc.NavLink([html.I(className="bi bi-robot me-2"), "Risk Detector"], href="/detector", active="exact", className="nav-link-custom"),
            dbc.NavLink([html.I(className="bi bi-graph-up-arrow me-2"), "Analytics"], href="/analytics", active="exact", className="nav-link-custom"),
        ], navbar=True, className="ms-auto")
    ], fluid=True), # Fluid=True is key for full width
    className="custom-header sticky-top",
    dark=True
)

# 3D Footer
footer = html.Footer(
    dbc.Container([
        html.P([
            "© 2026 ", html.Span("CODE213", className="text-success fw-bold"),
            " — ADVANCED FRAUD DETECTION ENGINE"
        ], className="text-center m-0 fs-5 text-white-50")
    ], fluid=True),
    className="custom-footer mt-auto"
)

app.layout = html.Div([
    html.Div(className="bg-glow"),
    html.Div(className="bg-glow-alt"),
    header,
    
    # Main content container set to fluid
    html.Div([
        dash.page_container 
    ], className="content-container-fluid"),
    
    footer
], style={
    "display": "flex", 
    "flexDirection": "column", 
    "minHeight": "100vh",
    "backgroundColor": "#08090c"
})

if __name__ == "__main__":
    app.run(debug=True)