@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="page-title">
                <i class="bi bi-gear"></i> Configuración
            </h1>
            <p class="text-muted">Personaliza tu experiencia en InnoScale</p>
        </div>
    </div>

    <div class="row">
        <!-- Apariencia -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-palette"></i> Apariencia</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Tema de Color</label>
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-primary flex-fill" onclick="setTheme('light')">
                                <i class="bi bi-sun"></i> Claro
                            </button>
                            <button class="btn btn-outline-primary flex-fill" onclick="setTheme('dark')">
                                <i class="bi bi-moon"></i> Oscuro
                            </button>
                            <button class="btn btn-outline-primary flex-fill" onclick="setTheme('auto')">
                                <i class="bi bi-circle-half"></i> Auto
                            </button>
                        </div>
                        <small class="form-text text-muted mt-2 d-block">
                            El modo oscuro reduce la fatiga visual en ambientes con poca luz
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notificaciones -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-bell"></i> Notificaciones</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i> 
                            Las preferencias de notificaciones se configurarán próximamente
                        </div>
                    </div>
                    
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="notifEmail" checked disabled>
                        <label class="form-check-label" for="notifEmail">
                            Notificaciones por correo
                        </label>
                    </div>
                    
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="notifTicket" checked disabled>
                        <label class="form-check-label" for="notifTicket">
                            Nuevos tickets asignados
                        </label>
                    </div>
                    
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="notifComment" checked disabled>
                        <label class="form-check-label" for="notifComment">
                            Comentarios en mis tickets
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Privacidad -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-shield-lock"></i> Privacidad y Seguridad</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <p><strong>Última sesión:</strong></p>
                        <p class="text-muted">{{ $user->updated_at->diffForHumans() }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <p><strong>Cuenta creada:</strong></p>
                        <p class="text-muted">{{ $user->created_at->format('d/m/Y H:i') }}</p>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <a href="{{ route('profile.edit') }}" class="btn btn-outline-primary">
                            <i class="bi bi-key"></i> Cambiar Contraseña
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Información de la Cuenta -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Información de la Cuenta</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Nombre:</strong>
                        <p class="text-muted">{{ $user->name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Email:</strong>
                        <p class="text-muted">{{ $user->email }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Rol:</strong>
                        <p><span class="badge {{ role_badge_class($user->role) }}">{{ role_name($user->role) }}</span></p>
                    </div>
                    
                    <div class="mb-3">
                        <strong>Estado:</strong>
                        <p>
                            @if($user->is_active)
                                <span class="badge bg-success">Activo</span>
                            @else
                                <span class="badge bg-danger">Inactivo</span>
                            @endif
                        </p>
                    </div>
                    
                    <div class="d-grid">
                        <a href="{{ route('profile.edit') }}" class="btn btn-outline-primary">
                            <i class="bi bi-pencil"></i> Editar Perfil
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function setTheme(theme) {
    if (theme === 'light') {
        document.documentElement.removeAttribute('data-theme');
        localStorage.setItem('theme', 'light');
        showToast('Tema claro activado', 'success');
    } else if (theme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
        showToast('Tema oscuro activado', 'success');
    } else {
        localStorage.removeItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (prefersDark) {
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            document.documentElement.removeAttribute('data-theme');
        }
        showToast('Tema automático activado', 'success');
    }
}
</script>
@endsection