import os
import csv
import panel as pn
from datetime import datetime
import pandas as pd
# import huggingface_hub
from huggingface_hub import Repository

DATASET_REPO_URL = "https://huggingface.co/datasets/julien-c/persistent-space-dataset"
DATA_FILENAME = "data.csv"
DATA_FILE = os.path.join("data", DATA_FILENAME)

repo_dir = "data"
if not os.path.exists(repo_dir):
    os.makedirs(repo_dir)

repo = pn.widgets.TextInput(name="Repository URL", value=DATASET_REPO_URL)
name_input = pn.widgets.TextInput(name="Your name")
message_input = pn.widgets.TextAreaInput(name="Your message")

def generate_html() -> str:
    if not os.path.exists(DATA_FILE):
        return "<div class='chatbot'>no messages yet</div>"
    else:
        df = pd.read_csv(DATA_FILE)
        df = df.iloc[::-1]  # Reverse the order of rows
        html = "<div class='chatbot'>"
        for _, row in df.iterrows():
            html += "<div>"
            html += f"<span>{row['name']}</span>"
            html += f"<span class='message'>{row['message']}</span>"
            html += "</div>"
        html += "</div>"
        return html

def store_message(event):
    name = name_input.value
    message = message_input.value
    if name and message:
        with open(DATA_FILE, "a", newline="") as csvfile:
            writer = csv.writer(csvfile)
            writer.writerow([name, message, str(datetime.now())])
        pn.state.session_context.request_relayout(repo)
        pn.state.session_context.request_relayout(messages)

repo.on_change(store_message, "value")
name_input.on_change(store_message, "value")
message_input.on_change(store_message, "value")

repo_text = pn.pane.Markdown(f"The dataset repo is [{DATASET_REPO_URL}]({DATASET_REPO_URL}) (open in new tab)", sizing_mode="stretch_width")
messages = pn.pane.HTML(sizing_mode="stretch_width")
messages.object = generate_html()

template = pn.template.FastListTemplate(
    site="Persistent Space Dataset",
    title="Reading/Writing to a HuggingFace Dataset Repo from Spaces",
    main=[
        pn.Column(repo_text, name_input, message_input, messages),
    ],
    header_background="#333",
    header_color="white",
    main_max_width="800px",
    main_padding=20,
    main_min_height="600px"
)
template.servable()