import streamlit as st
import requests
import pandas as pd

# Lista de criptomonedas
cryptos = [
    "BTC", "ETH", "USDT", "BNB", "XRP", "ADA", "DOGE", "SOL", "DOT",
    "USDC", "LTC", "LINK", "MATIC", "AVAX", "XLM", "BCH", "SHIB",
    "UNI", "ATOM", "ALGO", "VET", "XMR", "FIL", "TRX", "XTZ",
    "AAVE", "HBAR", "ICP", "EGLD", "THETA"
]

# Función para obtener datos de la API
def get_crypto_data():
    url = "https://api.minerstat.com/v2/coins"
    params = {
        'list': ','.join(cryptos)
    }
    response = requests.get(url, params=params)
    return response.json()

# Estilos CSS para personalización
st.markdown(
    """
    <style>
    .title {
        text-align: center;
        color: #4CAF50;
        font-size: 40px;
        font-weight: bold;
    }
    .subheader {
        text-align: center;
        color: #2196F3;
        font-size: 30px;
    }
    .button {
        background-color: #2196F3;
        color: white;
        font-size: 20px;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        display: block;
        margin: 20px auto;
        text-align: center;
        text-decoration: none;
    }
    .button:hover {
        background-color: #1976D2;
    }
    .dataframe {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        width: 90%;
    }
    .dataframe th, .dataframe td {
        padding: 10px;
        border: 1px solid #ddd;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Inicializar la aplicación
st.markdown('<h1 class="title">Estadísticas de Criptomonedas</h1>', unsafe_allow_html=True)
st.markdown('<p style="text-align: center;">Esta aplicación muestra las estadísticas de las 5 criptomonedas más populares.</p>', unsafe_allow_html=True)

# Botón para actualizar datos
if st.button("Actualizar datos", key='update_button', help="Actualiza las estadísticas de criptomonedas"):
    data = get_crypto_data()
    df = pd.DataFrame(data)

    # Ajustar ancho de la tabla
    st.markdown('<h2 class="subheader">Estadísticas de las Criptomonedas</h2>', unsafe_allow_html=True)
    st.dataframe(df[['coin', 'name', 'price', 'volume', 'algorithm', 'difficulty', 'reward_block']], 
                    use_container_width=True)
else:
    st.markdown('<p style="text-align: center;">Presiona el botón para actualizar los datos.</p>', unsafe_allow_html=True)

# Añadir un botón con estilo HTML
st.markdown('<a class="button" href="javascript:void(0);" onclick="window.location.reload();">Actualizar datos</a>', unsafe_allow_html=True)