import faicons as fa
import plotly.express as px

# Load data and compute static values
from shared import app_dir, bot_data
from shinywidgets import render_plotly

from shiny import reactive, render
from shiny.express import input, ui

data_rng = (min(bot_data.interactions), max(bot_data.interactions))

# Add page title and sidebar
ui.page_opts(title="MyBot Interactions", fillable=True)

with ui.sidebar(open="desktop"):
    ui.input_slider(
        "interactions",
        "Number of Interactions",
        min=data_rng[0],
        max=data_rng[1],
        value=data_rng,
    )
    ui.input_checkbox_group(
        "time_period",
        "Time Period",
        ["Morning", "Afternoon", "Evening", "Night"],
        selected=["Morning", "Afternoon", "Evening", "Night"],
        inline=True,
    )
    ui.input_action_button("reset", "Reset filter")

# Add main content
ICONS = {
    "user": fa.icon_svg("user", "regular"),
    "chat": fa.icon_svg("comments"),
    "interaction": fa.icon_svg("exchange-alt"),
    "ellipsis": fa.icon_svg("ellipsis"),
}

with ui.layout_columns(fill=False):
    with ui.value_box(showcase=ICONS["user"]):
        "Total Users"

        @render.express
        def total_users():
            bot_data_filtered().shape[0]

    with ui.value_box(showcase=ICONS["chat"]):
        "Average Interactions per User"

        @render.express
        def average_interactions():
            d = bot_data_filtered()
            if d.shape[0] > 0:
                avg_interactions = d.interactions.mean()
                f"{avg_interactions:.1f}"

    with ui.value_box(showcase=ICONS["interaction"]):
        "Total Interactions"

        @render.express
        def total_interactions():
            d = bot_data_filtered()
            if d.shape[0] > 0:
                total_interactions = d.interactions.sum()
                f"{total_interactions}"

with ui.layout_columns(col_widths=[6, 6, 12]):
    with ui.card(full_screen=True):
        ui.card_header("Interaction Data")

        @render.data_frame
        def table():
            return render.DataGrid(bot_data_filtered())

    with ui.card(full_screen=True):
        with ui.card_header(class_="d-flex justify-content-between align-items-center"):
            "Interactions Over Time"
            with ui.popover(title="Add a color variable", placement="top"):
                ICONS["ellipsis"]
                ui.input_radio_buttons(
                    "scatter_color",
                    None,
                    ["none", "user_type", "time_period"],
                    inline=True,
                )

        @render_plotly
        def scatterplot():
            color = input.scatter_color()
            return px.scatter(
                bot_data_filtered(),
                x="time",
                y="interactions",
                color=None if color == "none" else color,
                trendline="lowess",
            )

    with ui.card(full_screen=True):
        with ui.card_header(class_="d-flex justify-content-between align-items-center"):
            "Interaction Types"
            with ui.popover(title="Add a color variable"):
                ICONS["ellipsis"]
                ui.input_radio_buttons(
                    "interaction_type",
                    "Split by:",
                    ["user_type", "time_period"],
                    selected="user_type",
                    inline=True,
                )

        @render_plotly
        def interaction_types():
            from ridgeplot import ridgeplot

            dat = bot_data_filtered()
            yvar = input.interaction_type()
            uvals = dat[yvar].unique()

            samples = [[dat.interactions[dat[yvar] == val]] for val in uvals]

            plt = ridgeplot(
                samples=samples,
                labels=uvals,
                bandwidth=0.01,
                colorscale="viridis",
                colormode="row-index",
            )

            plt.update_layout(
                legend=dict(
                    orientation="h", yanchor="bottom", y=1.02, xanchor="center", x=0.5
                )
            )

            return plt

ui.include_css(app_dir / "styles.css")

# --------------------------------------------------------
# Reactive calculations and effects
# --------------------------------------------------------

@reactive.calc
def bot_data_filtered():
    interactions = input.interactions()
    idx1 = bot_data.interactions.between(interactions[0], interactions[1])
    idx2 = bot_data.time_period.isin(input.time_period())
    return bot_data[idx1 & idx2]

@reactive.effect
@reactive.event(input.reset)
def _():
    ui.update_slider("interactions", value=data_rng)
    ui.update_checkbox_group("time_period", selected=["Morning", "Afternoon", "Evening", "Night"])