@extends('layouts.app')

@section('title', 'Usuarios — TI Manager')

@section('content')
<div x-data="{ viewMode: localStorage.getItem('viewMode_users') || 'list' }" class="animate-fadeIn">

    {{-- Modales centrales ya manejan los mensajes flash (vía app.blade.php) --}}

    {{-- Encabezado --}}
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-users" style="color: var(--secondary);"></i>
                Usuarios
                <span class="count">{{ $users->total() }} resultados</span>
            </h1>

            <div class="d-flex align-center gap-sm">
                <div class="view-toggle-group">
                    <button @click="viewMode = 'list'; localStorage.setItem('viewMode_users', 'list')"
                            :class="{'active': viewMode === 'list'}"
                            class="view-toggle-btn"
                            title="Vista de Lista">
                        <i class="ph ph-list"></i>
                    </button>
                    <button @click="viewMode = 'card'; localStorage.setItem('viewMode_users', 'card')"
                            :class="{'active': viewMode === 'card'}"
                            class="view-toggle-btn"
                            title="Vista de Tarjetas">
                        <i class="ph ph-grid-four"></i>
                    </button>
                </div>
                @if(Auth::user()->isAdmin())
                    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm">
                        <i class="ph ph-plus"></i>
                        <span class="desktop-only" style="display: inline;">Nuevo Usuario</span>
                    </a>
                @endif
            </div>
        </div>
    </div>

    {{-- Filtros y Búsqueda --}}
    <div class="card" style="padding: var(--space-md); margin-bottom: var(--space-lg);">
        <form method="GET" action="{{ route('users.index') }}" style="display: flex; flex-direction: column; gap: var(--space-md);">
            @if($currentRole !== 'all')
                <input type="hidden" name="role" value="{{ $currentRole }}">
            @endif
            <div style="display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: space-between; align-items: flex-end;">
                
                <div class="form-group" style="margin-bottom: 0;">
                    <label style="display: block; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);">Filtrar por Rol</label>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <a href="{{ route('users.index', ['role' => 'all', 'search' => $search]) }}" class="btn btn-sm {{ $currentRole === 'all' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Todos los roles</a>
                        <a href="{{ route('users.index', ['role' => 'super_admin', 'search' => $search]) }}" class="btn btn-sm {{ $currentRole === 'super_admin' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Administrador</a>
                        <a href="{{ route('users.index', ['role' => 'technician', 'search' => $search]) }}" class="btn btn-sm {{ $currentRole === 'technician' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Técnico</a>
                        <a href="{{ route('users.index', ['role' => 'client', 'search' => $search]) }}" class="btn btn-sm {{ $currentRole === 'client' ? 'btn-primary' : 'btn-outline' }}" style="box-shadow: none; font-weight: 500;">Cliente</a>
                    </div>
                </div>


            </div>
        </form>
    </div>

    @if($users->count() > 0)

        {{-- ═══ VISTA MÓVIL: Cards ═══ --}}
        <div class="card-grid-container" x-show="viewMode === 'card'" x-cloak>
            @foreach($users as $user)
                <div class="mobile-card">
                    <div class="mobile-card-header">
                        <div class="d-flex align-center gap-md">
                            <div class="avatar">
                                @if($user->avatar)
                                    <img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                @else
                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                @endif
                            </div>
                            <div>
                                <div class="list-item-title">{{ $user->name }}</div>
                                <div class="list-item-subtitle">{{ $user->email }}</div>
                            </div>
                        </div>
                        @if($user->isAdmin())
                            <span class="badge badge-success">Admin</span>
                        @elseif($user->isTechnician())
                            <span class="badge badge-info">Técnico</span>
                        @else
                            <span class="badge badge-muted">Cliente</span>
                        @endif
                    </div>

                    <div class="mobile-card-body">
                        <div class="mobile-card-row" style="flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Empresa</span>
                            <span class="mobile-card-value">
                                @if($user->isAdmin())
                                    <span class="text-muted">Todas</span>
                                @else
                                    @if($user->companies->count() > 0)
                                        {{ $user->companies->pluck('name')->join(', ') }}
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                @endif
                            </span>
                        </div>
                        <div class="mobile-card-row" style="margin-bottom: 8px; flex-direction: row; justify-content: space-between; align-items: center;">
                            <span class="mobile-card-label">Estado</span>
                            <span>
                                @if($user->is_active)
                                    <span class="badge badge-success">Activo</span>
                                @else
                                    <span class="badge badge-danger">Inactivo</span>
                                @endif
                            </span>
                        </div>
                    </div>
                    <div class="mobile-card-actions" style="margin-top: 24px; padding-top: 20px;">
                        <a href="{{ route('users.edit', $user) }}" class="btn btn-outline btn-sm" style="justify-content: center;">
                            <i class="ph ph-pencil-simple"></i> Editar
                        </a>
                        @if(Auth::user()->isAdmin())
                            <form action="{{ route('users.toggle-active', $user) }}" method="POST" style="flex: 1; display: flex;">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn btn-sm w-full {{ $user->is_active ? 'btn-danger' : 'btn-primary' }}" style="justify-content: center; padding: 0 8px;">
                                    <i class="ph ph-{{ $user->is_active ? 'prohibit' : 'check-circle' }}"></i>
                                    {{ $user->is_active ? 'Desactivar' : 'Activar' }}
                                </button>
                            </form>
                            @if($user->id !== 1 && $user->id !== Auth::id())
                            <form action="{{ route('users.destroy', $user) }}" method="POST" style="flex: 0 0 auto;" onsubmit="return confirmDelete(event, '¿Estás seguro de eliminar este usuario? Todos sus tickets y reportes pasarán al administrador principal.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger px-3" title="Eliminar">
                                    <i class="ph ph-trash"></i>
                                </button>
                            </form>
                            @endif
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- ═══ VISTA DESKTOP: Tabla ═══ --}}
        <div x-show="viewMode === 'list'" x-cloak>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Usuario</th>
                            <th>Rol</th>
                            <th>Empresa</th>
                            <th>Estado</th>
                            <th style="text-align: right;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>
                                    <div class="d-flex align-center gap-md">
                                        <div class="avatar-sm avatar">
                                            @if($user->avatar)
                                                <img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
                                            @else
                                                {{ strtoupper(substr($user->name, 0, 2)) }}
                                            @endif
                                        </div>
                                        <div>
                                            <div style="font-weight: 600; color: var(--text-primary);">{{ $user->name }}</div>
                                            <div class="text-sm text-muted">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($user->isAdmin())
                                        <span class="badge badge-success">Admin</span>
                                    @elseif($user->isTechnician())
                                        <span class="badge badge-info">Técnico</span>
                                    @else
                                        <span class="badge badge-muted">Cliente</span>
                                    @endif
                                </td>
                                <td>
                                    @if($user->isAdmin())
                                        <span class="text-muted" style="font-size: 0.875rem;">Todas</span>
                                    @else
                                        @if($user->companies->count() > 0)
                                            {{ $user->companies->pluck('name')->join(', ') }}
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    @endif
                                </td>
                                <td>
                                    @if($user->is_active)
                                        <span class="badge badge-success">Activo</span>
                                    @else
                                        <span class="badge badge-danger">Inactivo</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="table-actions" style="justify-content: flex-end;">
                                        <a href="{{ route('users.edit', $user) }}" class="btn btn-ghost btn-icon" title="Editar">
                                            <i class="ph ph-pencil-simple"></i>
                                        </a>
                                        @if(Auth::user()->isAdmin())
                                            <form action="{{ route('users.toggle-active', $user) }}" method="POST" style="display: inline;">
                                                @csrf
                                                @method('PATCH')
                                                <button type="submit"
                                                        class="btn btn-ghost btn-icon"
                                                        title="{{ $user->is_active ? 'Desactivar' : 'Activar' }}">
                                                    <i class="ph ph-{{ $user->is_active ? 'prohibit' : 'check-circle' }}"
                                                       style="color: {{ $user->is_active ? 'var(--danger)' : 'var(--success)' }};"></i>
                                                </button>
                                            </form>
                                            @if($user->id !== 1 && $user->id !== Auth::id())
                                                <form action="{{ route('users.destroy', $user) }}" method="POST" style="display: inline;" onsubmit="return confirmDelete(event, '¿Estás seguro de eliminar este usuario? Todos sus tickets y reportes pasarán al administrador principal.');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-ghost btn-icon" title="Eliminar">
                                                        <i class="ph ph-trash" style="color: var(--danger);"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Paginación --}}
        @if($users->hasPages())
            <div class="pagination-wrapper">
                {{ $users->appends(['role' => $currentRole !== 'all' ? $currentRole : null, 'search' => $search])->links() }}
            </div>
        @endif

    @else
        {{-- Estado Vacío --}}
        <div class="card">
            <div class="empty-state">
                <i class="ph ph-users"></i>
                <h3>No se encontraron usuarios</h3>
                <p>
                    @if($search)
                        No hay resultados para "<strong>{{ $search }}</strong>". Intenta con otro término de búsqueda.
                    @else
                        Aún no hay usuarios registrados en el sistema.
                    @endif
                </p>
                @if(Auth::user()->isAdmin())
                    <a href="{{ route('users.create') }}" class="btn btn-primary">
                        <i class="ph ph-plus"></i> Crear primer usuario
                    </a>
                @endif
            </div>
        </div>
    @endif

</div>
@endsection