<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<section class="panel">
	<div class="actions" style="justify-content:flex-start; margin-top:0; margin-bottom:18px;">
		<a class="btn btn-outline" href="<?php echo site_url('inicio'); ?>">Regresar</a>
	</div>

	<h2 style="margin-bottom:16px;">Dashboard</h2>

	<div class="card-grid" style="margin-bottom:18px;">
		<div class="stat">
			<label>Empleados visibles</label>
			<strong><?php echo (int)$summary['total']; ?></strong>
		</div>
		<div class="stat">
			<label>Activos en Visor</label>
			<strong><?php echo (int)$summary['active_visor']; ?></strong>
		</div>
		<div class="stat">
			<label>Con metas cumplidas</label>
			<strong><?php echo (int)$summary['completed']; ?></strong>
		</div>
		<div class="stat">
			<label>Sin metas</label>
			<strong><?php echo (int)$summary['no_goals']; ?></strong>
		</div>
		<div class="stat">
			<label>Con tareas activas</label>
			<strong><?php echo (int)$summary['employees_with_open_tasks']; ?></strong>
		</div>
		<div class="stat">
			<label>Tareas completadas hoy</label>
			<strong><?php echo (int)$summary['tasks_completed_today']; ?></strong>
		</div>
	</div>

	<form method="get" action="<?php echo site_url('dashboard'); ?>" style="display:grid; gap:14px; margin-bottom:18px;">
		<div class="field" style="margin-top:0;">
			<label for="q">Buscar empleado</label>
			<input id="q" type="text" name="q" value="<?php echo htmlspecialchars(isset($filters['q']) ? $filters['q'] : '', ENT_QUOTES, 'UTF-8'); ?>" placeholder="Nombre del empleado" />
		</div>
		<div style="display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;">
			<div class="field" style="margin-top:0;">
				<label for="visor_status">Estado Visor</label>
				<select id="visor_status" name="visor_status">
					<option value="all" <?php echo isset($filters['visor_status']) && $filters['visor_status'] === 'all' ? 'selected' : ''; ?>>Todos</option>
					<option value="active" <?php echo isset($filters['visor_status']) && $filters['visor_status'] === 'active' ? 'selected' : ''; ?>>Activos</option>
					<option value="inactive" <?php echo isset($filters['visor_status']) && $filters['visor_status'] === 'inactive' ? 'selected' : ''; ?>>Inactivos</option>
				</select>
			</div>
			<div class="field" style="margin-top:0;">
				<label for="goal_status">Estado metas</label>
				<select id="goal_status" name="goal_status">
					<option value="all" <?php echo isset($filters['goal_status']) && $filters['goal_status'] === 'all' ? 'selected' : ''; ?>>Todas</option>
					<option value="completed" <?php echo isset($filters['goal_status']) && $filters['goal_status'] === 'completed' ? 'selected' : ''; ?>>Cumplidas</option>
					<option value="partial" <?php echo isset($filters['goal_status']) && $filters['goal_status'] === 'partial' ? 'selected' : ''; ?>>En progreso</option>
					<option value="no_goals" <?php echo isset($filters['goal_status']) && $filters['goal_status'] === 'no_goals' ? 'selected' : ''; ?>>Sin metas</option>
				</select>
			</div>
			<div class="field" style="margin-top:0;">
				<label for="group_id">Grupo</label>
				<select id="group_id" name="group_id">
					<option value="0">Todos</option>
					<?php foreach ($groups as $group) { ?>
						<option value="<?php echo (int)$group['id']; ?>" <?php echo isset($filters['group_id']) && (int)$filters['group_id'] === (int)$group['id'] ? 'selected' : ''; ?>>
							<?php echo htmlspecialchars($group['name'], ENT_QUOTES, 'UTF-8'); ?>
						</option>
					<?php } ?>
				</select>
			</div>
		</div>
		<div class="actions" style="justify-content:flex-end;">
			<a class="btn btn-outline" href="<?php echo site_url('dashboard'); ?>">Limpiar</a>
			<button class="btn" type="submit">Filtrar</button>
		</div>
	</form>

	<?php if (empty($employees)) { ?>
		<div class="empty">No hay empleados para mostrar con este filtro.</div>
	<?php } else { ?>
		<div style="display:grid; gap:16px;">
			<?php foreach ($employees as $employee) { ?>
				<div style="padding:18px; border-radius:24px; background:var(--panel); box-shadow:0 12px 24px rgba(20,41,64,0.08); display:grid; gap:14px;">
					<div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px;">
						<div style="display:grid; gap:8px;">
							<div style="font-size:calc(1.05rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
								<?php echo htmlspecialchars($employee['full_name'], ENT_QUOTES, 'UTF-8'); ?>
							</div>
							<div style="display:flex; flex-wrap:wrap; gap:8px;">
								<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:<?php echo !empty($employee['is_active_in_visor']) ? '#dff4e7' : '#fde2e1'; ?>; color:<?php echo !empty($employee['is_active_in_visor']) ? '#18834d' : '#b53d33'; ?>; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
									<?php echo !empty($employee['is_active_in_visor']) ? 'Activo en Visor' : 'Inactivo en Visor'; ?>
								</span>
								<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:<?php echo !empty($employee['is_active_in_gala']) ? '#edf3ff' : '#fde2e1'; ?>; color:<?php echo !empty($employee['is_active_in_gala']) ? '#355ca8' : '#b53d33'; ?>; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
									<?php echo !empty($employee['is_active_in_gala']) ? 'Activo en Gala' : 'Inactivo en Gala'; ?>
								</span>
								<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f0f4f8; color:#516277; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
									<?php echo htmlspecialchars($employee['goal_summary']['status_label'], ENT_QUOTES, 'UTF-8'); ?>
								</span>
								<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#eef4ff; color:#355ca8; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
									Tareas activas: <?php echo (int)$employee['task_summary']['total_open']; ?>
								</span>
								<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e8f6ed; color:#1f6a35; font-size:calc(0.78rem * var(--app-text-size)); font-weight:800;">
									Completadas hoy: <?php echo (int)$employee['tasks_completed_today']; ?>
								</span>
							</div>
							<?php if (!empty($employee['groups'])) { ?>
								<div style="display:flex; flex-wrap:wrap; gap:8px;">
									<?php foreach ($employee['groups'] as $group) { ?>
										<span style="display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#f8fafc; color:var(--ink); font-size:calc(0.76rem * var(--app-text-size)); font-weight:800; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.08);">
											<span style="display:inline-flex; width:10px; height:10px; border-radius:999px; background:<?php echo htmlspecialchars($group['color'], ENT_QUOTES, 'UTF-8'); ?>;"></span>
											<?php echo htmlspecialchars($group['name'], ENT_QUOTES, 'UTF-8'); ?>
										</span>
									<?php } ?>
								</div>
							<?php } ?>
						</div>
						<div style="min-width:110px; text-align:right;">
							<div style="font-size:calc(1.4rem * var(--app-text-size)); color:var(--theme); font-weight:900;">
								<?php echo (int)$employee['goal_summary']['progress_percent']; ?>%
							</div>
							<div style="font-size:calc(0.82rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
								<?php echo (int)$employee['goal_summary']['completed']; ?>/<?php echo (int)$employee['goal_summary']['total']; ?> metas
							</div>
						</div>
					</div>

					<div style="height:16px; border-radius:999px; background:#eef1f7; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(24,50,71,0.08);">
						<div style="width:<?php echo (int)$employee['goal_summary']['progress_percent']; ?>%; height:100%; background:linear-gradient(90deg, #7bc843, #98d245); border-radius:999px;"></div>
					</div>

					<div style="display:grid; gap:12px; padding:14px; border-radius:18px; background:#f8fafc; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.06);">
						<div style="font-size:calc(0.92rem * var(--app-text-size)); color:var(--ink); font-weight:900;">
							Tareas
						</div>

						<?php if (empty($employee['task_open_preview']) && empty($employee['task_completed_today_preview'])) { ?>
							<div style="font-size:calc(0.84rem * var(--app-text-size)); color:var(--muted);">
								No tiene tareas activas ni tareas completadas hoy.
							</div>
						<?php } else { ?>
							<div style="display:grid; gap:10px;">
								<?php foreach ($employee['task_open_preview'] as $task) { ?>
									<?php
									$task_status = isset($task['status']) ? (string)$task['status'] : 'pending';
									$task_bg = $task_status === 'overdue' ? '#fdecec' : ($task_status === 'in_progress' ? '#edf3ff' : '#f8fafc');
									$task_fg = $task_status === 'overdue' ? '#8a1f1f' : ($task_status === 'in_progress' ? '#355ca8' : '#516277');
									$task_label = $task_status === 'overdue' ? 'Activa · Vencida' : ($task_status === 'in_progress' ? 'Activa · En progreso' : 'Activa · Pendiente');
									?>
									<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
										<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
											<?php echo htmlspecialchars($task['title'], ENT_QUOTES, 'UTF-8'); ?>
										</div>
										<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:<?php echo $task_bg; ?>; color:<?php echo $task_fg; ?>; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800; white-space:nowrap;">
											<?php echo htmlspecialchars($task_label, ENT_QUOTES, 'UTF-8'); ?>
										</span>
									</div>
								<?php } ?>

								<?php foreach ($employee['task_completed_today_preview'] as $task) { ?>
									<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
										<div style="font-size:calc(0.9rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
											<?php echo htmlspecialchars($task['title'], ENT_QUOTES, 'UTF-8'); ?>
										</div>
										<span style="display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e8f6ed; color:#1f6a35; font-size:calc(0.72rem * var(--app-text-size)); font-weight:800; white-space:nowrap;">
											Completada hoy
										</span>
									</div>
								<?php } ?>

								<?php if ((int)$employee['task_summary']['total_open'] > count($employee['task_open_preview'])) { ?>
									<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
										+<?php echo (int)$employee['task_summary']['total_open'] - count($employee['task_open_preview']); ?> tareas activas mas
									</div>
								<?php } ?>

								<?php if ((int)$employee['tasks_completed_today'] > count($employee['task_completed_today_preview'])) { ?>
									<div style="font-size:calc(0.8rem * var(--app-text-size)); color:var(--muted); font-weight:700;">
										+<?php echo (int)$employee['tasks_completed_today'] - count($employee['task_completed_today_preview']); ?> tareas completadas hoy mas
									</div>
								<?php } ?>
							</div>
						<?php } ?>
					</div>

					<div class="actions" style="justify-content:flex-end; margin-top:0;">
						<a class="btn btn-outline" href="<?php echo site_url('dashboard/empleado/'.(int)$employee['employee_id']); ?>">Ver detalle</a>
					</div>

					<?php if (empty($employee['goal_cards'])) { ?>
						<div class="empty">Este empleado no tiene metas activas ahora mismo.</div>
					<?php } else { ?>
						<div style="display:grid; gap:10px;">
							<?php foreach ($employee['goal_cards'] as $card) { ?>
								<div style="padding:14px; border-radius:18px; background:#f8fafc; display:grid; gap:10px; box-shadow:inset 0 0 0 1px rgba(20,41,64,0.06);">
									<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
										<div style="font-size:calc(0.94rem * var(--app-text-size)); color:var(--ink); font-weight:800;">
											<?php echo htmlspecialchars($card['name'], ENT_QUOTES, 'UTF-8'); ?>
										</div>
										<?php if ($card['display_mode'] === 'number') { ?>
											<div style="font-size:calc(0.94rem * var(--app-text-size)); color:var(--theme); font-weight:900;">
												<?php echo $card['metric_label'] === 'Cantidad'
													? number_format($card['current_value'], 0, ',', '.')
													: number_format($card['current_value'], 2, ',', '.'); ?>/<?php echo $card['metric_label'] === 'Cantidad'
													? number_format($card['target_value'], 0, ',', '.')
													: number_format($card['target_value'], 2, ',', '.'); ?>
											</div>
										<?php } else { ?>
											<?php if ($card['display_mode'] === 'rank') { ?>
												<div style="font-size:calc(0.94rem * var(--app-text-size)); color:var(--theme); font-weight:900;">
													Puesto #<?php echo (int)$card['rank_position']; ?>
												</div>
											<?php } else { ?>
												<div style="font-size:calc(0.88rem * var(--app-text-size)); color:var(--muted); font-weight:800;">
													<?php echo (int)round($card['progress_ratio'] * 100); ?>%
												</div>
											<?php } ?>
										<?php } ?>
									</div>

									<?php if ($card['display_mode'] === 'bar') { ?>
										<div style="height:12px; border-radius:999px; background:#e9eef5; overflow:hidden;">
											<div style="width:<?php echo (int)round($card['progress_ratio'] * 100); ?>%; height:100%; background:<?php echo htmlspecialchars(!empty($card['group_color']) ? $card['group_color'] : '#98d245', ENT_QUOTES, 'UTF-8'); ?>; border-radius:999px;"></div>
										</div>
									<?php } ?>
								</div>
							<?php } ?>
						</div>
					<?php } ?>
				</div>
			<?php } ?>
		</div>
	<?php } ?>
</section>
