# -*- coding: utf-8 -*-
"""Untitled0.ipynb

Automatically generated by Colab.

Original file is located at
    https://colab.research.google.com/drive/1lA4vvx9sbWFfjQHAmGs8ADgwhNOypfsM
"""

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import gradio as gr
import io
import base64
from datetime import datetime
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split
from sklearn.metrics import classification_report, accuracy_score
import tempfile
import os

print("🚀 Iniciando CorrosionPredict en Hugging Face...")

# ==============================================================================
# BLOQUE 1: CARGA Y ENTRENAMIENTO DEL MODELO
# ==============================================================================

print("📂 Cargando y entrenando modelo de corrosión...")

try:
    # Cargar datos
    df = pd.read_excel("Acero_bajo_OFICIAL.xlsx")
    print(f"✅ Datos cargados: {len(df)} registros")

    # Limpiar datos
    df['Humedad relativa (%)'] = df['Humedad relativa (%)'].astype(str).str.replace('%', '').astype(float)
    df['Clasificacion ISO 9223'] = df['Clasificacion ISO 9223'].str.upper()

    # Preparar variables
    X = df[['Distancia al mar (km)', 'Altitud (msnm)', 'Humedad relativa (%)']]
    y = df['Clasificacion ISO 9223']

    # Añadir ruido controlado para robustez
    np.random.seed(42)
    X_noisy = X.copy()
    X_noisy['Distancia al mar (km)'] += np.random.uniform(-2, 2, size=len(X))
    X_noisy['Altitud (msnm)'] += np.random.uniform(-10, 10, size=len(X))
    X_noisy['Humedad relativa (%)'] += np.random.uniform(-3, 3, size=len(X))

    # Asegurar rangos razonables
    X_noisy['Distancia al mar (km)'] = X_noisy['Distancia al mar (km)'].clip(lower=0, upper=25)
    X_noisy['Altitud (msnm)'] = X_noisy['Altitud (msnm)'].clip(lower=0, upper=400)
    X_noisy['Humedad relativa (%)'] = X_noisy['Humedad relativa (%)'].clip(lower=65, upper=95)

    # Entrenar modelo final con todos los datos
    modelo = RandomForestClassifier(n_estimators=100, random_state=42, class_weight='balanced')
    modelo.fit(X_noisy, y)

    print("✅ Modelo entrenado correctamente")

except Exception as e:
    print(f"❌ Error cargando datos: {e}")
    # Crear datos de ejemplo para demo
    modelo = None

# ==============================================================================
# BLOQUE 2: CONFIGURACIÓN Y DATOS
# ==============================================================================

# Configuración profesional de matplotlib
plt.rcParams['font.size'] = 12
plt.rcParams['axes.grid'] = True
plt.rcParams['grid.alpha'] = 0.3

