<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$prefs = isset($user_preferences) && is_array($user_preferences) ? $user_preferences : array();
if (!function_exists('visor_contrast_color'))
{
	function visor_contrast_color($hex, $dark = '#183247', $light = '#ffffff')
	{
		$hex = ltrim((string)$hex, '#');
		if (strlen($hex) === 3)
		{
			$hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
		}
		if (!preg_match('/^[a-f0-9]{6}$/i', $hex))
		{
			return $light;
		}

		$r = hexdec(substr($hex, 0, 2));
		$g = hexdec(substr($hex, 2, 2));
		$b = hexdec(substr($hex, 4, 2));
		$luminance = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
		return $luminance >= 160 ? $dark : $light;
	}
}
$theme_color = !empty($prefs['application_button_color']) ? $prefs['application_button_color'] : (!empty($prefs['theme_color']) ? $prefs['theme_color'] : '#4d74c3');
$background_color = !empty($prefs['application_background_color']) ? $prefs['application_background_color'] : (!empty($prefs['background_color']) ? $prefs['background_color'] : '#f6f7f9');
$panel_color = !empty($prefs['application_box_color']) ? $prefs['application_box_color'] : '#ffffff';
$text_color = !empty($prefs['application_text_color']) ? $prefs['application_text_color'] : '#183247';
$button_color = !empty($prefs['application_button_color']) ? $prefs['application_button_color'] : (!empty($prefs['button_color']) ? $prefs['button_color'] : '#f47d2b');
$menu_button_color = !empty($prefs['application_menu_button_color']) ? $prefs['application_menu_button_color'] : $button_color;
$menu_active_color = !empty($prefs['application_menu_active_color']) ? $prefs['application_menu_active_color'] : '#355ca8';
$application_text_size = !empty($prefs['application_text_size']) ? (float)$prefs['application_text_size'] : 1.00;
$application_button_size = !empty($prefs['application_button_size']) ? (float)$prefs['application_button_size'] : 1.12;
$visor_background_color = !empty($prefs['visor_background_color']) ? $prefs['visor_background_color'] : $background_color;
$visor_box_color = !empty($prefs['visor_box_color']) ? $prefs['visor_box_color'] : '#eef3f8';
$visor_product_name_size = !empty($prefs['visor_product_name_size']) ? (float)$prefs['visor_product_name_size'] : 1.05;
$visor_product_name_color = !empty($prefs['visor_product_name_color']) ? $prefs['visor_product_name_color'] : '#183247';
$visor_price_divisa_size = !empty($prefs['visor_price_divisa_size']) ? (float)$prefs['visor_price_divisa_size'] : (!empty($prefs['price_divisa_size']) ? (float)$prefs['price_divisa_size'] : 4.10);
$visor_price_divisa_color = !empty($prefs['visor_price_divisa_color']) ? $prefs['visor_price_divisa_color'] : $theme_color;
$visor_price_bs_size = !empty($prefs['visor_price_bs_size']) ? (float)$prefs['visor_price_bs_size'] : (!empty($prefs['price_bs_size']) ? (float)$prefs['price_bs_size'] : 1.45);
$visor_price_bs_color = !empty($prefs['visor_price_bs_color']) ? $prefs['visor_price_bs_color'] : '#617386';
$visor_text_size = !empty($prefs['visor_text_size']) ? (float)$prefs['visor_text_size'] : 1.00;
$visor_text_color = !empty($prefs['visor_text_color']) ? $prefs['visor_text_color'] : '#617386';
$visor_button_size = !empty($prefs['visor_button_size']) ? (float)$prefs['visor_button_size'] : 1.00;
$visor_button_color = !empty($prefs['visor_button_color']) ? $prefs['visor_button_color'] : $button_color;
$button_ink = visor_contrast_color($button_color);
$menu_button_ink = visor_contrast_color($menu_button_color);
$menu_active_ink = visor_contrast_color($menu_active_color);
$visor_button_ink = visor_contrast_color($visor_button_color);
$is_visor_standalone = !empty($visor_standalone);
$hide_main_menu = !empty($hide_main_menu);
?>
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title><?php echo htmlspecialchars(isset($page_title) ? $page_title : 'Visor', ENT_QUOTES, 'UTF-8'); ?> - Visor</title>
	<link rel="stylesheet" href="<?php echo rtrim(base_url(), '/'); ?>/../ts/assets/css/ionicons.min.css" />
	<style>
		:root {
			--theme: <?php echo htmlspecialchars($theme_color, ENT_QUOTES, 'UTF-8'); ?>;
			--panel: <?php echo htmlspecialchars($panel_color, ENT_QUOTES, 'UTF-8'); ?>;
			--card: #f8fafc;
			--card-strong: #edf3ff;
			--border: rgba(20, 41, 64, 0.08);
			--ink: <?php echo htmlspecialchars($text_color, ENT_QUOTES, 'UTF-8'); ?>;
			--muted: #617386;
			--visor-text: <?php echo htmlspecialchars($visor_text_color, ENT_QUOTES, 'UTF-8'); ?>;
			--button: <?php echo htmlspecialchars($button_color, ENT_QUOTES, 'UTF-8'); ?>;
			--menu-button: <?php echo htmlspecialchars($menu_button_color, ENT_QUOTES, 'UTF-8'); ?>;
			--menu-button-active: <?php echo htmlspecialchars($menu_active_color, ENT_QUOTES, 'UTF-8'); ?>;
			--button-ink: <?php echo htmlspecialchars($button_ink, ENT_QUOTES, 'UTF-8'); ?>;
			--menu-button-ink: <?php echo htmlspecialchars($menu_button_ink, ENT_QUOTES, 'UTF-8'); ?>;
			--menu-button-active-ink: <?php echo htmlspecialchars($menu_active_ink, ENT_QUOTES, 'UTF-8'); ?>;
			--field-bg: #ffffff;
			--field-ink: #173246;
			--surface: <?php echo htmlspecialchars($background_color, ENT_QUOTES, 'UTF-8'); ?>;
			--surface-2: #eef3f8;
			--app-text-size: <?php echo rtrim(rtrim(number_format($application_text_size, 2, '.', ''), '0'), '.'); ?>;
			--app-button-size: <?php echo rtrim(rtrim(number_format($application_button_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-surface: <?php echo htmlspecialchars($visor_background_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-box: <?php echo htmlspecialchars($visor_box_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-product-name-size: <?php echo rtrim(rtrim(number_format($visor_product_name_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-product-name-color: <?php echo htmlspecialchars($visor_product_name_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-price-divisa-size: <?php echo rtrim(rtrim(number_format($visor_price_divisa_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-price-divisa-color: <?php echo htmlspecialchars($visor_price_divisa_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-price-bs-size: <?php echo rtrim(rtrim(number_format($visor_price_bs_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-price-bs-color: <?php echo htmlspecialchars($visor_price_bs_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-text-size: <?php echo rtrim(rtrim(number_format($visor_text_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-button-size: <?php echo rtrim(rtrim(number_format($visor_button_size, 2, '.', ''), '0'), '.'); ?>;
			--visor-button-color: <?php echo htmlspecialchars($visor_button_color, ENT_QUOTES, 'UTF-8'); ?>;
			--visor-button-ink: <?php echo htmlspecialchars($visor_button_ink, ENT_QUOTES, 'UTF-8'); ?>;
			--shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
		}
		* { box-sizing: border-box; }
		body {
			margin: 0;
			min-height: 100vh;
			min-height: 100dvh;
			background: var(--surface);
			color: var(--ink);
			font-family: "Trebuchet MS", Arial, sans-serif;
			font-size: calc(16px * var(--app-text-size));
		}
		.shell {
			width: 100%;
			max-width: none;
			margin: 0;
			min-height: 100vh;
			min-height: 100dvh;
			display: flex;
			flex-direction: column;
			background: transparent;
		}
		.topbar {
			padding: 14px 16px 10px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 14px;
			font-size: 14px;
			background: var(--theme);
			color: #ffffff;
		}
		.topbar-main { min-width: 0; }
		.topbar small { display: block; color: rgba(255,255,255,0.82); font-size: 12px; margin-top: 3px; }
		.topbar-counters {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;
		}
		.topbar-counter {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 8px 12px;
			border-radius: 999px;
			background: rgba(255,255,255,0.14);
			box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
			font-weight: 700;
			color: #ffffff;
		}
		.topbar-counter-value {
			font-size: 1rem;
			line-height: 1;
			min-width: 12px;
		}
		.topbar-counter-art {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 26px;
			height: 26px;
			line-height: 1;
			flex: 0 0 26px;
		}
		.topbar-counter-art svg {
			display: block;
			width: 100%;
			height: 100%;
		}
		.topbar-counter-art--star svg {
			filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
		}
		.topbar-counter-art--task svg {
			filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
		}
		.logout {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 10px 14px;
			border-radius: 14px;
			border: 0;
			background: rgba(255,255,255,0.14);
			color: #ffffff;
			text-decoration: none;
			font-weight: 700;
		}
		.content { flex: 1; padding: 14px 16px 20px; width: 100%; }
		.content.is-visor-standalone {
			padding: 0;
			min-height: 100vh;
			min-height: 100dvh;
			display: flex;
			align-items: stretch;
		}
		.menu-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
		.menu-overview {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
			margin-bottom: 14px;
		}
		.menu-overview-card {
			padding: 14px 16px;
			border-radius: 18px;
			background: linear-gradient(180deg, rgba(77, 116, 195, 0.12), rgba(77, 116, 195, 0.06));
			box-shadow: inset 0 0 0 1px rgba(77, 116, 195, 0.12);
		}
		.menu-overview-label {
			display: block;
			color: var(--muted);
			font-size: 0.82rem;
			font-weight: 700;
			margin-bottom: 6px;
		}
		.menu-overview-value {
			display: block;
			color: var(--ink);
			font-size: 1.2rem;
			font-weight: 800;
			letter-spacing: 0.01em;
		}
		.menu-btn {
			display: flex;
			align-items: center;
			gap: 14px;
			width: 100%;
			padding: 18px 20px;
			border-radius: 18px;
			background: var(--menu-button);
			color: var(--menu-button-ink);
			text-decoration: none;
			font-size: calc(18px * var(--app-button-size));
			font-weight: 700;
			box-shadow: 0 8px 18px rgba(20, 41, 64, 0.14);
		}
		.menu-btn .menu-icon {
			width: 24px;
			min-width: 24px;
			font-size: 1.35em;
			line-height: 1;
			text-align: center;
		}
		.menu-btn .menu-label {
			flex: 1;
			text-align: left;
		}
		.menu-btn.is-active { background: var(--menu-button-active); color: var(--menu-button-active-ink); filter: none; }
		.panel {
			background: var(--panel);
			border: 0;
			border-radius: 24px;
			padding: 18px;
			box-shadow: var(--shadow);
		}
		.panel.visor-screen {
			width: 100%;
			min-height: 100vh;
			min-height: 100dvh;
			display: flex;
			flex-direction: column;
			background: var(--visor-surface);
			border-radius: 0;
			box-shadow: none;
			padding: 18px 18px 20px;
		}
		.visor-screen .history { margin-top: auto; padding-bottom: 0; }
		.panel h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
		.panel p { margin: 0; color: var(--muted); line-height: 1.45; }
		.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
		.stat { background: var(--card-strong); border: 0; border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(77,116,195,0.08); }
		.stat label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
		.stat strong { display: block; margin-top: 6px; font-size: 18px; }
		.field { margin-top: 14px; }
		.field label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
		.field input, .field select {
			width: 100%;
			border: 0;
			border-radius: 14px;
			padding: 13px 14px;
			background: var(--field-bg);
			color: var(--field-ink);
			font: inherit;
			box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.12);
		}
		.field textarea {
			width: 100%;
			border: 0;
			border-radius: 14px;
			padding: 13px 14px;
			background: var(--field-bg);
			color: var(--field-ink);
			font: inherit;
			resize: vertical;
			min-height: 110px;
			box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.12);
		}
		.actions { display: flex; gap: 10px; margin-top: 14px; }
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border: 0;
			border-radius: 14px;
			padding: 12px 16px;
			background: var(--button);
			color: var(--button-ink);
			font: inherit;
			font-weight: 700;
			text-decoration: none;
			box-shadow: 0 8px 18px rgba(244, 125, 43, 0.18);
		}
		.btn-outline { background: var(--button); border: 0; color: var(--button-ink); box-shadow: 0 8px 18px rgba(20, 41, 64, 0.14); }
		.icon-btn {
			width: 52px;
			min-width: 52px;
			height: 52px;
			padding: 0;
			font-size: 1.6rem;
			line-height: 1;
		}
		.history { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
		.history { border-top: 0; }
		.empty { padding: 14px; border-radius: 16px; background: var(--visor-box); color: var(--muted); text-align: center; }
		.modal-backdrop {
			position: fixed;
			inset: 0;
			z-index: 1000;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 18px;
			background: rgba(10, 18, 30, 0.42);
			backdrop-filter: blur(4px);
		}
		.modal-card {
			background: var(--panel);
			color: var(--ink);
			border-radius: 22px;
			padding: 18px;
			box-shadow: 0 24px 50px rgba(10, 18, 30, 0.24);
			max-height: calc(100vh - 36px);
			overflow: auto;
		}
		code { color: var(--button); }
	</style>
</head>
<body>
	<div class="shell">
		<?php if (!$is_visor_standalone) { ?>
			<header class="topbar">
				<div class="topbar-main">
					<div><?php echo htmlspecialchars(isset($auth_user['full_name']) ? $auth_user['full_name'] : '', ENT_QUOTES, 'UTF-8'); ?></div>
					<small><?php echo htmlspecialchars(isset($company_name) ? $company_name : 'Nombre Compania', ENT_QUOTES, 'UTF-8'); ?></small>
					<?php if (!$hide_main_menu && !empty($auth_user)) {
						$counters = isset($completion_counters) && is_array($completion_counters) ? $completion_counters : array('tasks' => 0, 'goals' => 0);
					?>
						<div class="topbar-counters">
							<div class="topbar-counter">
								<span class="topbar-counter-art topbar-counter-art--star" aria-hidden="true">
									<svg viewBox="0 0 64 64" role="img" focusable="false">
										<path d="M32 5.5l8.2 16.6 18.3 2.7-13.2 12.9 3.1 18.2L32 47.2 15.6 55.9l3.1-18.2L5.5 24.8l18.3-2.7L32 5.5z" fill="#fff933" stroke="#2f2f2f" stroke-width="4" stroke-linejoin="round"></path>
									</svg>
								</span>
								<span class="topbar-counter-value"><?php echo (int) (isset($counters['goals']) ? $counters['goals'] : 0); ?></span>
							</div>
							<div class="topbar-counter">
								<span class="topbar-counter-art topbar-counter-art--task" aria-hidden="true">
									<svg viewBox="0 0 64 64" role="img" focusable="false">
										<rect x="10" y="20" width="22" height="28" rx="5" fill="none" stroke="#2a2a2a" stroke-width="4"></rect>
										<path d="M8 30l12 12L56 10" fill="none" stroke="#1f7df0" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"></path>
									</svg>
								</span>
								<span class="topbar-counter-value"><?php echo (int) (isset($counters['tasks']) ? $counters['tasks'] : 0); ?></span>
							</div>
						</div>
					<?php } ?>
				</div>
				<a class="logout" href="<?php echo site_url('visor'); ?>">Salir</a>
			</header>

		<?php } ?>

		<main class="content<?php echo $is_visor_standalone ? ' is-visor-standalone' : ''; ?>">
			<?php if (!$is_visor_standalone && !$hide_main_menu) { ?>
				<?php if (empty($current_module) && !empty($menu_overview_cards) && is_array($menu_overview_cards)) { ?>
					<div class="menu-overview">
						<?php foreach ($menu_overview_cards as $card) { ?>
							<div class="menu-overview-card">
								<span class="menu-overview-label"><?php echo htmlspecialchars(isset($card['label']) ? $card['label'] : 'Resumen', ENT_QUOTES, 'UTF-8'); ?></span>
								<span class="menu-overview-value"><?php echo (int) (isset($card['completed']) ? $card['completed'] : 0); ?>/<?php echo (int) (isset($card['total']) ? $card['total'] : 0); ?></span>
							</div>
						<?php } ?>
					</div>
				<?php } ?>
				<nav class="menu-grid">
					<?php foreach ($allowed_modules as $key => $item) { ?>
						<a class="menu-btn<?php echo (!empty($current_module) && $current_module === $key) ? ' is-active' : ''; ?>" href="<?php echo site_url($item['route']); ?>">
							<span class="menu-icon"><i class="<?php echo htmlspecialchars(isset($item['icon']) ? $item['icon'] : 'ion-grid', ENT_QUOTES, 'UTF-8'); ?>"></i></span>
							<span class="menu-label"><?php echo htmlspecialchars($item['label'], ENT_QUOTES, 'UTF-8'); ?></span>
						</a>
					<?php } ?>
					<a class="menu-btn" href="<?php echo site_url('logout'); ?>">
						<span class="menu-icon"><i class="ion-log-out"></i></span>
						<span class="menu-label">Cerrar sesion</span>
					</a>
				</nav>
			<?php } ?>

			<?php $this->load->view($view); ?>
		</main>
	</div>
</body>
</html>
