import gradio as gr
import pandas as pd
import numpy as np
import random

def show_stars():
    """ Function that shows the HTML script for stars -Janika"""
    stars_html = """
    <style>
        /* Title */
        .title-text {
        color: white;
        font-family: sans-serif;
        font-size: 14px;
        font-weight: bold;
        }

        /* Empty stars */
        .star-rating {
            display: inline-block;
            font-size: 1.5em;
            color: lightgray;
        }

        /* Filled stars */
        .star-rating .star.filled {
            color: gold;
        }

        /* Box for the whole star rating component */
        .rating-box {
            border: 1px transparent;
            background-color: #1f2937;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            margin-left: 0;
        }

        /* Box for the title */
        .title-box {
            border: 1px transparent;
            background-color: #ca8a04;
            padding: 3px;
            border-radius: 8px;
            display: inline-block;
            margin-bottom: 6px;
        }

        /* Box for stars */
        .star-box {
            border: 1px transparent;
            background-color: #374151;
            padding: 10px;
            border-radius: 5px;
            width: fit-content;
            margin: 0;
        }
    </style>

    <div class="rating-box">
        <div class="title-box">
            <p class="title-text">Star rating</p>
        </div>
        <div class="star-box">
            <div class="star-rating" data-rating="4">
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
                <span class="star">★</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ratingElement = document.querySelector('.star-rating');
            const rating = parseInt(ratingElement.getAttribute('data-rating'));
            const stars = ratingElement.querySelectorAll('.star');
            for (let i = 0; i < rating; i++) {
                stars[i].classList.add('filled');
            }
        });
    </script>
    """
    return stars_html

# Random data for testing, actual data added later
df = pd.DataFrame({
    'Year': np.random.randint(2000, 2024, 25),
    'Reviews': np.random.randint(120, 320, 25),
})

# Function to handle feedback submission -Piitu
def handle_feedback(feedback, name):
    return f"Thank you for your feedback, {name}!"

# Function to update placeholder text -Piitu
def update_placeholder(name):
    if name:
        return f"Enter your feedback here, {name}..."
    else:
        return "Enter your feedback here..."

# Theme
theme = gr.themes.Soft(
    primary_hue="yellow",
    secondary_hue="amber",
    spacing_size="sm",
    radius_size="lg",
)

with gr.Blocks(theme=theme) as demo:

    # Basic user interface for company's view -Janika
    with gr.Tab("User Interface"):
        with gr.Row():
            with gr.Column(scale=1, min_width=300):
                # Summary
                summary_output = gr.Textbox(label="Summary")

            with gr.Column(scale=2, min_width=300):
                # Star rating
                star_rating = gr.HTML(value=show_stars())

                # Keywords
                keywords_output = gr.Textbox(label="Keywords")

     # Testing Area -Piitu
    with gr.Tab("Testing Area"):
        with gr.Row():
            name_input = gr.Textbox(label="Enter your name", placeholder="Enter your name here...")

        with gr.Row():
            text_input = gr.Textbox(label="Please give us feedback!", 
                                    placeholder="Enter your feedback here...", 
                                    max_length=5000)

        # Update placeholder based on name input -Piitu
        name_input.change(fn=update_placeholder, inputs=name_input, outputs=text_input)

        # Send button -Piitu
        send_button = gr.Button("Send")

        # Output for feedback submission confirmation -Piitu
        feedback_output = gr.Textbox(label="Submission Result", interactive=False)

        # Link button to function that handles feedback submission -Piitu
        send_button.click(handle_feedback, inputs=[text_input, name_input], outputs=feedback_output)

demo.launch()