# Diccionario mejorado de recomendaciones
RECOMENDACIONES = {
    "C1": {
        "nivel": "MUY BAJA",
        "color": "#2E8B57",  # Verde
        "ejemplos": "Oficinas climatizadas, escuelas, museos, bibliotecas, hospitales.",
        "descripcion": "Ambientes interiores controlados con baja contaminación.",
        "protecciones": [
            {"proteccion": "Pintura anticorrosiva básica", "costo": "30-45", "vida_util": "5-8", "frecuencia": "Cada 5-10 años", "notas": "Protección adecuada para ambiente controlado"},
            {"proteccion": "Recubrimiento ligero", "costo": "15-25", "vida_util": "3-5", "frecuencia": "Cada 3 años", "notas": "Opción económica para baja exposición"}
        ]
    },
    "C2": {
        "nivel": "BAJA",
        "color": "#9ACD32",  # Amarillo verdoso
        "ejemplos": "Zonas rurales, áreas suburbanas, almacenamiento techado, interiores no climatizados.",
        "descripcion": "Ambientes con exposición mínima a contaminantes corrosivos.",
        "protecciones": [
            {"proteccion": "Pintura anticorrosiva estándar", "costo": "35-50", "vida_util": "5-8", "frecuencia": "Cada 3-4 años", "notas": "Balance óptimo costo-beneficio"},
            {"proteccion": "Galvanizado ligero", "costo": "60-80", "vida_util": "10-15", "frecuencia": "Inspección cada 5 años", "notas": "Mayor durabilidad con inversión moderada"}
        ]
    },
    "C3": {
        "nivel": "MODERADA",
        "color": "#FFA500",  # Naranja
        "ejemplos": "Zonas urbanas, áreas costeras con baja salinidad, plantas de procesamiento de alimentos.",
        "descripcion": "Ambientes urbanos y semi-industriales con exposición moderada.",
        "protecciones": [
            {"proteccion": "Galvanizado en caliente", "costo": "80-120", "vida_util": "15-20", "frecuencia": "Inspección cada 5 años", "notas": "Protección robusta y duradera"},
            {"proteccion": "Pintura epóxica industrial", "costo": "50-70", "vida_util": "8-12", "frecuencia": "Cada 4-6 años", "notas": "Excelente resistencia química"}
        ]
    },
    "C4": {
        "nivel": "ALTA",
        "color": "#FF4500",  # Rojo naranja
        "ejemplos": "Áreas industriales, zonas costeras sin rociado de sal, plantas químicas.",
        "descripcion": "Ambientes industriales y costeros con alta contaminación.",
        "protecciones": [
            {"proteccion": "Sistema duplex (galvanizado + pintura)", "costo": "120-180", "vida_util": "20-25", "frecuencia": "Inspección cada 5-7 años", "notas": "Máxima protección sin acero inoxidable"},
            {"proteccion": "Recubrimiento de zinc-aleación", "costo": "100-150", "vida_util": "15-20", "frecuencia": "Inspección cada 5 años", "notas": "Alta resistencia a la corrosión"}
        ]
    },
    "C5": {
        "nivel": "MUY ALTA",
        "color": "#DC143C",  # Rojo
        "ejemplos": "Áreas costeras con rociado de sal, industrias pesadas, plataformas costeras.",
        "descripcion": "Ambientes marinos e industriales extremadamente agresivos.",
        "protecciones": [
            {"proteccion": "Acero inoxidable 316", "costo": "300-500", "vida_util": "50+", "frecuencia": "Limpieza periódica", "notas": "Solución premium para ambientes severos"},
            {"proteccion": "Sistema de protección catódica", "costo": "200-350", "vida_util": "25-30", "frecuencia": "Mantenimiento anual", "notas": "Ideal para estructuras fijas"}
        ]
    },
    "CX": {
        "nivel": "EXTREMA",
        "color": "#8B008B",  # Púrpura
        "ejemplos": "Zonas tropicales con humedad permanente, industrias extremas, offshore.",
        "descripcion": "Ambientes tropicales y offshore con exposición constante.",
        "protecciones": [
            {"proteccion": "Acero inoxidable superduplex", "costo": "400-600", "vida_util": "50+", "frecuencia": "Limpieza periódica", "notas": "Máxima resistencia para ambientes extremos"},
            {"proteccion": "Recubrimientos especiales marinos", "costo": "250-400", "vida_util": "20-30", "frecuencia": "Inspección cada 3-5 años", "notas": "Tecnología avanzada de protección"}
        ]
    }
}

# ==============================================================================
# BLOQUE 3: FUNCIONES PRINCIPALES
# ==============================================================================

