<?php
session_start();
include 'conexion.php';

$error = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $usuario = trim($_POST['usuario']);
    $clave = trim($_POST['clave']);

    if (!empty($usuario) && !empty($clave)) {
        // Buscar usuario en la base de datos
        $sql = "SELECT id_usuario, nombre_usuario, clave_hash FROM usuarios_sistema WHERE nombre_usuario = ? OR correo_institucional = ?";
        $stmt = $conexion->prepare($sql);
        $stmt->bind_param("ss", $usuario, $usuario);
        $stmt->execute();
        $resultado = $stmt->get_result();

        if ($resultado->num_rows == 1) {
            $fila = $resultado->fetch_assoc();
            // ⚠️ IMPORTANTE: Si tus contraseñas NO están encriptadas, cambia esta línea por: if ($clave == $fila['clave_hash'])
            if (password_verify($clave, $fila['clave_hash'])) {
                $_SESSION['usuario_id'] = $fila['id_usuario'];
                $_SESSION['usuario_nombre'] = $fila['nombre_usuario'];
                // Redirige a la página de productos/administración
                header("Location: productos.php");
                exit;
            } else {
                $error = "❌ Contraseña incorrecta";
            }
        } else {
            $error = "❌ Usuario o correo no existe";
        }
    } else {
        $error = "⚠️ Llena ambos campos";
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Panadería Kiarilu</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: { pan: { marron: '#8B4513', claro: '#D2B48C', crema: '#FFF8E1', oscuro: '#5C2E0E' } },
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], serif: ['Playfair Display', 'serif'] }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities { .text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.2); } .border-dorado { border: 3px solid #D2B48C; } }
    </style>
    <link rel="stylesheet" href="estilos.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body class="bg-pan-crema font-sans text-pan-oscuro fondo-patron min-h-screen flex items-center justify-center">

    <div class="bg-white/90 backdrop-blur-sm p-8 rounded-2xl shadow-2xl w-full max-w-md mx-4">
        <div class="text-center mb-6">
            <div class="w-24 h-24 rounded-full bg-white flex items-center justify-center mx-auto mb-4 border-dorado overflow-hidden">
                <img src="kiarilu.png" alt="Kiarilu" class="w-full h-full object-contain">
            </div>
            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-serif font-bold text-pan-marron">Bienvenido</h2>
            <p class="text-gray-600">Ingresa al sistema de administración</p>
        </div>

        <?php if($error != ""): ?>
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-3 mb-4 rounded"><?= $error ?></div>
        <?php endif; ?>

        <form method="POST" action="" class="space-y-5">
            <div>
                <label for="usuario" class="block font-medium mb-2">Usuario / Correo</label>
                <input type="text" id="usuario" name="usuario" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Tu usuario o correo" required>
            </div>

            <div>
                <label for="clave" class="block font-medium mb-2">Contraseña</label>
                <input type="password" id="clave" name="clave" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pan-marron" placeholder="Tu contraseña" required>
            </div>

            <button type="submit" class="w-full bg-pan-marron hover:bg-pan-oscuro text-white font-semibold py-3 px-10 rounded-lg transition-all transform hover:scale-[1.02] shadow-md">
                Ingresar al Sistema
            </button>
        </form>

        <div class="text-center mt-6 pt-4 border-t border-gray-200">
            <!-- ✅ CORREGIDO: Cambié index.html por index.php -->
            <a href="index.php" class="inline-block mt-3 text-pan-marron hover:underline">
                <i class="fa fa-arrow-left mr-1"></i> Volver a la página principal
            </a>
        </div>
    </div>

</body>
</html>