import streamlit as st
import requests
import streamlit.components.v1 as components

# 1. Configuración de página
st.set_page_config(page_title="AutoMatch SRI - Dashboard", layout="wide")

# 2. Inyección de Estilos (Corregido para evitar fugas de texto)
st.markdown('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">', unsafe_allow_html=True)
st.markdown("""
<style>
    .stApp { background-color: #0e1117; }
    .metric-card {
        background-color: #1a222d;
        border: 1px solid #30363d;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }
    .metric-icon { font-size: 24px; color: #58a6ff; }
    .metric-label { font-size: 11px; color: #8b949e; text-transform: uppercase; margin: 0; }
    .metric-value { font-size: 22px; color: #ffffff; font-weight: 700; margin: 0; }
    .stButton>button { 
        background-color: #238636 !important; 
        color: white !important; 
        border: none; 
        width: 100%; 
        padding: 10px; 
        border-radius: 6px; 
    }
</style>
""", unsafe_allow_html=True)

# 3. Barra Lateral (HCI)
with st.sidebar:
    st.header("CONTROL")
    st.text("Auditores: EKD.")
    st.text("Proyecto: CONCILIACIÓN")
    st.divider()
    st.text("Banco: Pichincha")   #
    st.text("Cuenta: 1234567890") #
    st.info("Enero 2026")

# 4. Título y Métricas de Alto Contraste
st.title("AUTOMATCH SRI | AUDITORÍA")

def render_card(label, value, icon):
    st.markdown(f"""
        <div class="metric-card">
            <i class="fa-solid {icon} metric-icon"></i>
            <div><p class="metric-label">{label}</p><p class="metric-value">{value}</p></div>
        </div>
    """, unsafe_allow_html=True)

c1, c2, c3 = st.columns(3)
with c1: render_card("Saldo Inicial", "$15,000.00", "fa-vault")
with c2: render_card("Saldo Final", "$12,964.05", "fa-file-invoice-dollar") #
with c3: render_card("Estado", "COMPLETADO", "fa-circle-check")

# 5. Carga de Archivos
st.subheader("Carga de Archivos")
col_a, col_b = st.columns(2)
with col_a: pdf = st.file_uploader("Estado de Cuenta (PDF)", type="pdf")
with col_b: csv = st.file_uploader("Reporte SRI (CSV)", type="csv")

if pdf and csv:
    if st.button("EJECUTAR CONCILIACIÓN"):
        with st.spinner("Enviando binarios a n8n..."):
            try:
                # --- ENVÍO DE BINARIOS (CORREGIDO) ---
                # Enviamos archivos como multipart y metadatos como datos de formulario
                archivos = {
                    'archivo_banco': (pdf.name, pdf.getvalue(), 'application/pdf'),
                    'archivo_sri': (csv.name, csv.getvalue(), 'text/csv')
                }
                datos = {"id_proceso": "2026-01-27"}
                
                url = "http://n8n:5678/webhook-test/conciliacion"
                res = requests.post(url, files=archivos, data=datos)
                
                if res.status_code == 200:
                    st.success("Análisis Exitoso")
                    
                    # --- EXTRACCIÓN HTML (Ajustado según image_ebed16.png) ---
                    # Según tu captura, los datos están bajo la clave "0"
                    respuesta_json = res.json()
                    html_render = respuesta_json[0]['html_render']
                    
                    st.divider()
                    components.html(html_render, height=1200, scrolling=True)
                else:
                    st.error(f"Error en n8n: {res.status_code}")
            except Exception as e:
                st.error(f"Error de conexión: {e}")