def generar_graficos(clase_predicha, estacion):
    """Genera gráficos profesionales para el reporte"""
    graficos_base64 = []

    try:
        # 1. Gráfico de Barras: Vida Útil
        fig, ax = plt.subplots(figsize=(10, 6))
        protecciones = RECOMENDACIONES[clase_predicha]["protecciones"]
        sistemas = [p['proteccion'] for p in protecciones]
        vida_util = [float(p['vida_util'].split('-')[1].replace('+', '')) if '-' in p['vida_util'] else float(p['vida_util'].replace('+', '')) for p in protecciones]

        bars = ax.bar(sistemas, vida_util, color=[RECOMENDACIONES[clase_predicha]["color"], '#FFD700'])
        ax.set_title('Comparación de Vida Útil entre Sistemas de Protección', fontsize=14, fontweight='bold')
        ax.set_ylabel('Vida Útil (años)', fontsize=12)
        ax.set_xlabel('Sistemas de Protección', fontsize=12)

        # Añadir valores en las barras
        for bar in bars:
            height = bar.get_height()
            ax.text(bar.get_x() + bar.get_width()/2., height + 0.5,
                   f'{height} años', ha='center', va='bottom', fontweight='bold')

        plt.xticks(rotation=15)
        plt.tight_layout()

        # Convertir a base64
        buf = io.BytesIO()
        plt.savefig(buf, format='png', dpi=120, bbox_inches='tight')
        buf.seek(0)
        graficos_base64.append(base64.b64encode(buf.getvalue()).decode('utf-8'))
        plt.close()

        # 2. Gráfico Circular: Distribución de Costos
        fig, ax = plt.subplots(figsize=(8, 8))
        costos = [float(p['costo'].split('-')[0]) for p in protecciones]
        colors = [RECOMENDACIONES[clase_predicha]["color"], '#FFD700']

        wedges, texts, autotexts = ax.pie(costos, labels=sistemas, autopct='%1.1f%%',
                                         colors=colors, startangle=90)

        for autotext in autotexts:
            autotext.set_color('white')
            autotext.set_fontweight('bold')

        ax.set_title('Distribución de Costos Iniciales\n(S/ m²)', fontsize=14, fontweight='bold')
        plt.tight_layout()

        buf = io.BytesIO()
        plt.savefig(buf, format='png', dpi=120, bbox_inches='tight')
        buf.seek(0)
        graficos_base64.append(base64.b64encode(buf.getvalue()).decode('utf-8'))
        plt.close()

        # 3. Gráfico de Líneas: Degradación
        fig, ax = plt.subplots(figsize=(10, 6))
        tiempo = np.arange(0, 26, 5)  # 0 a 25 años

        for i, proteccion in enumerate(protecciones):
            vida = float(proteccion['vida_util'].split('-')[1].replace('+', '')) if '-' in proteccion['vida_util'] else float(proteccion['vida_util'].replace('+', ''))
            eficacia = [100 - (100/vida) * t for t in tiempo]
            eficacia = [max(0, e) for e in eficacia]  # No menor que 0

            ax.plot(tiempo, eficacia, marker='o', linewidth=2,
                   label=proteccion['proteccion'], color=colors[i])

        ax.set_title('Degradación de Protección en el Tiempo', fontsize=14, fontweight='bold')
        ax.set_xlabel('Años', fontsize=12)
        ax.set_ylabel('Eficacia de Protección (%)', fontsize=12)
        ax.legend()
        ax.grid(True, alpha=0.3)
        plt.tight_layout()

        buf = io.BytesIO()
        plt.savefig(buf, format='png', dpi=120, bbox_inches='tight')
        buf.seek(0)
        graficos_base64.append(base64.b64encode(buf.getvalue()).decode('utf-8'))
        plt.close()
        
        # 4. NUEVO GRÁFICO: Real vs Predicho
        grafico_comparativo = generar_grafico_real_vs_predicho()
        if grafico_comparativo:
            graficos_base64.append(grafico_comparativo)
            
    except Exception as e:
        print(f"Error generando gráficos: {e}")

    return graficos_base64

