@extends('layouts.app')

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

@section('content')
<div class="animate-fadeIn">
    {{-- Saludo --}}
    <div class="greeting">
        <h1>Hola, <span>{{ Auth::user()->name }}</span> 👋</h1>
        <p>{{ \Carbon\Carbon::now()->locale('es')->isoFormat('dddd, D [de] MMMM [de] YYYY') }}</p>
    </div>

    {{-- Stat Cards --}}
    <div class="stats-grid mb-lg">
        <a href="{{ route('companies.index') }}" class="stat-card green" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="stat-card-top">
                <div>
                    <div class="stat-value">{{ $companiesCount ?? 0 }}</div>
                    <div class="stat-label" style="color: var(--text-primary);">
                        {{ Auth::user()->isAdmin() ? 'Empresas Activas' : 'Mis Empresas' }}
                    </div>
                </div>
                <div class="stat-icon">
                    <i class="ph ph-buildings"></i>
                </div>
            </div>
        </a>

        <a href="{{ route('companies.index') }}" class="stat-card blue" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="stat-card-top">
                <div>
                    <div class="stat-value">{{ $branchesCount ?? 0 }}</div>
                    <div class="stat-label" style="color: var(--text-primary);">
                        {{ Auth::user()->isAdmin() ? 'Sedes Activas' : 'Mis Sedes' }}
                    </div>
                </div>
                <div class="stat-icon">
                    <i class="ph ph-map-trifold"></i>
                </div>
            </div>
        </a>

        <a href="{{ route('inventory.index') }}" class="stat-card orange" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
            <div class="stat-card-top">
                <div>
                    <div class="stat-value">{{ $inventoryCount ?? 0 }}</div>
                    <div class="stat-label" style="color: var(--text-primary);">
                        {{ Auth::user()->isAdmin() ? 'Total Equipos' : 'Mis Equipos' }}
                    </div>
                </div>
                <div class="stat-icon">
                    <i class="ph ph-package"></i>
                </div>
            </div>
        </a>

        @if(Auth::user()->isAdmin())
            <a href="{{ route('users.index') }}" class="stat-card red" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div class="stat-card-top">
                    <div>
                        <div class="stat-value">{{ $usersCount ?? 0 }}</div>
                        <div class="stat-label" style="color: var(--text-primary);">Usuarios Activos</div>
                    </div>
                    <div class="stat-icon">
                        <i class="ph ph-users"></i>
                    </div>
                </div>
            </a>
            <a href="{{ route('tickets.index') }}" class="stat-card purple" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div class="stat-card-top">
                    <div>
                        <div class="stat-value">{{ $ticketsCount ?? 0 }}</div>
                        <div class="stat-label" style="color: var(--text-primary);">Tickets Abiertos</div>
                    </div>
                    <div class="stat-icon">
                        <i class="ph ph-ticket"></i>
                    </div>
                </div>
            </a>
        @else
            <a href="{{ route('tickets.index') }}" class="stat-card red" style="text-decoration: none; display: block; transition: transform 0.2s; cursor: pointer;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'">
                <div class="stat-card-top">
                    <div>
                        <div class="stat-value">{{ $ticketsCount ?? 0 }}</div>
                        <div class="stat-label" style="color: var(--text-primary);">Tickets Abiertos</div>
                    </div>
                    <div class="stat-icon">
                        <i class="ph ph-ticket"></i>
                    </div>
                </div>
            </a>
        @endif
    </div>

    <style>
        .dashboard-grid-cards > .card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .dashboard-grid-cards > .card > .empty-state {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
    <div class="form-row dashboard-grid-cards" style="align-items: stretch; margin-bottom: var(--space-lg);">

        {{-- EMPRESAS Y SEDES --}}
        @if(isset($myCompanies) && $myCompanies->count() > 0)
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="ph ph-buildings" style="color: var(--primary);"></i>
                        {{ Auth::user()->isAdmin() ? 'Empresas y Sedes' : 'Mis Empresas y Sedes' }}
                    </h3>
                </div>

                @foreach($myCompanies as $company)
                    <div x-data="{ open: false }" style="margin-bottom: var(--space-sm); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-sm);">
                        {{-- Empresa header --}}
                        <div @click="open = !open" class="d-flex align-center gap-md" style="cursor: pointer;">
                            <div class="avatar-sm avatar">
                                @if($company->logo)
                                    <img src="{{ asset('storage/' . $company->logo) }}" alt="{{ $company->name }}">
                                @else
                                    {{ strtoupper(substr($company->name, 0, 2)) }}
                                @endif
                            </div>
                            <div style="flex: 1; min-width: 0;">
                                <div style="font-weight: 600; color: var(--text-primary); word-break: break-word;">
                                    {{ $company->name }}
                                </div>
                                <div class="text-sm text-muted">
                                    {{ $company->city ?? '' }}{{ $company->city && $company->department ? ', ' : '' }}{{ $company->department ?? '' }}
                                </div>
                            </div>
                            <div class="d-flex gap-sm align-center">
                                <a href="{{ route('companies.show', $company) }}" @click.stop class="btn btn-outline btn-sm" title="Ver Empresa">
                                    <i class="ph ph-eye"></i>
                                </a>
                                <i class="ph ph-caret-down" style="color: var(--text-muted); transition: transform 0.3s ease;" :style="open ? 'transform: rotate(180deg);' : ''"></i>
                            </div>
                        </div>

                        {{-- Sedes de esta empresa --}}
                        <div x-show="open" x-transition style="display: none; padding-left: var(--space-lg); margin-top: var(--space-md); border-top: 1px solid var(--border-color); padding-top: var(--space-md);">
                            @if($company->branches->count() > 0)
                                @foreach($company->branches as $branch)
                                    <div class="list-item" style="margin-bottom: var(--space-xs); padding: var(--space-sm) var(--space-md);">
                                        <div class="avatar-sm avatar" style="width: 32px; height: 32px; font-size: 0.7rem; background: {{ $branch->is_main ? 'var(--primary-light)' : 'var(--bg-input)' }}; color: {{ $branch->is_main ? 'var(--primary)' : 'var(--text-muted)' }};">
                                            <i class="ph ph-map-pin" style="font-size: 0.85rem;"></i>
                                        </div>
                                        <div class="list-item-content">
                                            <div class="list-item-title" style="font-size: 0.85rem;">
                                                {{ $branch->name }}
                                                @if($branch->is_main)
                                                    <span class="badge badge-primary" style="font-size: 0.55rem;">Principal</span>
                                                @endif
                                            </div>
                                            <div class="list-item-subtitle" style="font-size: 0.75rem;">
                                                {{ $branch->address ?? 'Sin dirección' }}
                                                · <strong>{{ $branch->inventory_items_count ?? 0 }}</strong> equipos
                                            </div>
                                        </div>
                                        <a href="{{ route('companies.branches.show', [$company, $branch]) }}" class="btn btn-ghost btn-icon" style="width: 32px; height: 32px;">
                                            <i class="ph ph-arrow-right" style="font-size: 0.9rem;"></i>
                                        </a>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted text-sm" style="margin: 0;">No hay sedes registradas.</p>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @endif



        {{-- Equipos Recientes (tanto admin como técnico/cliente) --}}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-package" style="color: var(--secondary);"></i>
                    {{ Auth::user()->isAdmin() ? 'Equipos Registrados Recientemente' : 'Mis Equipos Asignados Recientemente' }}
                </h3>
            </div>

            @if(isset($recentInventory) && $recentInventory->count() > 0)
                @foreach($recentInventory as $item)
                    <div class="list-item" style="margin-bottom: var(--space-xs);">
                        <div class="avatar-sm avatar" style="background: var(--primary-light); color: var(--primary);">
                            <i class="ph {{ $item->category && $item->category->icon ? $item->category->icon : 'ph-device-tablet' }}"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item-title" style="font-size: 0.9rem; font-weight: 600;">{{ $item->name }}</div>
                            <div class="list-item-subtitle" style="font-size: 0.78rem;">
                                {{ $item->brand }} {{ $item->model }} · S/N: {{ $item->serial_number ?? 'N/A' }}
                                <br>
                                <span class="text-xs" style="color: var(--text-muted);">
                                    Sede: {{ $item->branch->name }} ({{ $item->branch->company->name }})
                                </span>
                            </div>
                        </div>
                        <div class="d-flex align-center gap-sm">
                            <span class="badge badge-{{ $item->status === 'activo' ? 'success' : ($item->status === 'mantenimiento' ? 'warning' : 'danger') }}" style="font-size: 0.65rem;">
                                {{ strtoupper($item->status) }}
                            </span>
                            <a href="{{ route('inventory.show', $item) }}" class="btn btn-ghost btn-icon" style="width: 32px; height: 32px;" title="Ver equipo">
                                <i class="ph ph-arrow-right" style="font-size: 0.9rem;"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="empty-state" style="padding: var(--space-lg);">
                    <i class="ph ph-package" style="font-size: 2.5rem;"></i>
                    <p style="margin: 0;">No hay equipos registrados o asignados.</p>
                    @if(Auth::user()->isAdmin())
                        <a href="{{ route('inventory.create') }}" class="btn btn-primary btn-sm mt-md">
                            <i class="ph ph-plus"></i> Registrar primer equipo
                        </a>
                    @endif
                </div>
            @endif
        </div>

        {{-- Tickets Recientes --}}
        <div class="card">
            <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
                <h3 class="card-title">
                    <i class="ph ph-ticket" style="color: var(--primary);"></i>
                    Tickets Recientes
                </h3>
                <a href="{{ route('tickets.index') }}" class="btn btn-outline btn-sm">Ver todos</a>
            </div>

            @if(isset($recentTickets) && $recentTickets->count() > 0)
                @foreach($recentTickets as $ticket)
                    <div class="list-item" style="margin-bottom: var(--space-xs);">
                        <div class="avatar-sm avatar" style="background: var(--bg-input); color: var(--text-primary);">
                            {{ substr($ticket->ticket_number, -4) }}
                        </div>
                        <div class="list-item-content">
                            <div class="list-item-title" style="font-size: 0.9rem; font-weight: 600;">{{ $ticket->title }}</div>
                            <div class="list-item-subtitle" style="font-size: 0.78rem;">
                                Por: {{ $ticket->user->name }} · Empresa: {{ $ticket->company ? $ticket->company->name : 'N/A' }}
                                <br>
                                <span class="text-xs" style="color: var(--text-muted);">
                                    @if($ticket->assignee)
                                        Asignado a: {{ $ticket->assignee->name }}
                                    @else
                                        Sin asignar
                                    @endif
                                    · {{ $ticket->created_at->diffForHumans() }}
                                </span>
                            </div>
                        </div>
                        <div class="d-flex align-center gap-sm">
                            @php
                                $statusColors = [
                                    'open' => 'danger',
                                    'in_progress' => 'warning',
                                    'resolved' => 'success',
                                    'closed' => 'muted',
                                    'escalated' => 'primary'
                                ];
                                $statusLabels = [
                                    'open' => 'Abierto',
                                    'in_progress' => 'En Progreso',
                                    'resolved' => 'Resuelto',
                                    'closed' => 'Cerrado',
                                    'escalated' => 'Escalado IA'
                                ];
                            @endphp
                            <span class="badge badge-{{ $statusColors[$ticket->status] ?? 'muted' }}" style="font-size: 0.65rem;">
                                {{ strtoupper($statusLabels[$ticket->status] ?? $ticket->status) }}
                            </span>
                            <a href="{{ route('tickets.show', $ticket) }}" class="btn btn-ghost btn-icon" style="width: 32px; height: 32px;" title="Ver ticket">
                                <i class="ph ph-arrow-right" style="font-size: 0.9rem;"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="empty-state" style="padding: var(--space-lg);">
                    <i class="ph ph-ticket" style="font-size: 2.5rem;"></i>
                    <p style="margin: 0;">No hay tickets recientes.</p>
                    <a href="{{ route('tickets.create') }}" class="btn btn-primary btn-sm mt-md">
                        <i class="ph ph-plus"></i> Crear nuevo ticket
                    </a>
                </div>
            @endif
        </div>

        {{-- Gráfica --}}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ph ph-chart-donut" style="color: var(--primary);"></i>
                    Resumen General
                </h3>
            </div>
            <div class="chart-container">
                <canvas id="dashboardChart"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('dashboardChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Empresas', 'Sedes', 'Equipos'@if(Auth::user()->isAdmin()), 'Usuarios'@endif],
                datasets: [{
                    data: [{{ $companiesCount ?? 0 }}, {{ $branchesCount ?? 0 }}, {{ $inventoryCount ?? 0 }}@if(Auth::user()->isAdmin()), {{ $usersCount ?? 0 }}@endif],
                    backgroundColor: [
                        '#91c849',
                        '#14a7ed',
                        '#f59e0b'@if(Auth::user()->isAdmin()),
                        '#dc3545'@endif
                    ],
                    borderColor: '#ffffff',
                    borderWidth: 3,
                    borderRadius: 6,
                    hoverOffset: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '65%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#5a5a72',
                            padding: 16,
                            font: {
                                family: 'Inter',
                                size: 12
                            },
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    }
                }
            }
        });
    }
});
</script>
@endpush
@endsection