import matplotlib.pyplot as plt
import numpy as np
import os

# 1. Preparar carpeta
if not os.path.exists('figuras'):
    os.makedirs('figuras')

# --- Función para Clasificación Básica ---
def guardar_angulo_basico(grados, nombre, color):
    fig, ax = plt.subplots(figsize=(4, 3))
    x = [np.cos(0), 0, np.cos(np.radians(grados))]
    y = [np.sin(0), 0, np.sin(np.radians(grados))]
    ax.plot(x, y, color=color, linewidth=5)
    ax.plot(0, 0, 'ko', markersize=10)
    t = np.linspace(0, np.radians(grados), 50)
    ax.plot(0.4 * np.cos(t), 0.4 * np.sin(t), 'k--', alpha=0.5)
    ax.set_xlim(-1.1, 1.1), ax.set_ylim(-0.2, 1.1)
    ax.axis('off')
    plt.savefig(f'figuras/{nombre}.png', bbox_inches='tight', transparent=True)
    plt.close()

# --- Función para Paralelas y Transversal ---
def guardar_paralelas(tipo, nombre):
    fig, ax = plt.subplots(figsize=(6, 4))
    # Dibujar Paralelas
    ax.plot([-1, 3], [1, 1], 'k-', lw=2) # Superior
    ax.plot([-1, 3], [0, 0], 'k-', lw=2) # Inferior
    # Dibujar Transversal
    ax.plot([0, 2], [-0.5, 2.5], 'r-', lw=2)
    
    # Coordenadas de los vértices (0.5, 1) y (1, 1.5) aproximadamente
    # Vamos a marcar los ángulos según el tipo
    if tipo == 'correspondientes':
        # Ángulo arriba derecha y abajo derecha
        ax.plot(1, 1, 'ro', markersize=8)
        ax.plot(0.33, 0, 'ro', markersize=8)
        ax.text(1.2, 1.2, "1", color='red', fontsize=14, fontweight='bold')
        ax.text(0.5, 0.2, "1'", color='red', fontsize=14, fontweight='bold')
    elif tipo == 'alternos_internos':
        # Los que forman la "Z"
        ax.plot(1, 1, 'bo', markersize=8)
        ax.plot(0.33, 0, 'bo', markersize=8)
        ax.text(0.6, 0.7, "α", color='blue', fontsize=14, fontweight='bold')
        ax.text(0.7, 0.1, "β", color='blue', fontsize=14, fontweight='bold')
    elif tipo == 'alternos_externos':
        ax.plot(1.66, 2, 'go', markersize=8)
        ax.plot(-0.33, -1, 'go', markersize=8) # Fuera de rango pero visual
        ax.text(1.8, 2.1, "Ext 1", color='green', fontsize=12)
        ax.text(-0.8, -0.4, "Ext 2", color='green', fontsize=12)

    ax.set_xlim(-0.5, 2.5), ax.set_ylim(-0.5, 2)
    ax.axis('off')
    plt.savefig(f'figuras/{nombre}.png', bbox_inches='tight', transparent=True)
    plt.close()

# Generar todo
guardar_angulo_basico(45, 'agudo', '#FF5733')
guardar_angulo_basico(90, 'recto', '#33FF57')
guardar_angulo_basico(135, 'obtuso', '#3357FF')
guardar_angulo_basico(180, 'llano', '#F333FF')
guardar_paralelas('correspondientes', 'correspondientes')
guardar_paralelas('alternos_internos', 'alternos_internos')
guardar_paralelas('alternos_externos', 'alternos_externos')

from IPython.display import HTML

HTML('''
<style>

p, li, span, div, h1, h2, h3, h4, h5, h6, td, th {
  word-break: keep-all !important;
  overflow-wrap: normal !important; 
  hyphens: none !important;
}

/* Dejamos que el código sí se corte para que no rompa la web */
pre, code, pre *, code * {
  word-break: break-all !important;
}

.tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(0,0,0,0.15);
  font-weight: 500;
  color: inherit;
  transition: 0.2s ease-in-out;
}

.tooltip:hover {
  color: #0b63b6;
  border-bottom-color: #0b63b6;
  z-index: 9999; 
}

/* Caja del popup */
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  
  width: 260px;
  background-color: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 10px 14px;

  /* Capas altas para no chocar con las pestañas */
  position: absolute;
  z-index: 99999 !important; 
  
  /* Cae hacia abajo */
  top: 130%; 
  
  /* FIX LATERAL: Nace desde el inicio de la palabra hacia la derecha */
  left: 0; 
  /* (Hemos borrado el transform: translateX(-50%) para que no se vaya a la izquierda) */
  
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: opacity 0.25s ease-in-out;

  font-size: 0.85rem;
  line-height: 1.4rem;
  text-align: left; /* Aseguramos que el texto del globo se lea bien */
}

/* Mostrar tooltip */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Colores temáticos */
.tooltip.definicion .tooltiptext {
  border-left: 4px solid #1e88e5;
  background: #eaf4ff;
}

.tooltip.ejemplo .tooltiptext {
  border-left: 4px solid #43a047;
  background: #e9f7ed;
}

.tooltip.alerta .tooltiptext {
  border-left: 4px solid #fb8c00;
  background: #fff3e0;
}
</style>
''')