#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
OPCIÓN ALTERNATIVA: Aplicación completamente en Python con Flask

Instala primero:
  pip install flask pymongo python-dotenv
  
Luego ejecuta:
  python app_flask.py
"""

from flask import Flask, render_template_string, request, jsonify
from pymongo import MongoClient, errors as mongo_errors
from datetime import datetime
import os
from dotenv import load_dotenv
import json

# Cargar variables de entorno
load_dotenv()

app = Flask(__name__)

# Configuración
MONGODB_URI = os.getenv('MONGODB_URI', 'mongodb+srv://examen1:mosarela@cluster0.ynvaey5.mongodb.net/?appName=Cluster0')
PORT = int(os.getenv('PORT', 5000))

# Conectar a MongoDB
try:
    client = MongoClient(MONGODB_URI)
    db = client['registro-app']
    usuarios_collection = db['usuarios']
    
    # Crear índice único para teléfono
    usuarios_collection.create_index('telefono', unique=True)
    print("✅ Conectado a MongoDB")
except Exception as e:
    print(f"❌ Error al conectar a MongoDB: {e}")

# Template HTML
HTML_TEMPLATE = '''
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Registro - Python</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .form-section {
            padding: 40px;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            color: #333;
            font-weight: 600;
            margin-bottom: 8px;
        }

        input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .button-group {
            display: flex;
            gap: 10px;
        }

        button {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-guardar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-guardar:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-limpiar {
            background: #f0f0f0;
            color: #333;
        }

        .btn-limpiar:hover {
            background: #e0e0e0;
        }

        .alert {
            padding: 12px 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            display: none;
            animation: slideIn 0.3s ease;
        }

        .alert.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .alert.show {
            display: block;
        }

        .table-section {
            padding: 40px;
            background: #fafafa;
        }

        h2 {
            color: #333;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 6px;
            overflow: hidden;
        }

        th {
            background: #667eea;
            color: white;
            padding: 15px;
            text-align: left;
        }

        td {
            padding: 12px 15px;
            border-bottom: 1px solid #e0e0e0;
        }

        tr:hover {
            background: #f5f5f5;
        }

        .btn-eliminar {
            background: #dc3545;
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .btn-eliminar:hover {
            background: #c82333;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #999;
        }

        .badge {
            background: #667eea;
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 15px;
        }

        .version {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="form-section">
                <h1>📋 Sistema de Registro</h1>
                <p class="subtitle">Desarrollado en Python + Flask + MongoDB</p>
                
                <div id="alerta" class="alert"></div>

                <form id="formulario">
                    <div class="form-group">
                        <label for="nombre">Nombre *</label>
                        <input type="text" id="nombre" placeholder="Ej: Juan Pérez" required minlength="3">
                    </div>

                    <div class="form-group">
                        <label for="grupo">Grupo *</label>
                        <input type="text" id="grupo" placeholder="Ej: 1º DAM" required>
                    </div>

                    <div class="form-group">
                        <label for="telefono">Teléfono *</label>
                        <input type="tel" id="telefono" placeholder="Ej: 612345678" required pattern="[0-9]{7,15}">
                    </div>

                    <div class="button-group">
                        <button type="submit" class="btn-guardar">💾 Registrar</button>
                        <button type="reset" class="btn-limpiar">🗑️ Limpiar</button>
                    </div>
                </form>
            </div>

            <div class="table-section">
                <div class="badge" id="contador">Total: 0 registros</div>
                <h2>📊 Registros guardados</h2>
                <div id="tabla-contenedor"></div>
                <div class="version">
                    Versión Python - Flask - MongoDB
                </div>
            </div>
        </div>
    </div>

    <script>
        const formulario = document.getElementById('formulario');
        const alerta = document.getElementById('alerta');
        const tablaContenedor = document.getElementById('tabla-contenedor');
        const contador = document.getElementById('contador');

        function mostrarAlerta(mensaje, tipo) {
            alerta.textContent = mensaje;
            alerta.className = `alert ${tipo} show`;
            setTimeout(() => alerta.classList.remove('show'), 4000);
        }

        formulario.addEventListener('submit', async (e) => {
            e.preventDefault();

            const nombre = document.getElementById('nombre').value.trim();
            const grupo = document.getElementById('grupo').value.trim();
            const telefono = document.getElementById('telefono').value.trim();

            try {
                const response = await fetch('/api/usuarios', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({nombre, grupo, telefono})
                });

                const data = await response.json();

                if (!response.ok) {
                    mostrarAlerta(data.error || 'Error', 'error');
                    return;
                }

                mostrarAlerta('✅ Usuario registrado', 'success');
                formulario.reset();
                cargarUsuarios();
            } catch (error) {
                mostrarAlerta('Error: ' + error.message, 'error');
            }
        });

        async function cargarUsuarios() {
            try {
                const response = await fetch('/api/usuarios');
                const usuarios = await response.json();

                if (usuarios.length === 0) {
                    tablaContenedor.innerHTML = '<div class="empty-state">📭 No hay registros</div>';
                    contador.textContent = 'Total: 0 registros';
                    return;
                }

                let html = '<table><thead><tr><th>Nombre</th><th>Grupo</th><th>Teléfono</th><th>Fecha</th><th>Acción</th></tr></thead><tbody>';
                
                usuarios.forEach(u => {
                    const fecha = new Date(u.fechaRegistro).toLocaleDateString('es-ES');
                    html += `<tr>
                        <td>${u.nombre}</td>
                        <td>${u.grupo}</td>
                        <td>${u.telefono}</td>
                        <td>${fecha}</td>
                        <td><button class="btn-eliminar" onclick="eliminar('${u._id}')">Eliminar</button></td>
                    </tr>`;
                });

                html += '</tbody></table>';
                tablaContenedor.innerHTML = html;
                contador.textContent = `Total: ${usuarios.length} registro${usuarios.length !== 1 ? 's' : ''}`;
            } catch (error) {
                tablaContenedor.innerHTML = '<div class="empty-state">❌ Error al cargar</div>';
            }
        }

        async function eliminar(id) {
            if (!confirm('¿Eliminar?')) return;

            try {
                const response = await fetch(`/api/usuarios/${id}`, {method: 'DELETE'});
                if (response.ok) {
                    mostrarAlerta('✅ Eliminado', 'success');
                    cargarUsuarios();
                }
            } catch (error) {
                mostrarAlerta('Error: ' + error.message, 'error');
            }
        }

        cargarUsuarios();
        setInterval(cargarUsuarios, 5000);
    </script>
</body>
</html>
'''

# Rutas
@app.route('/')
def index():
    return render_template_string(HTML_TEMPLATE)

@app.route('/api/usuarios', methods=['GET'])
def get_usuarios():
    """Obtener todos los usuarios"""
    try:
        usuarios = list(usuarios_collection.find().sort('fechaRegistro', -1))
        # Convertir ObjectId a string
        for u in usuarios:
            u['_id'] = str(u['_id'])
        return jsonify(usuarios)
    except Exception as e:
        return jsonify({'error': str(e)}), 500

@app.route('/api/usuarios', methods=['POST'])
def crear_usuario():
    """Crear nuevo usuario"""
    try:
        data = request.get_json()
        
        # Validaciones
        if not all([data.get('nombre'), data.get('grupo'), data.get('telefono')]):
            return jsonify({'error': 'Todos los campos son requeridos'}), 400
        
        nombre = data['nombre'].strip()
        if len(nombre) < 3:
            return jsonify({'error': 'El nombre debe tener al menos 3 caracteres'}), 400
        
        # Verificar duplicado
        if usuarios_collection.find_one({'telefono': data['telefono']}):
            return jsonify({'error': 'Este teléfono ya está registrado'}), 400
        
        # Insertar
        resultado = usuarios_collection.insert_one({
            'nombre': nombre,
            'grupo': data['grupo'].strip(),
            'telefono': data['telefono'].strip(),
            'fechaRegistro': datetime.now()
        })
        
        return jsonify({
            'mensaje': 'Usuario registrado',
            'usuario': {'_id': str(resultado.inserted_id)}
        }), 201
        
    except mongo_errors.DuplicateKeyError:
        return jsonify({'error': 'Este teléfono ya está registrado'}), 400
    except Exception as e:
        return jsonify({'error': str(e)}), 500

@app.route('/api/usuarios/<id>', methods=['DELETE'])
def eliminar_usuario(id):
    """Eliminar usuario"""
    try:
        from bson.objectid import ObjectId
        resultado = usuarios_collection.delete_one({'_id': ObjectId(id)})
        
        if resultado.deleted_count == 0:
            return jsonify({'error': 'Usuario no encontrado'}), 404
        
        return jsonify({'mensaje': 'Usuario eliminado'})
    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    print("\n🚀 Iniciando aplicación Flask...")
    print(f"📝 URL: http://localhost:{PORT}")
    print("⏹️  Presiona Ctrl+C para detener\n")
    app.run(debug=True, port=PORT)
