@extends('layouts.app')

@section('title', 'Dashboard de Atividades')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">
<style>
    .stat-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,.1);
    }
    .progress-ring {
        transform: rotate(-90deg);
    }
    .view-toggle .btn {
        border-radius: 0;
    }
    .view-toggle .btn:first-child {
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
    .view-toggle .btn:last-child {
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }
    .activity-card {
        transition: all 0.3s ease;
    }
    .activity-card:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,.1);
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">Dashboard de Atividades</h2>
                <div class="d-flex gap-2">
                    <!-- View Toggle -->
                    <div class="btn-group view-toggle" role="group">
                        <a href="?view=cards{{ request()->has('cliente_id') ? '&cliente_id=' . request('cliente_id') : '' }}{{ request()->has('user_id') ? '&user_id=' . request('user_id') : '' }}"
                           class="btn btn-sm {{ $view == 'cards' ? 'btn-primary' : 'btn-outline-primary' }}">
                            <i class="fas fa-th-large"></i> Cards
                        </a>
                        <a href="?view=list{{ request()->has('cliente_id') ? '&cliente_id=' . request('cliente_id') : '' }}{{ request()->has('user_id') ? '&user_id=' . request('user_id') : '' }}"
                           class="btn btn-sm {{ $view == 'list' ? 'btn-primary' : 'btn-outline-primary' }}">
                            <i class="fas fa-list"></i> Lista
                        </a>
                        <a href="?view=calendar{{ request()->has('cliente_id') ? '&cliente_id=' . request('cliente_id') : '' }}{{ request()->has('user_id') ? '&user_id=' . request('user_id') : '' }}"
                           class="btn btn-sm {{ $view == 'calendar' ? 'btn-primary' : 'btn-outline-primary' }}">
                            <i class="fas fa-calendar"></i> Calendário
                        </a>
                    </div>

                    <!-- Export Button -->
                    <button class="btn btn-sm btn-outline-secondary" onclick="exportData()">
                        <i class="fas fa-download me-1"></i>Exportar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('activities.dashboard') }}" class="row g-3">
                <input type="hidden" name="view" value="{{ $view }}">

                <div class="col-md-3">
                    <label class="form-label">Cliente</label>
                    <select name="cliente_id" class="form-select" onchange="this.form.submit()">
                        <option value="">Todos os clientes</option>
                        @foreach($clientes as $cliente)
                            <option value="{{ $cliente->id }}" {{ $clienteId == $cliente->id ? 'selected' : '' }}>
                                {{ $cliente->nome }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">Responsável</label>
                    <select name="user_id" class="form-select" onchange="this.form.submit()">
                        <option value="">Todos os responsáveis</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ $userId == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select" onchange="this.form.submit()">
                        <option value="">Todos os status</option>
                        <option value="todo" {{ $status == 'todo' ? 'selected' : '' }}>A Fazer</option>
                        <option value="in_progress" {{ $status == 'in_progress' ? 'selected' : '' }}>Em Progresso</option>
                        <option value="review" {{ $status == 'review' ? 'selected' : '' }}>Em Revisão</option>
                        <option value="done" {{ $status == 'done' ? 'selected' : '' }}>Concluído</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Data Inicial</label>
                    <input type="date" name="start_date" class="form-control"
                           value="{{ $startDate }}" onchange="this.form.submit()">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Data Final</label>
                    <input type="date" name="end_date" class="form-control"
                           value="{{ $endDate }}" onchange="this.form.submit()">
                </div>
            </form>
        </div>
    </div>

    @if($view == 'cards')
        <!-- Estatísticas -->
        <div class="row g-3 mb-4">
            <!-- Total de Atividades -->
            <div class="col-md-3">
                <div class="card stat-card h-100" onclick="drilldown('status', 'all')">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-2">Total de Atividades</h6>
                                <h2 class="mb-0">{{ $stats['total'] }}</h2>
                            </div>
                            <div class="text-primary">
                                <i class="fas fa-tasks fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Em Progresso -->
            <div class="col-md-3">
                <div class="card stat-card h-100" onclick="drilldown('status', 'in_progress')">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-2">Em Progresso</h6>
                                <h2 class="mb-0">{{ $stats['in_progress'] }}</h2>
                            </div>
                            <div class="text-warning">
                                <i class="fas fa-spinner fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Concluídas -->
            <div class="col-md-3">
                <div class="card stat-card h-100" onclick="drilldown('status', 'done')">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-2">Concluídas</h6>
                                <h2 class="mb-0">{{ $stats['done'] }}</h2>
                            </div>
                            <div class="text-success">
                                <i class="fas fa-check-circle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Atrasadas -->
            <div class="col-md-3">
                <div class="card stat-card h-100" onclick="drilldown('status', 'overdue')">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-2">Atrasadas</h6>
                                <h2 class="mb-0 text-danger">{{ $stats['overdue'] }}</h2>
                            </div>
                            <div class="text-danger">
                                <i class="fas fa-exclamation-triangle fa-2x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Segunda linha de cards -->
        <div class="row g-3 mb-4">
            <!-- Progresso Médio -->
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Progresso Médio</h5>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <div class="text-center">
                            <svg width="120" height="120">
                                <circle cx="60" cy="60" r="54" fill="none" stroke="#e9ecef" stroke-width="12"/>
                                <circle cx="60" cy="60" r="54" fill="none" stroke="#0d6efd" stroke-width="12"
                                        stroke-dasharray="{{ 339.292 * ($avgProgress / 100) }} 339.292"
                                        class="progress-ring"/>
                            </svg>
                            <h3 class="mt-3">{{ round($avgProgress) }}%</h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Por Prioridade -->
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Por Prioridade</h5>
                    </div>
                    <div class="card-body">
                        @foreach(['P0' => 'danger', 'P1' => 'warning', 'P2' => 'info', 'P3' => 'success'] as $priority => $color)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-{{ $color }}">{{ $priority }}</span>
                                <span>{{ $priorityStats[$priority] ?? 0 }} atividades</span>
                            </div>
                            <div class="progress mb-3" style="height: 10px;">
                                <div class="progress-bar bg-{{ $color }}"
                                     style="width: {{ $stats['total'] > 0 ? (($priorityStats[$priority] ?? 0) / $stats['total'] * 100) : 0 }}%">
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Timeline -->
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">Atividades por Dia</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="timelineChart" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Clientes e Usuários -->
        <div class="row g-3 mb-4">
            <!-- Top Clientes -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Top Clientes</h5>
                        <small class="text-muted">Por quantidade de atividades</small>
                    </div>
                    <div class="card-body">
                        @forelse($topClientes as $item)
                            <div class="d-flex justify-content-between align-items-center mb-3 p-2 hover-bg-light rounded"
                                 style="cursor: pointer;" onclick="drilldown('cliente', {{ $item->cliente_id }})">
                                <div class="d-flex align-items-center">
                                    @if($item->cliente->logo)
                                        <img src="{{ asset($item->cliente->logo) }}" alt="{{ $item->cliente->nome }}"
                                             class="rounded-circle me-3" style="width: 40px; height: 40px; object-fit: cover;">
                                    @else
                                        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
                                             style="width: 40px; height: 40px;">
                                            {{ substr($item->cliente->nome, 0, 2) }}
                                        </div>
                                    @endif
                                    <div>
                                        <h6 class="mb-0">{{ $item->cliente->nome }}</h6>
                                        <small class="text-muted">{{ $item->total }} atividades</small>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        @empty
                            <p class="text-muted text-center">Nenhum cliente com atividades</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Top Usuários -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Top Responsáveis</h5>
                        <small class="text-muted">Por quantidade de atividades</small>
                    </div>
                    <div class="card-body">
                        @forelse($topUsers as $user)
                            <div class="d-flex justify-content-between align-items-center mb-3 p-2 hover-bg-light rounded"
                                 style="cursor: pointer;" onclick="drilldown('user', {{ $user->id }})">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-sm me-3">
                                        <span class="avatar-title rounded-circle bg-primary">
                                            {{ substr($user->name, 0, 2) }}
                                        </span>
                                    </div>
                                    <div>
                                        <h6 class="mb-0">{{ $user->name }}</h6>
                                        <small class="text-muted">{{ $user->total }} atividades</small>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-right text-muted"></i>
                            </div>
                        @empty
                            <p class="text-muted text-center">Nenhum responsável atribuído</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de Atividades Recentes -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Atividades Recentes</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    @forelse($activities->take(6) as $activity)
                        <div class="col-md-6 col-lg-4">
                            <div class="card activity-card h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="card-title mb-0">
                                            <a href="{{ route('activities.show', $activity) }}" class="text-decoration-none">
                                                {{ Str::limit($activity->title, 50) }}
                                            </a>
                                        </h6>
                                        <span class="badge bg-{{ $activity->priority_color }}">{{ $activity->priority }}</span>
                                    </div>

                                    @if($activity->cliente)
                                        <p class="text-muted small mb-2">
                                            <i class="fas fa-briefcase me-1"></i>{{ $activity->cliente->nome }}
                                        </p>
                                    @endif

                                    <div class="mb-3">
                                        <div class="progress" style="height: 5px;">
                                            <div class="progress-bar" style="width: {{ $activity->getProgressPercentage() }}%"></div>
                                        </div>
                                        <small class="text-muted">{{ round($activity->getProgressPercentage()) }}% concluído</small>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="avatar-group">
                                            @foreach($activity->assignees->take(3) as $assignee)
                                                <span class="avatar avatar-sm" title="{{ $assignee->name }}">
                                                    <span class="avatar-title rounded-circle bg-secondary">
                                                        {{ substr($assignee->name, 0, 2) }}
                                                    </span>
                                                </span>
                                            @endforeach
                                            @if($activity->assignees->count() > 3)
                                                <span class="avatar avatar-sm">
                                                    <span class="avatar-title rounded-circle bg-secondary">
                                                        +{{ $activity->assignees->count() - 3 }}
                                                    </span>
                                                </span>
                                            @endif
                                        </div>

                                        @if($activity->due_date)
                                            <small class="{{ $activity->isOverdue() ? 'text-danger' : 'text-muted' }}">
                                                <i class="fas fa-calendar me-1"></i>
                                                {{ $activity->due_date->format('d/m') }}
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Nenhuma atividade encontrada</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

    @elseif($view == 'list')
        <!-- Visão em Lista -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Título</th>
                                <th>Cliente</th>
                                <th>Responsáveis</th>
                                <th>Status</th>
                                <th>Prioridade</th>
                                <th>Prazo</th>
                                <th>Progresso</th>
                                <th width="100">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($activities as $activity)
                                <tr class="{{ $activity->isOverdue() ? 'table-danger' : '' }}">
                                    <td>
                                        <a href="{{ route('activities.show', $activity) }}" class="text-decoration-none">
                                            {{ $activity->title }}
                                        </a>
                                    </td>
                                    <td>{{ $activity->cliente->nome ?? '-' }}</td>
                                    <td>
                                        @foreach($activity->assignees as $assignee)
                                            <span class="badge bg-secondary">{{ $assignee->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $activity->status_color }}">
                                            {{ ucfirst(str_replace('_', ' ', $activity->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $activity->priority_color }}">
                                            {{ $activity->priority }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($activity->due_date)
                                            {{ $activity->due_date->format('d/m/Y') }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar" style="width: {{ $activity->getProgressPercentage() }}%">
                                                {{ round($activity->getProgressPercentage()) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('activities.show', $activity) }}" class="btn btn-outline-primary">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            @if(auth()->user()->hasPermission('activities.edit'))
                                                <a href="{{ route('activities.edit', $activity) }}" class="btn btn-outline-secondary">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                        <p class="text-muted">Nenhuma atividade encontrada</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                {{ $activities->links() }}
            </div>
        </div>

    @else
        <!-- Visão em Calendário -->
        <div class="card">
            <div class="card-body">
                <div id="calendar" style="height: 600px;"></div>
            </div>
        </div>
    @endif
</div>

<!-- Modal de Detalhes -->
<div class="modal fade" id="activityModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detalhes da Atividade</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="activityDetails">
                <!-- Conteúdo será preenchido via JS -->
            </div>
            <div class="modal-footer">
                <a href="#" id="viewActivityBtn" class="btn btn-primary">Ver Detalhes</a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/pt-br.js"></script>

<script>
// Função de Drill Down
function drilldown(type, id) {
    window.location.href = `{{ url('activities/drilldown') }}/${type}/${id}`;
}

// Função de Exportação
function exportData() {
    const params = new URLSearchParams(window.location.search);
    window.location.href = `{{ route('activities.export') }}?${params.toString()}`;
}

// Gráfico de Timeline
@if($view == 'cards')
const ctx = document.getElementById('timelineChart').getContext('2d');
const timelineData = @json($activitiesByDay);

new Chart(ctx, {
    type: 'line',
    data: {
        labels: timelineData.map(item => {
            const date = new Date(item.date);
            return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
        }),
        datasets: [{
            label: 'Atividades',
            data: timelineData.map(item => item.total),
            borderColor: '#0d6efd',
            backgroundColor: 'rgba(13, 110, 253, 0.1)',
            tension: 0.3,
            fill: true
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});
@endif

// Calendário
@if($view == 'calendar')
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'pt-br',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        events: {
            url: '{{ route("activities.calendar") }}',
            extraParams: function() {
                return {
                    cliente_id: '{{ $clienteId }}',
                    user_id: '{{ $userId }}'
                };
            }
        },
        eventClick: function(info) {
            const event = info.event;
            const props = event.extendedProps;

            let html = `
                <h6>${event.title}</h6>
                <p><strong>Cliente:</strong> ${props.cliente}</p>
                <p><strong>Responsáveis:</strong> ${props.assignees || 'Não atribuído'}</p>
                <p><strong>Status:</strong> ${props.status}</p>
                <p><strong>Prioridade:</strong> ${props.priority}</p>
                <p><strong>Progresso:</strong> ${props.progress}%</p>
            `;

            document.getElementById('activityDetails').innerHTML = html;
            document.getElementById('viewActivityBtn').href = `/activities/${event.id}`;

            const modal = new bootstrap.Modal(document.getElementById('activityModal'));
            modal.show();
        },
        eventDidMount: function(info) {
            // Adicionar tooltip
            info.el.setAttribute('title', `${info.event.title} - ${info.event.extendedProps.cliente}`);
        }
    });

    calendar.render();
});
@endif
</script>
@endpush