def generar_grafico_real_vs_predicho():
    """Genera gráfico comparativo entre valores reales y predichos"""
    try:
        print("🔄 Generando gráfico real vs predicho...")

        # Obtener datos reales del Excel
        df_real = pd.read_excel("Acero_bajo_OFICIAL.xlsx")
        print(f"✅ Datos cargados: {len(df_real)} registros")

        # Preparar datos para predicción
        X_real = df_real[['Distancia al mar (km)', 'Altitud (msnm)', 'Humedad relativa (%)']]
        y_real = df_real['Clasificacion ISO 9223']

        # Generar predicciones para todos los datos reales
        y_pred = modelo.predict(X_real)

        # Crear gráfico comparativo
        fig, ax = plt.subplots(figsize=(12, 8))

        # Convertir clases categóricas a numéricas para gráfico
        clases_ordenadas = ['C1', 'C2', 'C3', 'C4', 'C5', 'CX']
        y_real_num = [clases_ordenadas.index(clase) for clase in y_real]
        y_pred_num = [clases_ordenadas.index(clase) for clase in y_pred]

        # Gráfico de dispersión
        scatter = ax.scatter(y_real_num, y_pred_num, alpha=0.6, c=y_real_num,
                           cmap='viridis', s=60)

        # Línea de perfecta predicción
        min_val = min(min(y_real_num), min(y_pred_num))
        max_val = max(max(y_real_num), max(y_pred_num))
        ax.plot([min_val, max_val], [min_val, max_val], 'r--', alpha=0.8,
                label='Predicción Perfecta')

        ax.set_xlabel('Valores Reales', fontsize=12, fontweight='bold')
        ax.set_ylabel('Valores Predichos', fontsize=12, fontweight='bold')
        ax.set_title('Comparación: Valores Reales vs Predichos\nModelo Random Forest',
                    fontsize=14, fontweight='bold')

        # Configurar ejes con etiquetas de clases
        ax.set_xticks(range(len(clases_ordenadas)))
        ax.set_yticks(range(len(clases_ordenadas)))
        ax.set_xticklabels(clases_ordenadas)
        ax.set_yticklabels(clases_ordenadas)

        # Añadir grid y leyenda
        ax.grid(True, alpha=0.3)
        ax.legend()

        # Añadir barra de color
        cbar = plt.colorbar(scatter)
        cbar.set_label('Nivel de Corrosión', rotation=270, labelpad=15)

        # Calcular y mostrar precisión
        accuracy = accuracy_score(y_real, y_pred)
        ax.text(0.05, 0.95, f'Precisión del Modelo: {accuracy:.2%}',
                transform=ax.transAxes, fontsize=12,
                bbox=dict(boxstyle="round,pad=0.3", facecolor="white", alpha=0.8))

        plt.tight_layout()

        # Convertir a base64 para HTML
        buf = io.BytesIO()
        plt.savefig(buf, format='png', dpi=120, bbox_inches='tight')
        buf.seek(0)
        img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
        plt.close()

        print("✅ Gráfico real vs predicho generado exitosamente")
        return img_base64

    except Exception as e:
        print(f"❌ Error generando gráfico real vs predicho: {e}")
        return None

def predecir_corrosion(estacion, distancia, altitud, humedad, nombre_ing, proyecto, ubicacion):
    """Función principal para predecir corrosión"""
    try:
        # Validaciones
        if not all([estacion, nombre_ing, proyecto, ubicacion]):
            return "❌ Complete todos los campos obligatorios", "", "", ""

        distancia = float(distancia)
        altitud = float(altitud)
        humedad = float(humedad)

        # Validar rangos
        if not (0 <= distancia <= 25):
            return "❌ Distancia al mar debe estar entre 0-25 km", "", "", ""
        if not (0 <= altitud <= 400):
            return "❌ Altitud debe estar entre 0-400 msnm", "", "", ""
        if not (65 <= humedad <= 95):
            return "❌ Humedad relativa debe estar entre 65-95%", "", "", ""

        if modelo is None:
            return "❌ Modelo no disponible. Verifique los datos de entrenamiento.", "", "", ""

        # Realizar predicción
        nuevo_dato = pd.DataFrame({
            'Distancia al mar (km)': [distancia],
            'Altitud (msnm)': [altitud],
            'Humedad relativa (%)': [humedad]
        })

        prediccion = modelo.predict(nuevo_dato)[0].upper()
        probabilidades = modelo.predict_proba(nuevo_dato)[0]
        clases = modelo.classes_

        # Generar gráficos
        graficos_base64 = generar_graficos(prediccion, estacion)

        # Generar reporte COMPLETO
        reporte_completo_html = generar_reporte_completo(
            estacion, distancia, altitud, humedad, prediccion,
            probabilidades, clases, graficos_base64,
            nombre_ing, proyecto, ubicacion
        )
        
        # Generar reporte SOLO GRÁFICOS
        reporte_graficos_html = generar_reporte_solo_graficos(
            estacion, distancia, altitud, humedad, prediccion,
            probabilidades, clases, graficos_base64,
            nombre_ing, proyecto, ubicacion
        )

        # Resultados para mostrar en interfaz
        resultados_html = generar_resultados_html(
            estacion, distancia, altitud, humedad, prediccion,
            probabilidades, clases
        )

        graficas_html = generar_graficas_html(graficos_base64)

        return resultados_html, graficas_html, reporte_completo_html, reporte_graficos_html

    except Exception as e:
        return f"❌ Error en la predicción: {str(e)}", "", "", ""

