ui/suggestions_tab.py

import gradio as gr
from smart_suggestion.flan_suggestor import generate_product_description

def create_suggestions_tab():
    with gr.TabItem("🎁 Smart Suggestions"):
        # 🔷 Header
        gr.Markdown(
            """
            ## 🤖 Ask RetailGenie for Recommendations  
            🧞 Just type your need — e.g., _"shampoo for dry hair under 500"_, _"gift sets"_, or _"budget skin care"_  
            and let Genie do the rest!
            """,
            elem_classes="centered-text"
        )

        # 🟩 Input Section
        suggestion_input = gr.Textbox(
            label="💬 Your Request",
            placeholder="Try: Gifts under 500, or Shampoo for dry hair",
            lines=1
        )

        gr.Markdown("<div style='margin-top: 8px;'></div>")

        # 🟦 Button
        suggest_btn = gr.Button("🔍 Get Suggestions")

        gr.Markdown("<div style='margin-top: 12px;'></div>")

        # 🟨 Output Section
        suggestions_output = gr.Textbox(
            label="✨ Suggested Products",
            lines=10,
            interactive=False,
            show_copy_button=True,
            elem_id="suggestion-box"
        )

        # 🧠 Connect logic to FLAN model
        suggest_btn.click(
            fn=generate_product_description,
            inputs=suggestion_input,
            outputs=suggestions_output
        )

        # 💅 CSS for centered text and consistent spacing
        gr.Markdown(
            """
            <style>
                .centered-text {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 500;
                }
                #suggestion-box textarea {
                    font-family: 'Courier New', monospace;
                    font-size: 14px;
                    background-color: #111827;
                    color: #e5e7eb;
                    border-radius: 10px;
                    padding: 10px;
                    white-space: pre-line;  /* important for preserving line breaks */
                }
            </style>
            """
        )