<?php
use App\Livewire\Forms\LoginForm;
use Illuminate\Support\Facades\Session;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('layouts.login-full')] class extends Component
{
    public LoginForm $form;

    public function login(): void
    {
        $this->validate();
        $this->form->authenticate();
        Session::regenerate();

        // Redirigir según rol
        $user = auth()->user();
        if ($user->hasRole(['usuario'])) {
            $this->redirect(route('portal.index'));
        } else {
            $this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
        }
    }
}; ?>

<div id="nexus-login-root">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', 'Segoe UI', sans-serif; }

        #nexus-login-root {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .bg-layer {
            position: fixed;
            inset: 0;
            z-index: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .bg-desktop { background-image: url('/images/bg-desktop.jpg'); display: block; }
        .bg-mobile  { background-image: url('/images/bg-mobile.jpg');  display: none;  }

        @media (max-width: 767px) {
            .bg-desktop { display: none; }
            .bg-mobile  { display: block; }
        }

        .bg-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.15);
        }

        .login-card {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 420px;
            margin: 16px;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 20px;
            padding: 44px 40px 36px;
            box-shadow: 0 32px 64px rgba(0,0,0,0.35);
        }

        .logo-wrap {
            text-align: center;
            margin-bottom: 28px;
        }
        .logo-wrap img {
            max-height: 120px;
            max-width: 220px;
            object-fit: contain;
        }

        .field-group { margin-bottom: 18px; }
        .field-group label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .field-group .input-wrap { position: relative; }
        .field-group input {
            width: 100%;
            padding: 13px 44px 13px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 0.95rem;
            color: #111827;
            background: #f9fafb;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .field-group input:focus {
            border-color: #4f46e5;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
        }
        .toggle-pw {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            padding: 4px;
            line-height: 1;
        }
        .toggle-pw:hover { color: #4f46e5; }

        .field-error {
            font-size: 0.78rem;
            color: #dc2626;
            margin-top: 5px;
        }

        .btn-login {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            color: #fff;
            font-size: 0.98rem;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            margin-top: 8px;
            transition: opacity 0.2s, transform 0.15s;
            letter-spacing: 0.03em;
        }
        .btn-login:hover  { opacity: 0.92; transform: translateY(-1px); }
        .btn-login:active { transform: translateY(0); }

        @media (max-width: 460px) {
            .login-card { padding: 36px 24px 28px; }
        }
    </style>

    <!-- Fondos -->
    <div class="bg-layer bg-desktop"></div>
    <div class="bg-layer bg-mobile"></div>
    <div class="bg-overlay"></div>

    <!-- Tarjeta -->
    <div class="login-card">

        <div class="logo-wrap">
            <img src="/images/logo.png" alt="Logo">
        </div>

        <x-auth-session-status class="mb-4" :status="session('status')" />

        <form wire:submit="login">

            <div class="field-group">
                <label for="email">Correo electrónico</label>
                <div class="input-wrap">
                    <input
                        wire:model="form.email"
                        id="email"
                        type="email"
                        name="email"
                        placeholder="usuario@correo.com"
                        required
                        autofocus
                        autocomplete="username"
                    >
                </div>
                @error('form.email')
                    <p class="field-error">{{ $message }}</p>
                @enderror
            </div>

            <div class="field-group">
                <label for="password">Contraseña</label>
                <div class="input-wrap">
                    <input
                        wire:model="form.password"
                        id="login-pw"
                        type="password"
                        name="password"
                        placeholder="••••••••"
                        required
                        autocomplete="current-password"
                    >
                    <button type="button" class="toggle-pw" onclick="nexusTogglePw()">
                        <svg id="icon-eye" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                        <svg id="icon-eye-off" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none">
                            <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
                            <line x1="1" y1="1" x2="23" y2="23"/>
                        </svg>
                    </button>
                </div>
                @error('form.password')
                    <p class="field-error">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit" class="btn-login">Ingresar</button>

        </form>
    </div>

    <script>
    function nexusTogglePw() {
        const input  = document.getElementById('login-pw');
        const eyeOn  = document.getElementById('icon-eye');
        const eyeOff = document.getElementById('icon-eye-off');
        if (input.type === 'password') {
            input.type = 'text';
            eyeOn.style.display  = 'none';
            eyeOff.style.display = 'block';
        } else {
            input.type = 'password';
            eyeOn.style.display  = 'block';
            eyeOff.style.display = 'none';
        }
    }
    </script>

</div>