# ==============================================================================
# BLOQUE 4: GENERACIÓN DE HTML Y REPORTES
# ==============================================================================

def generar_resultados_html(estacion, distancia, altitud, humedad, prediccion, probabilidades, clases):
    """Genera HTML para mostrar resultados en la interfaz"""

    info_clase = RECOMENDACIONES.get(prediccion, {})

    # Tabla de probabilidades
    prob_table = ""
    for clase, prob in zip(clases, probabilidades):
        prob_table += f"<tr><td>{clase}</td><td style='text-align: center;'>{prob:.2%}</td></tr>"

    return f"""
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
        <h2 style="margin: 0; text-align: center;">🏭 CorrosionPredict Pro</h2>
        <p style="text-align: center; margin: 5px 0 0 0; opacity: 0.9;">
            {estacion} | {datetime.now().strftime('%d/%m/%Y %H:%M')}
        </p>
    </div>

    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
        <h3 style="color: #2c3e50; margin-top: 0;">📊 Resultado de Predicción</h3>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
            <div style="background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid {info_clase.get('color', '#666')};">
                <div style="font-weight: bold; color: #2c3e50;">Clasificación ISO 9223</div>
                <div style="font-size: 1.8em; font-weight: bold; color: {info_clase.get('color', '#666')};">{prediccion}</div>
                <div style="font-size: 0.9em; color: #666;">{info_clase.get('nivel', 'N/A')}</div>
            </div>
        </div>

        <div style="background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
            <h4 style="margin-top: 0; color: #2c3e50;">📈 Probabilidades por Clase</h4>
            <table style="width: 100%; border-collapse: collapse;">
                <tr style="background: #f8f9fa;">
                    <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Clase</th>
                    <th style="padding: 10px; text-align: center; border-bottom: 2px solid #dee2e6;">Probabilidad</th>
                </tr>
                {prob_table}
            </table>
        </div>

        <div style="background: white; padding: 15px; border-radius: 8px;">
            <h4 style="margin-top: 0; color: #2c3e50;">📍 Datos de Entrada</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;">
                <div style="text-align: center;">
                    <div style="font-size: 0.9em; color: #666;">Distancia al mar</div>
                    <div style="font-size: 1.2em; font-weight: bold;">{distancia} km</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 0.9em; color: #666;">Altitud</div>
                    <div style="font-size: 1.2em; font-weight: bold;">{altitud} msnm</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 0.9em; color: #666;">Humedad</div>
                    <div style="font-size: 1.2em; font-weight: bold;">{humedad}%</div>
                </div>
            </div>
        </div>
    </div>
    """

def generar_graficas_html(graficos_base64):
    """Genera HTML para mostrar gráficas"""
    if not graficos_base64:
        return "<p>No se pudieron generar las gráficas</p>"

    graficas_html = "<div style='margin-top: 20px;'>"
    titulos = [
        "Comparación de Vida Útil entre Sistemas de Protección",
        "Distribución de Costos Iniciales",
        "Degradación de Protección en el Tiempo",
        "Validación del Modelo: Valores Reales vs Predichos"
    ]

    for i, img_base64 in enumerate(graficos_base64):
        graficas_html += f"""
        <div style="background: white; padding: 20px; border-radius: 8px; margin: 15px 0;
                  box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <h4 style="margin-top: 0; color: #2c3e50;">{titulos[i] if i < len(titulos) else 'Gráfico'}</h4>
            <img src="data:image/png;base64,{img_base64}"
                 style="max-width: 100%; height: auto; border-radius: 5px; border: 1px solid #dee2e6;">
        </div>
        """
    graficas_html += "</div>"
    return graficas_html

