<?php
/**
 * Admin settings page view.
 *
 * @package MoxIcon
 */

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

$mox_icon_libraries   = MoxIcon::get_library_definitions();
$mox_icon_settings    = get_option( 'mox_icon_settings', MoxIcon::get_default_settings() );
$mox_icon_total_icons = array_sum( array_column( $mox_icon_libraries, 'count' ) );
?>
<div class="moxicon-wrap">
	<div class="moxicon-header">
		<div class="moxicon-header__logo">
			<img class="moxicon-header__brand-icon" src="<?php echo esc_url( MOX_ICON_URL . 'assets/images/mox-icons-logo.svg' ); ?>" width="48" height="55" alt="" aria-hidden="true" />
			<div>
				<h1><?php esc_html_e( 'Mox Icons', 'mox-icons-pack-for-elementor' ); ?></h1>
				<p><?php esc_html_e( 'By', 'mox-icons-pack-for-elementor' ); ?> <a href="https://moxcreative.com/" target="_blank" rel="noopener noreferrer">Moxcreative</a></p>
			</div>
		</div>
		<div class="moxicon-header__meta">
			<span class="moxicon-badge"><?php echo esc_html( 'v' . MOX_ICON_VERSION ); ?></span>
		</div>
	</div>

	<?php if ( isset( $_GET['settings-updated'] ) ) : // phpcs:ignore WordPress.Security.NonceVerification ?>
		<div class="moxicon-notice moxicon-notice--success">
			<span aria-hidden="true">&#10003;</span> <?php esc_html_e( 'Settings saved successfully.', 'mox-icons-pack-for-elementor' ); ?>
		</div>
	<?php endif; ?>

	<div class="moxicon-tabs-nav">
		<button class="moxicon-tab-btn is-active" data-target="tab-info"><?php esc_html_e( 'Icon Info', 'mox-icons-pack-for-elementor' ); ?></button>
		<button class="moxicon-tab-btn" data-target="tab-settings"><?php esc_html_e( 'Icon Settings', 'mox-icons-pack-for-elementor' ); ?></button>
		<button class="moxicon-tab-btn" data-target="tab-changelog"><?php esc_html_e( 'Info Update', 'mox-icons-pack-for-elementor' ); ?></button>
	</div>

	<div class="moxicon-tabs-content">
		
		<!-- TAB 1: ICON INFO -->
		<div id="tab-info" class="moxicon-tab-pane is-active">
			<div class="moxicon-section">
				<h2 class="moxicon-section__title"><?php esc_html_e( 'Library Information', 'mox-icons-pack-for-elementor' ); ?></h2>
				<p class="moxicon-section__desc">
					<?php
					printf(
						wp_kses(
							/* translators: 1: Total icons count wrapped in strong tag, 2: Total libraries count */
							__( 'Mox Icons currently provides a total of %1$s ready-to-use icons across %2$d libraries.', 'mox-icons-pack-for-elementor' ),
							array(
								'strong' => array(),
							)
						),
						'<strong>' . esc_html( number_format_i18n( $mox_icon_total_icons ) ) . '</strong>',
						esc_html( count( $mox_icon_libraries ) )
					);
					?>
				</p>
				
				<table class="moxicon-table">
					<thead>
						<tr>
							<th><?php esc_html_e( 'Library Name', 'mox-icons-pack-for-elementor' ); ?></th>
							<th><?php esc_html_e( 'Total Icons', 'mox-icons-pack-for-elementor' ); ?></th>
							<th><?php esc_html_e( 'License', 'mox-icons-pack-for-elementor' ); ?></th>
							<th><?php esc_html_e( 'Credit / Official Site', 'mox-icons-pack-for-elementor' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ( $mox_icon_libraries as $mox_icon_lib ) : ?>
						<tr>
							<td><strong><?php echo esc_html( $mox_icon_lib['label'] ); ?></strong></td>
							<td><?php echo esc_html( number_format_i18n( $mox_icon_lib['count'] ) ); ?></td>
							<td><span class="moxicon-tag moxicon-tag--license"><?php echo esc_html( $mox_icon_lib['license'] ); ?></span></td>
							<td><a href="<?php echo esc_url( $mox_icon_lib['credit'] ); ?>" target="_blank" rel="noopener noreferrer"><?php echo esc_html( $mox_icon_lib['credit'] ); ?> <span aria-hidden="true">&#8599;</span></a></td>
						</tr>
						<?php endforeach; ?>
					</tbody>
				</table>
			</div>
		</div>

		<!-- TAB 2: ICON SETTINGS -->
		<div id="tab-settings" class="moxicon-tab-pane">
			<form method="post" action="options.php" id="moxicon-settings-form">
				<?php settings_fields( 'mox_icon_settings_group' ); ?>

				<div class="moxicon-section">
					<h2 class="moxicon-section__title">
						<?php esc_html_e( 'Manage Libraries', 'mox-icons-pack-for-elementor' ); ?>
					</h2>
					<p class="moxicon-section__desc">
						<?php esc_html_e( 'Enable or disable icon libraries. Disabled libraries will not load in Elementor, keeping your site fast.', 'mox-icons-pack-for-elementor' ); ?>
					</p>

					<div class="moxicon-libraries">
						<?php foreach ( $mox_icon_libraries as $mox_icon_key => $mox_icon_lib ) :
							$mox_icon_enabled = isset( $mox_icon_settings[ $mox_icon_key ] ) ? (bool) $mox_icon_settings[ $mox_icon_key ] : true;
						?>
						<div class="moxicon-library-card <?php echo esc_attr( $mox_icon_enabled ? 'is-active' : '' ); ?>" data-key="<?php echo esc_attr( $mox_icon_key ); ?>">
							<div class="moxicon-library-card__header">
								<div class="moxicon-library-card__info">
									<h3><?php echo esc_html( $mox_icon_lib['label'] ); ?></h3>
									<p><?php echo esc_html( $mox_icon_lib['description'] ); ?></p>
								</div>
								<label class="moxicon-toggle" for="mox_<?php echo esc_attr( $mox_icon_key ); ?>">
									<input
										type="checkbox"
										id="mox_<?php echo esc_attr( $mox_icon_key ); ?>"
										name="mox_icon_settings[<?php echo esc_attr( $mox_icon_key ); ?>]"
										value="1"
										<?php checked( $mox_icon_enabled ); ?>
									/>
									<span class="moxicon-toggle__slider"></span>
								</label>
							</div>
							<div class="moxicon-library-card__meta">
								<span class="moxicon-tag moxicon-tag--count">
									<?php echo esc_html( number_format_i18n( $mox_icon_lib['count'] ) ); ?> <?php esc_html_e( 'icons', 'mox-icons-pack-for-elementor' ); ?>
								</span>
								<span class="moxicon-status-tag moxicon-tag <?php echo esc_attr( $mox_icon_enabled ? 'moxicon-tag--active' : 'moxicon-tag--inactive' ); ?>">
									<?php echo $mox_icon_enabled ? esc_html__( 'Active', 'mox-icons-pack-for-elementor' ) : esc_html__( 'Inactive', 'mox-icons-pack-for-elementor' ); ?>
								</span>
							</div>
						</div>
						<?php endforeach; ?>
					</div>
				</div>

				<div class="moxicon-footer">
					<?php submit_button( __( 'Save Settings', 'mox-icons-pack-for-elementor' ), 'primary', 'submit', false ); ?>
				</div>
			</form>
		</div>

		<!-- TAB 3: CHANGELOG -->
		<div id="tab-changelog" class="moxicon-tab-pane">
			<div class="moxicon-section">
				<h2 class="moxicon-section__title"><?php esc_html_e( 'Changelog & Updates', 'mox-icons-pack-for-elementor' ); ?></h2>
				<p class="moxicon-section__desc"><?php esc_html_e( 'Keep track of the latest additions to Mox Icons.', 'mox-icons-pack-for-elementor' ); ?></p>
				
				<div class="moxicon-changelog">
					<div class="moxicon-changelog__item">
						<div class="moxicon-changelog__version">
							<span class="moxicon-badge">v1.1.3</span>
							<span class="moxicon-changelog__date">July 8, 2026</span>
						</div>
						<ul class="moxicon-changelog__list">
							<li><strong><?php esc_html_e( 'Fix:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Namespaced Simple Line Icons CSS classes (icon- to mox-sli-) to prevent conflicts with other plugins that use the generic icon- prefix, such as ElementsKit Icon Pack.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'Note:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Re-select any previously inserted Simple Line Icon once so it uses the new class. Other libraries are unaffected.', 'mox-icons-pack-for-elementor' ); ?></li>
						</ul>
					</div>
					<div class="moxicon-changelog__item">
						<div class="moxicon-changelog__version">
							<span class="moxicon-badge">v1.1.2</span>
							<span class="moxicon-changelog__date">July 6, 2026</span>
						</div>
						<ul class="moxicon-changelog__list">
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Fluent UI System Color Icons (890 icons), Pixelarticons (1,172 icons), and Material Line Icons (1,279 icons).', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'Fix:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Improved generated Iconify SVG data so bundled icons render consistently from local CSS assets.', 'mox-icons-pack-for-elementor' ); ?></li>
						</ul>
					</div>
					<div class="moxicon-changelog__item">
						<div class="moxicon-changelog__version">
							<span class="moxicon-badge">v1.1.1</span>
							<span class="moxicon-changelog__date">June 6, 2026</span>
						</div>
						<ul class="moxicon-changelog__list">
							<li><strong><?php esc_html_e( 'Fix:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Reduced generated asset file count to improve upload, activation, and deletion reliability.', 'mox-icons-pack-for-elementor' ); ?></li>
						</ul>
					</div>
					<div class="moxicon-changelog__item">
						<div class="moxicon-changelog__version">
							<span class="moxicon-badge">v1.1.0</span>
							<span class="moxicon-changelog__date">June 5, 2026</span>
						</div>
						<ul class="moxicon-changelog__list">
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Lucide (1,962 icons) with ISC license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Tabler Icons (5,093 icons) with MIT license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Phosphor Icons (1,512 icons) with MIT license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Bootstrap Icons (2,078 icons) with MIT license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Iconoir (1,383 icons) with MIT license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Feather Icons (287 icons) with MIT license credit.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'Update:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added bundled third-party license files and expanded Icon Info credits.', 'mox-icons-pack-for-elementor' ); ?></li>
						</ul>
					</div>
					<div class="moxicon-changelog__item">
						<div class="moxicon-changelog__version">
							<span class="moxicon-badge">v1.0.0</span>
							<span class="moxicon-changelog__date">May 25, 2026</span>
						</div>
						<ul class="moxicon-changelog__list">
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Initial release of Mox Icons.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Heroicons Outline (324 icons).', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Heroicons Solid (324 icons).', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Material Design Icons (7,448 icons).', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'New:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Added Simple Line Icons (189 icons).', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'Feature:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Native integration with Elementor Icon Picker.', 'mox-icons-pack-for-elementor' ); ?></li>
							<li><strong><?php esc_html_e( 'Feature:', 'mox-icons-pack-for-elementor' ); ?></strong> <?php esc_html_e( 'Settings dashboard with library toggle.', 'mox-icons-pack-for-elementor' ); ?></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
