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),
})

# 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, for Piitu -Janika
    with gr.Tab("Testing Area"):
        with gr.Row():
            text_input = gr.Textbox()

demo.launch()