<?php
/**
 * Header View Component
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/components
 * @author     miniOrange
 */

declare(strict_types=1);

namespace MOMCS_Sync\Views\Src\Common\Components;

use MOMCS_Sync\Includes\Common\Utils\Utils;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class for rendering the header view component.
 */
class Header_View {

	/**
	 * Active tab.
	 *
	 * @var string
	 */
	private $active_tab;

	/**
	 * Constructor.
	 *
	 * @param string $active_tab Active tab.
	 */
	public function __construct( string $active_tab = 'dashboard' ) {
		$this->active_tab = $active_tab;
	}

	/**
	 * Render the header view.
	 *
	 * @return void
	 */
	public function render() {
		// Get channels using the correct namespace and method.
		$channels     = array();
		$has_channels = false;

		// Use the correct model class path.
		if ( class_exists( '\MOMCS_Sync\Includes\Common\Models\Multichannels_Model' ) ) {
			$model = new \MOMCS_Sync\Includes\Common\Models\Multichannels_Model();
			if ( method_exists( $model, 'get_all_channels' ) ) {
				$channels     = $model->get_all_channels();
				$has_channels = is_array( $channels ) && ! empty( $channels );
			}
		}
		?>
		<nav class="momcs-unified-navbar">
			<div class="momcs-navbar-brand">
				<img src="<?php echo esc_url( MOMCS_PLUGIN_URL . 'assets/icons/miniorange-icon.png' ); ?>" 
					alt="<?php esc_attr_e( 'miniOrange', 'multi-channel-for-woocommerce' ); ?>"
					class="momcs-navbar-logo">
				<div class="momcs-navbar-title">
					<div class="momcs-brand-line">
						<span class="momcs-brand-name"><?php esc_html_e( 'Multi-channel for WooCommerce', 'multi-channel-for-woocommerce' ); ?></span>
						<?php if ( Utils::is_premium_plan() ) : ?>
							<span class="momcs-brand-pro-chip"><em><?php esc_html_e( 'PRO', 'multi-channel-for-woocommerce' ); ?></em></span>
						<?php endif; ?>
					</div>
					<span class="momcs-product-name"><?php esc_html_e( 'Connect, sync, and manage listings on multiple channels effortlessly.', 'multi-channel-for-woocommerce' ); ?></span>
				</div>
			</div>
			
			<div class="momcs-navbar-menu">
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=momcs-sync-dashboard' ) ); ?>" 
					class="momcs-navbar-item <?php echo 'dashboard' === $this->active_tab ? 'active' : ''; ?>">
					<?php esc_html_e( 'Dashboard', 'multi-channel-for-woocommerce' ); ?>
				</a>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=momcs-sync-products' ) ); ?>" 
					class="momcs-navbar-item <?php echo 'products' === $this->active_tab ? 'active' : ''; ?>">
					<?php esc_html_e( 'Products', 'multi-channel-for-woocommerce' ); ?>
				</a>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=momcs-sync-orders' ) ); ?>" 
					class="momcs-navbar-item <?php echo 'orders' === $this->active_tab ? 'active' : ''; ?>">
					<?php esc_html_e( 'Orders', 'multi-channel-for-woocommerce' ); ?>
				</a>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=momcs-sync-queue' ) ); ?>" 
					class="momcs-navbar-item <?php echo 'queue' === $this->active_tab ? 'active' : ''; ?>">
					<?php esc_html_e( 'Sync Audits', 'multi-channel-for-woocommerce' ); ?>
				</a>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=momcs-sync-account' ) ); ?>" 
					class="momcs-navbar-item <?php echo 'account' === $this->active_tab ? 'active' : ''; ?>">
					<?php esc_html_e( 'Account', 'multi-channel-for-woocommerce' ); ?>
				</a>
			</div>
			<div class="momcs-navbar-actions">
				<label class="momcs-dark-mode-toggle" title="<?php esc_attr_e( 'Toggle dark mode', 'multi-channel-for-woocommerce' ); ?>">
					<input type="checkbox" class="momcs-dark-mode-toggle-input" aria-label="<?php esc_attr_e( 'Toggle dark mode', 'multi-channel-for-woocommerce' ); ?>">
					<span class="momcs-dark-mode-toggle-icon momcs-dark-mode-toggle-icon-sun" aria-hidden="true">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
					</span>
					<span class="momcs-dark-mode-toggle-icon momcs-dark-mode-toggle-icon-moon" aria-hidden="true">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>
					</span>
					<span class="momcs-dark-mode-toggle-slider"></span>
				</label>
			</div>
		</nav>

		<?php
	}
}