# Main title
st.title("📈 ETF Portfolio Builder")

# Function to remove ticker
def remove_ticker(ticker_to_remove: str) -> None:
    """Remove a ticker from the portfolio."""
    try:
        logger.info(f"Removing ticker: {ticker_to_remove}")
        current_allocations = list(st.session_state.etf_allocations)
        st.session_state.etf_allocations = [etf for etf in current_allocations if etf["ticker"] != ticker_to_remove]
        logger.info(f"Updated allocations after removal: {st.session_state.etf_allocations}")
        st.rerun()
    except Exception as e:
        logger.error(f"Error removing ticker: {str(e)}")
        st.error(f"Error removing ticker: {str(e)}")

# Display current tickers in the main space
if st.session_state.etf_allocations:
    st.markdown("""
    <style>
    .ticker-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }
    .ticker-item {
        display: inline-flex;
        align-items: center;
        background-color: #2ecc71;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 1em;
        font-weight: 500;
    }
    .ticker-close {
        margin-left: 8px;
        cursor: pointer;
        font-size: 0.9em;
        opacity: 0.8;
    }
    .ticker-close:hover {
        opacity: 1;
    }
    </style>
    """, unsafe_allow_html=True)
    
    # Create columns for the tickers
    cols = st.columns([1] * len(st.session_state.etf_allocations))
    
    # Display each ticker with a close button
    for i, etf in enumerate(st.session_state.etf_allocations):
        with cols[i]:
            if st.button(f"× {etf['ticker']}", key=f"remove_{etf['ticker']}", 
                        help=f"Remove {etf['ticker']} from portfolio"):
                remove_ticker(etf['ticker'])

# Debug information
logger.info("=== Session State Debug ===")