def generar_reporte_solo_graficos(estacion, distancia, altitud, humedad, prediccion,
                                probabilidades, clases, graficos_base64, nombre_ing, proyecto, ubicacion):
    """Genera reporte HTML SOLO con el gráfico Real vs Predicho"""
    
    # Tomar el cuarto gráfico (Real vs Predicho)
    grafico_real_vs_predicho = graficos_base64[3] if len(graficos_base64) >= 4 else None
    
    if not grafico_real_vs_predicho:
        return "<p>No se pudo generar el gráfico de validación</p>"

    html_content = f"""<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validación del Modelo - {estacion}</title>
    <style>
        body {{
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
        }}
        .header {{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 25px;
        }}
        .section {{
            background: white;
            padding: 25px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }}
    </style>
</head>
<body>
    <div class="header">
        <h1>📊 Validación del Modelo Predictivo</h1>
        <p>Análisis Real vs Predicho - CorrosionPredict Pro</p>
        <p>{estacion} | {datetime.now().strftime('%d/%m/%Y %H:%M')}</p>
    </div>

    <div class="section">
        <h2>📈 Gráfico de Validación: Real vs Predicho</h2>
        <img src="data:image/png;base64,{grafico_real_vs_predicho}"
             style="max-width: 90%; height: auto; border: 1px solid #ddd; border-radius: 8px;">
    </div>

    <div class="section" style="text-align: center; background: #f8f9fa;">
        <h3>CorrosionPredict Pro - Módulo de Validación</h3>
        <p>Reporte de validación generado el {datetime.now().strftime('%d/%m/%Y')}</p>
    </div>
</body>
</html>"""

    return html_content

def generar_reporte_completo(estacion, distancia, altitud, humedad, prediccion,
                           probabilidades, clases, graficos_base64, nombre_ing, proyecto, ubicacion):
    """Genera reporte HTML completo para descargar"""

    info_clase = RECOMENDACIONES.get(prediccion, {})

    # Tabla de protecciones
    protecciones_html = ""
    for proteccion in info_clase.get("protecciones", []):
        protecciones_html += f"""
        <tr>
            <td>{proteccion['proteccion']}</td>
            <td>S/ {proteccion['costo']}</td>
            <td>{proteccion['vida_util']} años</td>
            <td>{proteccion['frecuencia']}</td>
            <td>{proteccion['notas']}</td>
        </tr>
        """

    # Tabla de probabilidades
    prob_html = ""
    for clase, prob in zip(clases, probabilidades):
        prob_html += f"<tr><td>{clase}</td><td>{prob:.2%}</td></tr>"

    # Gráficos en base64
    graficos_html = ""
    titulos_graficos = [
        "Comparación de Vida Útil entre Sistemas de Protección",
        "Distribución de Costos Iniciales",
        "Degradación de Protección en el Tiempo",
        "Validación del Modelo: Valores Reales vs Predichos"
    ]

    for i, img_base64 in enumerate(graficos_base64):
        graficos_html += f"""
        <div style="page-break-inside: avoid; margin: 20px 0;">
            <h3>{titulos_graficos[i]}</h3>
            <img src="data:image/png;base64,{img_base64}"
                 style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 5px;">
        </div>
        """

    html_content = f"""<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reporte de Corrosión - {estacion}</title>
    <style>
        body {{
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
        }}
        .header {{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 30px;
        }}
        .section {{
            background: white;
            padding: 25px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }}
        .clasificacion {{
            background: {info_clase.get('color', '#666')};
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin: 15px 0;
        }}
        table {{
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }}
        th, td {{
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }}
        th {{
            background-color: #f8f9fa;
            font-weight: bold;
        }}
        .proteccion-card {{
            background: #f8f9fa;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            border-left: 4px solid {info_clase.get('color', '#666')};
        }}
        @media print {{
            body {{ background: white; }}
            .section {{ box-shadow: none; border: 1px solid #ddd; }}
            .header {{ background: #667eea; }}
        }}
    </style>
</head>
<body>
    <div class="header">
        <h1>🏭 CorrosionPredict Pro</h1>
        <p>Sistema de Predicción de Corrosión ISO 9223</p>
        <p>{estacion} | {datetime.now().strftime('%d/%m/%Y %H:%M')}</p>
    </div>

    <div class="section">
        <h2>📋 Información del Proyecto</h2>
        <table>
            <tr><th>Proyecto:</th><td>{proyecto}</td></tr>
            <tr><th>Ubicación:</th><td>{ubicacion}</td></tr>
            <tr><th>Ingeniero:</th><td>{nombre_ing}</td></tr>
            <tr><th>Estación/Distrito:</th><td>{estacion}</td></tr>
            <tr><th>Fecha:</th><td>{datetime.now().strftime('%d/%m/%Y %H:%M')}</td></tr>
        </table>
    </div>

    <div class="section">
        <h2>📊 Datos de Entrada</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <h3>🌊 Distancia al mar</h3>
                <p style="font-size: 1.5em; font-weight: bold; margin: 0;">{distancia} km</p>
            </div>
            <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <h3>⛰️ Altitud</h3>
                <p style="font-size: 1.5em; font-weight: bold; margin: 0;">{altitud} msnm</p>
            </div>
            <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <h3>💧 Humedad relativa</h3>
                <p style="font-size: 1.5em; font-weight: bold; margin: 0;">{humedad}%</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>🎯 Resultado de Predicción</h2>
        <div class="clasificacion">
            <h3 style="margin: 0; font-size: 2em;">CLASE {prediccion}</h3>
            <p style="margin: 10px 0 0 0; font-size: 1.2em;">Corrosión {info_clase.get('nivel', 'N/A')}</p>
        </div>

        <h3>Probabilidades por Clase:</h3>
        <table>
            <tr><th>Clase ISO 9223</th><th>Probabilidad</th></tr>
            {prob_html}
        </table>
    </div>

    <div class="section">
        <h2>🛡️ Recomendaciones de Protección</h2>
        <p><strong>Descripción del ambiente:</strong> {info_clase.get('descripcion', 'N/A')}</p>
        <p><strong>Ejemplos típicos:</strong> {info_clase.get('ejemplos', 'N/A')}</p>

        <h3>Sistemas de Protección Recomendados:</h3>
        <table>
            <tr>
                <th>Sistema de Protección</th>
                <th>Costo (S/ m²)</th>
                <th>Vida Útil</th>
                <th>Mantenimiento</th>
                <th>Notas</th>
            </tr>
            {protecciones_html}
        </table>
    </div>

    <div class="section">
        <h2>📈 Análisis Gráfico</h2>
        {graficos_html}
    </div>

    <div class="section" style="text-align: center; background: #f8f9fa;">
        <h3>CorrosionPredict Pro</h3>
        <p>Sistema de predicción de corrosión basado en Machine Learning</p>
        <p>Reporte generado automáticamente el {datetime.now().strftime('%d/%m/%Y')}</p>
    </div>
</body>
</html>"""

    return html_content

