import gradio as gr

# from mistralai import Mistral, UserMessage
from chatbot_gaia.src.main_flow import kickoff
import pandas as pd


import os
from func_utils import *


def go_to_page_1():
    return gr.Column(visible=True), gr.Column(visible=False)


with gr.Blocks() as demo:
    with gr.Row():
        page_1 = gr.Column(visible=True)
        with page_1:
            gr.HTML(
                """
                <style>
                    .gradio-container {
                        background-color: #FFFFFF;
                        color: #000000;
                    },
                    .font-color{
                        color: #000000;
                    }
                    .white-background {
                        background-color: #FFFFFF !important;
                    }
                    .card {
                        background-color: #FFFFFF !important;
                        border: solid 1px;
                        border-radius: 10px;
                        border-color: #000000;
                        display: flex;
                        align-content: center;
                        padding: 20px;
                    }
                    .box {
                        background-color: #FFFFFF !important;
                        # border-radius: 10px;
                        display: flex;
                        align-content: center;
                        padding: 20px;
                    }
                    .result-page {
                        background-color: #FFFFFF !important;
                        border-radius: 10px;
                        display: flex;
                        align-content: center;
                        padding: 20px;
                        border: solid 1px;
                        border-color: #000000;
                    }
                    .selected.svelte-1tcem6n.svelte-1tcem6n {
                        color: #28C896;
                        border-bottom-color: #28C896;
                    }
                    .selected.svelte-1tcem6n.svelte-1tcem6n:after {
                        background-color: #28C896;
                    }
                    button.svelte-1tcem6n.svelte-1tcem6n {
                        color: #000000 !important;
                        border-radius: 20px;
                    }
                    p {
                        color: #000000 !important;
                    }
                    .tab {
                        color: #28C896;
                    }
                    .adress-card {
                        background-color: #FFFFFF !important;
                        color: #000000;
                    }
                    span.svelte-1gfkn6j {
                        color: #000000 !important;
                    }
                    span.has-info.svelte-1gfkn6j { 
                        color: #000000 !important;
                    }
                    textarea.svelte-173056l.svelte-173056l {
                        background-color: #FFFFFF !important;
                    }
                    .culture_box {
                        background-color: #52525b;
                        border-radius: 10px;
                        display: flex;
                        align-content: center;
                    }
                    .summary {
                        border: solid 1px;
                        border-radius: 10px;
                        padding: 20px;
                    }
                    .padding.svelte-phx28p{
                        padding: 0px;
                    }
                    .ok-button {
                        background-color: #28C896;
                        width: 200px !important;
                        border-radius: 20px;
                    }
                    .back-button {
                        background-color: #FFFFFF;
                        width: 200px !important;
                        border-radius: 20px;
                    }
                    .secondary.svelte-1ixn6qd {
                        background: linear-gradient(#28C896, #96E600);
                        color: #FFFFFF;
                        border-radius: 40px;
                        width: 200px !important;
                    }
                    input[type=number].svelte-7ha85a.svelte-7ha85a {
                        background-color: #FFFFFF;
                        color: #000000 !important;
                    }
                    .culture-box {
                        background-color: #FFFFFF;
                        color: #000000 !important;
                    }
                    .block.svelte-11xb1hd{
                        background-color: #FFFFFF !important;
                        color: #000000 !important;
                    }
                    .culture_box {
                        background-color: #FFFFFF !important;
                        color: #000000 !important;
                    }
                    .wrap.svelte-1hfxrpf.svelte-1hfxrpf {
                        background-color: #FFFFFF !important;
                        color: #000000 !important;
                    }
                    input.svelte-1hfxrpf.svelte-1hfxrpf {
                        background-color: #FFFFFF !important;
                        color: #000000 !important;
                    }
                    .svelte-1hfxrpf{
                        background-color: #FFFFFF !important;
                        color: #000000 !important;
                    }
                    button.svelte-1tcem6n.svelte-1tcem6n:hover:not(:disabled):not(.selected) {
                        background-color: #28C896;
                    }
                    textarea.svelte-173056l.svelte-173056l {
                        color: #000000 !important;
                    }
                    .primary.svelte-1ixn6qd{
                        background: #FFFFFF;
                        color: #000000;
                        border-radius: 40px;
                        width: 200px !important;
                        border: solid 1px;
                        border-color: #000000;
                    }
                    .primary.svelte-1ixn6qd:hover,.primary[disabled].svelte-1ixn6qd {
                        background: #3f3f46;
                    }
                    .primary.svelte-1ixn6qd:hover {
                        border-color: #000000;
                        border-shadow:  #000000;
                    }
                    .secondary.svelte-1ixn6qd:hover,.secondary[disabled].svelte-1ixn6qd {
                        background: var(--button-secondary-background-fill-hover);
                        color: var(--button-secondary-text-color-hover)
                    }
                    h3 {
                        color:black !important;
                    }
                    h4 {
                        color:black !important;
                    }
                    ul {
                        color:black !important;
                    }
                    li {
                        color:black !important;
                    }
                    strong {
                        color:black !important;
                    }
                    .options.svelte-y6qw75 {
                        background-color: #FFFFFF;
                        border-color: #000000;
                    }
                    .item.svelte-y6qw75:hover,.active.svelte-y6qw75 {
                        background: #c0c0c0;
                    }

                </style>
                """
            )
            demo.title = "Démo GAIA - Les bénéfices de l'ombrage"
            gr.HTML(
                "<h1 style='text-align: center; color: #000000; font-size:xx-large'>Les bénéfices de l'ombrage</h1>"
            )
            gr.HTML(
                "<p style='color: #000000; font-size:x-large; font-weight: 700'>Découvrez le potentiel de l'ombrage sur votre exploitation !</p>"
            )

            with gr.Blocks() as infos:

                infos.title = "Informations sur votre exploitation"
                gr.HTML(
                    "<h2 style='color: #000000'>Renseignez les informations relatives à votre projet</h2>"
                )
                with gr.Row(equal_height=True):
                    with gr.Column(
                        variant="panel", scale=1, elem_classes=["white-background"]
                    ):
                        with gr.Row(equal_height=True, elem_classes=["card"]):
                            with gr.Tab(label="Adresse", scale=1, elem_classes="tab"):
                                address = gr.Textbox(
                                    label="Addresse",
                                    placeholder="Entrez une adresse",
                                    elem_classes=["adress-card"],
                                )
                            with gr.Tab(label="Coordonnées GPS", scale=1):
                                lat = gr.Number(
                                    label="Latitude", elem_classes=["white-background"]
                                )
                                lon = gr.Number(
                                    label="Longitude", elem_classes=["white-background"]
                                )
                            place_btn = gr.Button(
                                value="Valider la localisation",
                                size="md",
                                elem_classes=["ok-button"],
                            )
                            place_cancel_btn = gr.Button(
                                value="Réinitialiser la localisation",
                                size="md",
                                elem_classes=["back-button"],
                                variant="primary",
                            )

                        with gr.Row(elem_classes=["card"]):
                            culture = gr.Dropdown(
                                label="Culture",
                                scale=1,
                                elem_classes="culture_box",
                                choices=[
                                    "Blé tendre d'hiver",
                                    "Colza d'hiver",
                                    "Orge d'hiver",
                                ],
                            )

                    with gr.Column(variant="panel", scale=3):
                        map = gr.HTML()

                simulation_btn = gr.Button(
                    value="Lancer la simulation", size="md", elem_classes=["ok-button"]
                )
                gr.HTML(
                    "<p style='font-size:small;'>* Quand vous lancez une simulation, soyez patient: on calcule pour vous...</p>"
                )


            go_to_page_2_btn = gr.Button(
                "Aller aux résultats",
                visible=False,
                elem_classes=["ok-button"],
                variant="primary",
            )

        page_2 = gr.Column(visible=False)
        with page_2:
            with gr.Blocks() as results:
                gr.HTML(
                    "<h2 style='padding: 30px; color: #000000'>Résultats de la simulation : les conséquences du changement climatique pour l'exploitation jusqu'en 2099</h2>"
                )
                go_to_page_1_btn = gr.Button(
                    value="Retour",
                    size="md",
                    elem_classes=["back-button"],
                    variant="primary",
                )
                with gr.Row(equal_height=True, elem_classes="result-page"):
                    with gr.Tab(label="Prévisions climatiques", scale=1):
                        with gr.Column(elem_classes="box"):
                            with gr.Row():
                                gr.HTML(
                                    "<h2 style='color: #000000'>Prévisions climatiques</h2>"
                                )
                            with gr.Row():
                                plot_1 = gr.Plot()
                            with gr.Row():
                                plot_2 = gr.Plot()
                            with gr.Row():
                                plot_3 = gr.Plot()
                    with gr.Tab(
                        label="Prévisions pour l'exploitation sans ombrage", scale=1
                    ):
                        with gr.Row(elem_classes="box"):
                            with gr.Column():
                                gr.HTML(
                                    "<h2 style='color: #000000'>Prévisions spécifiques à l'exploitation, sans solution d'ombrage</h2>"
                                )
                                current_situation_summary = gr.Markdown(
                                    elem_classes="summary"
                                )
                        with gr.Row(elem_classes="box"):
                            with gr.Column():
                                gr.HTML(
                                    "<h2 style='color: #000000'>Déficit hydrique</h2>"
                                )
                                plot_4 = gr.Plot()
                            with gr.Column():
                                gr.HTML("<h2 style='color: #000000'>Rendements</h2>")
                                current_plot_yields = gr.Plot()
                    with gr.Tab(
                        label="Prévisions pour l'exploitation avec ombrage", scale=1
                    ):
                        with gr.Row(elem_classes="box"):
                            with gr.Column():
                                gr.HTML(
                                    "<h2 style='color: #000000'>Synthèse des bénéfices pour l'exploitation suite à la mise en place d'une solution d'ombrage</h2>"
                                )
                                agripv_summary = gr.Markdown(elem_classes="summary")
                        with gr.Row(elem_classes="box"):
                            with gr.Column():
                                gr.HTML(
                                    "<h2 style='color: #000000'>Déficit hydrique</h2>"
                                )
                                plot_5 = gr.Plot()
                            with gr.Column():
                                gr.HTML("<h2 style='color: #000000'>Rendements</h2>")
                                shaded_plot_yields = gr.Plot()

    demo.load(on_init, [lat, lon, address], [lat, lon, map])
    place_btn.click(on_init, [lat, lon, address], [lat, lon, map])
    place_cancel_btn.click(on_delete, [lat, lon, map], [lat, lon, address, map])
    go_to_page_2_btn.click(
        fn=go_to_page_2,
        inputs="",
        outputs=[page_1, page_2],
    )
    go_to_page_1_btn.click(
        fn=go_to_page_1,
        inputs="",
        outputs=[page_1, page_2],
    )

    simulation_btn.click(
        launch_simulation,
        [lat, lon, address, culture],
        [
            current_situation_summary,
            agripv_summary,
            plot_1,
            plot_2,
            plot_3,
            plot_4,
            plot_5,
            current_plot_yields,
            shaded_plot_yields,
            page_1,
            page_2,
            go_to_page_2_btn,
        ],
    )
demo.title = "Démo GAIA - Les bénéfices de l'ombrage"
demo.launch()