"""
Streamlit component for displaying AI Smart Suggestions
Add this to your main Streamlit dashboard
"""
import streamlit as st
import pandas as pd
from datetime import datetime

def display_smart_suggestions(recommendations: list):
    """
    Display AI-driven recommendations in a Streamlit panel
    
    Args:
        recommendations: List of recommendation dicts from get_smart_suggestions()
    """
    
    # st.markdown("### 🤖 AI Smart Suggestions")
    # st.markdown("*AI-powered insights updated in real-time*")
    
    if not recommendations:
        st.info("📊 No recommendations available. Add more order data for AI insights.")
        return
    
    # Display each recommendation as a card
    for i, rec in enumerate(recommendations, 1):
        # Better styling for priority
        priority_styles = {
            'high': {'icon': '📈', 'color': '#ff4444', 'label': 'High Priority'},
            'medium': {'icon': '⚠️', 'color': '#ffaa00', 'label': 'Medium Priority'},
            'low': {'icon': '📊', 'color': '#4CAF50', 'label': 'Low Priority'}
        }
        
        style = priority_styles.get(rec['priority'], {'icon': '📌', 'color': '#888', 'label': 'Info'})
        
        # Create card with better styling
        st.markdown(
            f"""
            <div style='background-color: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; 
                        border-left: 4px solid {style['color']}; margin-bottom: 15px;'>
                <div style='display: flex; align-items: center; margin-bottom: 8px;'>
                    <span style='font-size: 24px; margin-right: 10px;'>{style['icon']}</span>
                    <span style='color: {style['color']}; font-size: 11px; font-weight: bold; 
                                 text-transform: uppercase;'>{style['label']}</span>
                </div>
                <div style='font-weight: bold; font-size: 15px; margin-bottom: 5px;'>
                    {rec['message'].replace('📈', '').replace('⚠️', '').replace('📉', '').strip()}
                </div>
                <div style='color: #aaa; font-size: 13px; margin-bottom: 10px;'>
                    {rec['detail']}
                </div>
                <div>
                    <span style='background-color: {'#4CAF50' if rec['confidence'] > 80 else '#ff9800' if rec['confidence'] > 60 else '#f44336'}; 
                                 color: white; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: bold;'>
                        ✓ {rec['confidence']:.0f}% Confidence
                    </span>
                </div>
            </div>
            """,
            unsafe_allow_html=True
        )
    
    # Last updated timestamp
    st.caption(f"🕐 Last updated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")


# Example usage in your Streamlit app:
"""
# In your main streamlit_app.py, add this:

import sys
sys.path.append('.')
from forecasting.smart_suggestions import get_smart_suggestions
from app.utils.suggestions_panel import display_smart_suggestions

# Load your orders data
orders_df = pd.read_csv('app/data/orders_for_forecast.csv')

# Generate recommendations
recommendations = get_smart_suggestions(orders_df, top_n=3)

# Display in sidebar or main area
with st.sidebar:
    display_smart_suggestions(recommendations)

# OR in main dashboard:
st.title("Warehouse Dashboard")

col1, col2 = st.columns([2, 1])

with col1:
    # Your main dashboard content
    pass

with col2:
    # Smart suggestions panel
    display_smart_suggestions(recommendations)
"""