# ==============================================================================
# BLOQUE 5: INTERFAZ GRADIO
# ==============================================================================

with gr.Blocks(theme=gr.themes.Soft(), title="CorrosionPredict Pro") as demo:

    gr.Markdown("""
    # 🏭 CorrosionPredict Pro
    ### Sistema de Predicción de Corrosión ISO 9223 con Machine Learning

    Predice la clasificación de corrosividad según ISO 9223 para acero al carbono
    basado en condiciones ambientales.
    """)

    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("### ⚙️ Parámetros de Entrada")

            estacion = gr.Textbox(
                label="🏢 Estación/Distrito",
                placeholder="Ej: Miraflores, Callao, Ate",
                info="Nombre de la ubicación de estudio"
            )

            with gr.Row():
                distancia = gr.Number(
                    label="🌊 Distancia al mar (km)",
                    value=5.0,
                    minimum=0,
                    maximum=25,
                    info="0-25 km"
                )

                altitud = gr.Number(
                    label="⛰️ Altitud (msnm)",
                    value=100,
                    minimum=0,
                    maximum=400,
                    info="0-400 msnm"
                )

            humedad = gr.Slider(
                label="💧 Humedad relativa (%)",
                value=80,
                minimum=65,
                maximum=95,
                step=1,
                info="65-95%"
            )

            nombre_ing = gr.Textbox(
                label="👤 Ingeniero Responsable",
                value="Ing. Ambiental",
                placeholder="Nombre del profesional"
            )

            proyecto = gr.Textbox(
                label="📋 Nombre del Proyecto",
                value="Estudio de Corrosión",
                placeholder="Nombre del proyecto"
            )

            ubicacion = gr.Textbox(
                label="📍 Ubicación",
                value="Lima Metropolitana",
                placeholder="Región/Departamento"
            )

            btn_predict = gr.Button(
                "🚀 Ejecutar Predicción",
                size="lg",
                variant="primary"
            )

        with gr.Column(scale=2):
            gr.Markdown("### 📊 Resultados del Análisis")
            resultados = gr.HTML(label="Predicciones")
            graficas = gr.HTML(label="Gráficas del Análisis")

            gr.Markdown("### 💾 Descargar Reportes")
            descarga_html = gr.HTML("""
            <div style="background: #d4edda; color: #155724; padding: 15px; border-radius: 8px;
                        border: 1px solid #c3e6cb; text-align: center;">
                <p style="margin: 0;">📄 Ejecuta una predicción para generar los reportes</p>
            </div>
            """)

            with gr.Row():
                descarga_btn_completo = gr.Button(
                    "📥 Reporte Completo",
                    size="lg",
                    variant="primary",
                    visible=False
                )
                
                descarga_btn_graficos = gr.Button(
                    "📊 Solo Validación",
                    size="lg", 
                    variant="secondary",
                    visible=False
                )

            archivo_descarga_completo = gr.File(
                label="Reporte Completo",
                visible=False
            )
            
            archivo_descarga_graficos = gr.File(
                label="Reporte de Validación", 
                visible=False
            )

    # Ejemplos rápidos
    gr.Markdown("### 🚀 Ejemplos Rápidos")
    with gr.Row():
        gr.Examples(
            examples=[
                ["Miraflores", 2.5, 80, 85, "Ing. Ejemplo", "Edificio Costero", "Lima"],
                ["Ate", 15.0, 350, 75, "Ing. Ejemplo", "Planta Industrial", "Lima"],
                ["Callao", 0.5, 5, 90, "Ing. Ejemplo", "Puerto Marítimo", "Callao"]
            ],
            inputs=[estacion, distancia, altitud, humedad, nombre_ing, proyecto, ubicacion]
        )

    # Estado para almacenar reportes
    reporte_actual_completo = gr.State("")
    reporte_actual_graficos = gr.State("")

    # Funciones de conexión
    def procesar_prediccion(estacion, distancia, altitud, humedad, nombre_ing, proyecto, ubicacion):
        resultados_html, graficas_html, reporte_completo, reporte_graficos = predecir_corrosion(
            estacion, distancia, altitud, humedad, nombre_ing, proyecto, ubicacion
        )

        mostrar_descarga = reporte_completo != ""

        return resultados_html, graficas_html, gr.Button(visible=mostrar_descarga), gr.Button(visible=mostrar_descarga), reporte_completo, reporte_graficos

    def generar_descarga_completo(reporte_html):
        if reporte_html:
            filename = f"reporte_completo_{datetime.now().strftime('%Y%m%d_%H%M')}.html"
            temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.html', mode='w', encoding='utf-8')
            temp_file.write(reporte_html)
            temp_file.close()
            return gr.File(value=temp_file.name, label=filename, visible=True)
        return gr.File(visible=False)

    def generar_descarga_graficos(reporte_html):
        if reporte_html:
            filename = f"validacion_modelo_{datetime.now().strftime('%Y%m%d_%H%M')}.html"
            temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.html', mode='w', encoding='utf-8')
            temp_file.write(reporte_html)
            temp_file.close()
            return gr.File(value=temp_file.name, label=filename, visible=True)
        return gr.File(visible=False)

    # Conectar componentes
    btn_predict.click(
        fn=procesar_prediccion,
        inputs=[estacion, distancia, altitud, humedad, nombre_ing, proyecto, ubicacion],
        outputs=[resultados, graficas, descarga_btn_completo, descarga_btn_graficos, reporte_actual_completo, reporte_actual_graficos]
    )

    descarga_btn_completo.click(
        fn=generar_descarga_completo,
        inputs=[reporte_actual_completo],
        outputs=[archivo_descarga_completo]
    )

    descarga_btn_graficos.click(
        fn=generar_descarga_graficos,
        inputs=[reporte_actual_graficos],
        outputs=[archivo_descarga_graficos]
    )

# ==============================================================================
# EJECUCIÓN
# ==============================================================================

if __name__ == "__main__":
    demo.launch(
        debug=False,
        show_error=True,
        server_name="0.0.0.0",
        server_port=7860
    )