<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// phpcs:ignoreFile

global $wpdb;

$tabs = anbarak_get_app_tabs();

$full_page = anbarak_is_fullscreen();
?>

	<div class="anbarak-app">
		<div class="wrap anbarak-wrap">
			<?php
		$tabs_keys =  array_keys(anbarak_get_permitted_tabs());
		$active_tab = reset($tabs_keys);
		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
		if (isset($_GET['tab'])) {
			// phpcs:ignore WordPress.Security.NonceVerification.Recommended
			$active_tab = sanitize_text_field(wp_unslash($_GET['tab']));
		}

		$month_start_timestamp = anbarak_make_datetime('first day of this month');
		$month_end_timestamp   = anbarak_make_datetime('today 23:59:59');

		$month_expenses = anbarak_get_total_expenses_price($month_start_timestamp, $month_end_timestamp);
		$month_gross_profit = anbarak_get_orders_gross_profit($month_start_timestamp, $month_end_timestamp);

		$month_product_purchase_expenses = anbarak_get_total_expenses_price(
			$month_start_timestamp,
			$month_end_timestamp,
			anbarak_get_purchase_tag_id()
		);
		$month_net_profit = $month_gross_profit - ($month_expenses - $month_product_purchase_expenses);
		?>

		<div class="app-header">
			<button id="toggle-main-menu" class="menu-toggler me-2 lg:hidden">
				<svg class="opacity-90" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
					<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
					<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
				</svg>
			</button>
			<div class="flex logo-wrapper me-5">
				<img src="<?php echo esc_url(ANBARAK_URL) ?>/public/images/logo.svg" alt="Anbarak logo">
				<span class="title font-black mt-1 relative">
					<span class="title font-black ms-2 mt-1 relative">
						<span class="absolute -top-1 leading-1 inline-flex items-center rounded-md bg-gradient-to-r from-amber-100 to-red-100 font-normal p-0.5 text-xs text-amber-600">Lite</span>
						<?php esc_html_e('Anbarak', 'anbarak') ?>
					</span>

				</span>
			</div>

			<div class="stats px-5 flex items-center flex-grow overflow-x-auto">
				<div class="stat-item gap-1 me-4 header__total-products hidden 2xl:flex" data-tippy-content="<?php echo esc_html(__('Total products including variable products', 'anbarak')) ?>">
					<span>
						<?php esc_html_e('Total Products', 'anbarak'); ?>
					</span>
					<span class="value font-semibold">
						<?php echo esc_html(anbarak_get_total_products_count()) ?>
					</span>
				</div>
				<div class="stat-item flex gap-1 me-4 header__managed-products" data-tippy-content="<?php echo esc_html(__('Products with active stock management', 'anbarak')) ?>">
					<span>
						<?php esc_html_e('Managed Products', 'anbarak'); ?>
					</span>
					<span class="value font-semibold">
						<?php echo esc_html(anbarak_get_total_managed_stock_products_count()) ?>
					</span>
				</div>
				<div class="stat-item flex gap-1 me-4">
					<span>
						<?php esc_html_e('Low Stock', 'anbarak'); ?>
					</span>
					<span class="value font-semibold">
						<?php echo count(anbarak_get_low_stock_products()) ?>
					</span>
				</div>
				<div class="stat-item flex gap-1 me-4">
					<span>
						<?php esc_html_e('Out of stock', 'anbarak'); ?>
					</span>
					<span class="value font-semibold">
						<?php echo count(anbarak_get_out_of_stock_products()) ?>
					</span>
				</div>
				<?php
				$totalProductsWorth = anbarak_get_total_products_worth();
				$totalProfit = anbarak_get_total_products_net_worth();

				if (($totalProductsWorth - $totalProfit) != 0) {
					$profitPercent = $totalProfit / ($totalProductsWorth - $totalProfit) * 100;
				} else {
					$profitPercent = 0;
				}

				?>

				<?php if (anbarak_user_is_admin_or_manager()): ?>
					<div class="stat-item flex gap-1 me-4 font-semibold" data-tippy-content="<?php echo esc_html(__('Total sale price of all products', 'anbarak')) ?>">
						<span class="font-normal"><?php esc_html_e('Total Inventory Value', 'anbarak'); ?></span>
						<span class="value">
							<?php echo wp_kses_post(wc_price($totalProductsWorth)); ?></h2>
						</span>
					</div>
					<div class="stat-item flex gap-1 me-4 font-semibold" data-tippy-content="<?php echo esc_html(__('Total products profit (Sale price - Buy price)', 'anbarak')) ?>">
						<span class="font-normal"><?php esc_html_e('Potential Profit', 'anbarak'); ?></span>
						<span class="value">
							<?php echo wp_kses_post(wc_price($totalProfit)); ?> <span class="font-normal badge"><?php echo esc_html(round($profitPercent, 1)) ?>%</span></h2>
						</span>
					</div>
					<div class="stat-item flex gap-1 me-4 font-semibold">
						<span class="font-normal"><?php esc_html_e('Net Profit of Month', 'anbarak'); ?></span>
						<?php if ($month_net_profit > 0) : ?>
						<span class="ltr text-green-600">
							<?php echo wp_kses_post(wc_price($month_net_profit)) ?></h2>
							<?php else : ?>
							<span class="ltr text-red-500">
								<?php echo wp_kses_post(wc_price($month_net_profit)) ?></h2>
								</span>
							<?php endif ?>
					</div>
				<?php endif ?>
			</div>
			<?php if ($full_page): ?>
				<button id="btn-exit-fullscreen" class="button flex items-center justify-center p-0 !w-8 !h-8 !leading-0 text-xl icon  me-2" data-tippy-content="<?php esc_attr_e('Exit full screen', 'anbarak') ?>">
					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M8 3v3a2 2 0 0 1-2 2H3" />
						<path d="M21 8h-3a2 2 0 0 1-2-2V3" />
						<path d="M3 16h3a2 2 0 0 1 2 2v3" />
						<path d="M16 21v-3a2 2 0 0 1 2-2h3" />
					</svg>
				</button>
			<?php else: ?>
				<button id="btn-enter-fullscreen" class="button flex items-center justify-center p-0 !w-8 !h-8 !leading-0 text-xl icon  me-2" data-tippy-content="<?php esc_attr_e('Go full screen for a better experience', 'anbarak') ?>">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<path d="M8 3H5a2 2 0 0 0-2 2v3" />
						<path d="M21 8V5a2 2 0 0 0-2-2h-3" />
						<path d="M3 16v3a2 2 0 0 0 2 2h3" />
						<path d="M16 21h3a2 2 0 0 0 2-2v-3" />
					</svg>
					<span class="hidden lg:inline ms-1"><?php esc_html_e('Fullscreen', 'anbarak') ?></span>
				</button>
			<?php endif; ?>
			<?php $inventory_notifications = anbarak_get_unread_inventory_notifications(); ?>
			<div id="notification-center" class="relative">
				<?php $unread_notification_count = count($inventory_notifications); ?>
				<button id="notification-btn" class="button relative flex items-center justify-center p-0 !w-8 !h-8 !leading-0 text-xl icon icon-bell">
					<?php if ($unread_notification_count) : ?><span class="absolute -top-1 -end-1 min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] leading-4 not-italic"><?php echo esc_html($unread_notification_count); ?></span><?php endif; ?>
				</button>
				<div id="notification-popup" class="hidden absolute end-0 mt-3 w-80 whitespace-normal bg-white shadow-lg rounded-2xl border border-gray-200 z-50 dark:bg-[#1a1a1a] dark:border-[#2a2a2a]">
					<div class="p-3 px-5 font-semibold border-b border-b-gray-300 dark:border-[#2a2a2a]"><?php esc_html_e('Notifications', 'anbarak') ?></div>
					<?php if (!empty($inventory_notifications)) : ?>
						<ul class="divide-y divide-gray-100 dark:divide-[#2a2a2a]">
							<?php foreach ($inventory_notifications as $notification) : $product = wc_get_product((int) $notification['product_id']); if (!$product) continue; ?>
								<li class="notification-item p-3 hover:bg-gray-50 dark:hover:bg-[#222]" data-product-id="<?php echo esc_attr($notification['product_id']); ?>">
									<div class="text-sm"><?php echo esc_html($product->get_name()); ?>: <?php esc_html_e('Your high-demand product is low/out of stock.', 'anbarak'); ?></div>
									<button type="button" class="mark-notification-read text-xs text-blue-600 mt-2 cursor-pointer"><?php esc_html_e('Mark read', 'anbarak'); ?></button>
								</li>
							<?php endforeach; ?>
						</ul>
					<?php else : ?>
					<div class="no-notifications p-10 text-center text-gray-400">
						<span class="icon icon-bell text-3xl"></span>
						<p class="mt-3"><?php esc_html_e('No Notifications', 'anbarak') ?></p>
					</div>
					<?php endif; ?>
				</div>
			</div>
			<div class="gap-2 hidden 2xl:flex ms-5">
				<?php echo esc_html(anbarak_date(time())) ?>
			</div>
		</div>

		<div class="app-content <?php echo esc_attr($active_tab) ?>">
			<aside>
				<div class="menu lg:mb-2">
					<?php foreach ($tabs as $page_name => $page_data) : ?>
						<?php if (anbarak_user_has_tab_permission($page_data)) : ?>
							<a href="?page=anbarak&tab=<?php echo esc_attr($page_name) ?>" class="menu__item <?php echo $active_tab == $page_name ? 'nav-tab-active' : ''; ?>" data-page="<?php echo esc_attr($page_name) ?>">
								<i class="text-2xl icon <?php echo esc_html($page_data['icon']) ?>"></i>
								<label>
									<?php echo esc_html($page_data['menu_name'] ?? $page_data['name']) ?>
								</label>
							</a>
						<?php endif; ?>
					<?php endforeach; ?>
					<?php if (anbarak_is_fullscreen()): ?>
						<?php if (!current_user_can('manage_woocommerce')): ?>
							<a href="<?php echo esc_url(wp_logout_url(site_url('/anbarak'))); ?>" class="menu__item hidden xl:flex flex-col justify-center items-center bg-white mb-2 rounded-2xl flex-col p-3 text-center text-3xl border border-gray-200 dark:bg-[#1a1a1a] dark:border-[#2a2a2a]">
								<span class="icon icon-arrow-right"></span>
								<label class="text-xs font-semibold text-gray-500 mt-1 dark:text-gray-400"><?php esc_html_e('Logout', 'anbarak') ?></label>
							</a>
						<?php else: ?>
							<a href="<?php echo esc_url(admin_url()) ?>" class="menu__item hidden xl:flex flex-col justify-center items-center bg-white mb-2 rounded-2xl flex-col p-3 text-center text-3xl border border-gray-200 dark:bg-[#1a1a1a] dark:border-[#2a2a2a]">
								<span class="icon icon-arrow-right ltr:scale-x-[-1]"></span>
								<label class="text-xs font-semibold text-gray-500 mt-1 dark:text-gray-400">Admin</label>
							</a>
						<?php endif ?>
					<?php endif; ?>
				</div>
			</aside>

			<div class="main-content-container relative">

				<?php if (!$full_page && !isset($_COOKIE['anbarak_fullscreen_hint_dismissed'])): ?>
					<div id="fullscreen-hint" class="anbarak-fullscreen-hint flex items-center justify-between rounded-xl mb-5 gap-3 px-4 py-2 bg-amber-50 border border-amber-200 text-sm text-amber-800 dark:bg-amber-900/20 dark:border-amber-800/30 dark:text-amber-200">
						<span class="flex items-center gap-2">
							<i class="icon icon-info"></i>
							<?php esc_html_e('For better experience, try Anbarak in fullscreen mode.', 'anbarak') ?>
							<button class="p-2 button button--sm" id="btn-enter-fullscreen"><?php esc_html_e('Go full screen', 'anbarak'); ?></button>
						</span>
						<button id="btn-dismiss-fullscreen-hint" class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-200 text-xs font-semibold ms-4 shrink-0">
							<?php esc_html_e('Dismiss', 'anbarak') ?>
						</button>
					</div>
				<?php endif; ?>

				<div class="anbarak_page_content">
					<?php anbarak_render_page_content($active_tab); ?>
				</div>

				<?php if (current_user_can('manage_woocommerce')): ?>
					<footer class="text-center mt-5 text-sm text-gray-500 dark:text-gray-400">
						<div class="text-center mt-2 "><?php esc_html_e('Thank you for using Anbarak', 'anbarak'); ?> ✨</div>
						<div class="text-center flex justify-center gap-2 my-2">
							<code class="text-xs inline-flex justify-center ltr gap-1">
								Anbaarak
								<span class="inline-flex items-center rounded-md bg-gradient-to-r from-amber-100 to-red-100 font-normal p-0.5 text-xs text-amber-600">Lite</span>
								V<?php echo esc_html(ANBARAK_VERSION) ?>
							</code>
						</div>
						<a href="https://wordpress.org/plugins/anbarak/#reviews" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 text-xs font-semibold mt-1">
							<i class="icon icon-star text-sm"></i>
							<?php esc_html_e('Submit a review', 'anbarak') ?>
						</a>
					</footer>
				<?php endif ?>

				<div class="loading-screen fixed flex justify-center items-center flex-col inset-0 bg-white/90 dark:bg-[#0d0d0d]/90">
					<div class="content-center justify-center items-center 2xl:mb-30 loading-screen__inner flex flex-col">
						<img class="mb-3 size-12 xl:size-20" src="<?php echo esc_url(ANBARAK_URL) ?>/public/images/logo.svg" alt="Anbarak logo">
						<span class="ltr text-gray-800 dark:text-gray-200 text-xl font-bold relative">
							Loading Data
						</span>
						<span class="loading-screen__secondary-message ltr text-gray-500 dark:text-gray-400 relative">
							..
						</span>

					</div>
				</div>

			</div>
		</div>

		<?php include ANBARAK_PATH . 'admin/views/partials/guides.php' ?>

		<div class="micro-modal micromodal-slide" id="modal-review-request" aria-hidden="true">
			<div class="modal__overlay" tabindex="-1" data-micromodal-close>
				<div class="modal__container box" role="dialog" aria-modal="true">
					<header class="modal__header">
						<h2 class="modal__title"><?php esc_html_e('We need your feedback!', 'anbarak') ?></h2>
						<button class="modal__close" type="button" aria-label="<?php esc_attr_e('Close modal', 'anbarak') ?>" data-micromodal-close></button>
					</header>
					<main class="modal__content text-center">
						<div class="text-4xl mb-4">👋</div>
						<p class="mb-3 text-sm leading-relaxed">
							<?php esc_html_e('Hi there! This is the first release of Anbarak Lite and we need your support to improve it.', 'anbarak') ?>
						</p>
						<p class="mb-5 text-sm leading-relaxed">
							<?php esc_html_e('Your feedback, bug reports, and feature requests help us make Anbarak better for everyone.', 'anbarak') ?>
						</p>
						<div class="flex flex-col sm:flex-row gap-3 justify-center">
							<a href="https://wordpress.org/plugins/anbarak/#reviews" target="_blank" rel="noopener noreferrer" class="button button--primary !text-white">
								<?php esc_html_e('Leave a review', 'anbarak') ?>
							</a>
							<a href="https://wordpress.org/support/plugin/anbarak/" target="_blank" rel="noopener noreferrer" class="button">
								<?php esc_html_e('Support & Bug Reports', 'anbarak') ?>
							</a>
						</div>
						<button id="anbarak-review-remind-later" class="mt-4 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer">
							<?php esc_html_e('Remind me later', 'anbarak') ?>
						</button>
					</main>
				</div>
			</div>
		</div>
	</div>
</div>
