<?php
/**
 * Mersal Suite — System pages (General Settings, Updates, Integrations, Billing).
 *
 * These pages are owned by the Suite itself and shared across every Mersal
 * plugin. Plugins inject real data through the documented filters.
 *
 * @package Mersal_Suite
 */

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

if ( trait_exists( 'Mersal_Suite_System' ) ) {
	return;
}

/**
 * System-page rendering for Mersal_Suite.
 */
trait Mersal_Suite_System {

	/**
	 * Render a toggle switch (anchorless button driven by suite.js).
	 *
	 * @param string $key Suite option key.
	 * @param bool   $on  Current state.
	 */
	private function toggle_switch( $key, $on ) {
		$ar    = 'ar' === $this->lang();
		$swbg  = $on ? 'var(--accent)' : 'var(--border-strong)';
		$knob  = $on ? ( $ar ? '-18px' : '18px' ) : '0px';
		echo '<button data-ms-switch="' . esc_attr( $key ) . '" data-ms-on="' . ( $on ? '1' : '0' ) . '" style="width:42px; height:24px; border-radius:99px; border:none; background:' . esc_attr( $swbg ) . '; position:relative; cursor:pointer; padding:0; flex:0 0 42px;"><span style="position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; transform:translateX(' . esc_attr( $knob ) . '); transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3);"></span></button>';
	}

	/* ------------------------------------------------------------------ */
	/* General settings                                                   */
	/* ------------------------------------------------------------------ */

	/**
	 * General settings page (brand identity + team). Channel/sender options live
	 * inside each plugin (nt.sending / cm.sending / otp.channels) — not repeated
	 * here.
	 */
	private function page_settings() {
		$ar    = 'ar' === $this->lang();
		$store = $this->store_name();
		$this->page_head( $ar ? 'الإعدادات العامة' : 'General settings', $ar ? 'هوية المتجر والفريق' : 'Brand identity & team' );
		?>
		<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;">
			<div style="display:flex; flex-direction:column; gap:12px;">
				<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px; box-shadow:var(--shadow);">
					<h3 style="font-size:13.5px; font-weight:800; margin:0 0 4px; color:var(--fg-1); display:flex; align-items:center; gap:8px;"><span class="msym fill" style="font-size:19px; color:var(--accent);">badge</span><?php echo esc_html( $ar ? 'هوية المتجر' : 'Brand identity' ); ?></h3>
					<p style="margin:0 0 18px; font-size:12.5px; color:var(--fg-2);"><?php echo esc_html( $ar ? 'الاسم الذي يظهر في لوحة مرسال وترحيب الرئيسية' : 'The name shown across the Mersal dashboard' ); ?></p>
					<label style="display:block; font-size:12.5px; font-weight:700; color:var(--fg-2); margin-bottom:8px;"><?php echo esc_html( $ar ? 'اسم المتجر' : 'Store name' ); ?></label>
					<input data-ms-field="store_name" value="<?php echo esc_attr( $store ); ?>" style="width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--surface-3); color:var(--fg-1); font-size:13px; font-weight:600;">
					<button data-ms-save="store_name" style="margin-top:18px; display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none; border-radius:11px; padding:11px 18px; font-weight:800; font-size:13px; cursor:pointer;"><span class="msym fill" style="font-size:18px;">save</span><?php echo esc_html( $ar ? 'حفظ' : 'Save changes' ); ?></button>
				</div>

				<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px; box-shadow:var(--shadow);">
					<h3 style="font-size:13.5px; font-weight:800; margin:0 0 14px; color:var(--fg-1); display:flex; align-items:center; gap:8px;"><span class="msym fill" style="font-size:19px; color:var(--accent);">tune</span><?php echo esc_html( $ar ? 'إعدادات الإرسال لكل إضافة' : 'Per-plugin sending settings' ); ?></h3>
					<p style="margin:0 0 14px; font-size:12.5px; color:var(--fg-2);"><?php echo esc_html( $ar ? 'هوية المُرسِل والقنوات تُدار داخل كل إضافة حتى لا تتكرر الإعدادات:' : 'Sender identity & channels are managed inside each plugin so nothing is duplicated:' ); ?></p>
					<div style="display:flex; flex-direction:column; gap:8px;">
						<?php
						$links = array(
							array( 'otp', 'otp.channels', 'verified_user', $ar ? 'قنوات مرسال OTP' : 'Mersal OTP channels' ),
							array( 'nt', 'nt.sending', 'notifications', $ar ? 'إعدادات إرسال الإشعارات' : 'Notifications sender settings' ),
							array( 'cm', 'cm.sending', 'campaign', $ar ? 'إعدادات إرسال الحملات' : 'Campaigns sender settings' ),
						);
						foreach ( $links as $l ) {
							if ( ! isset( $this->plugins[ $l[0] ] ) ) {
								continue;
							}
							?>
							<a href="<?php echo esc_url( $this->url( $l[1] ) ); ?>" style="display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px; background:var(--surface-3); border:1px solid var(--border); color:var(--fg-1); font-size:13px; font-weight:700;">
								<span class="msym fill" style="font-size:18px; color:var(--accent);"><?php echo esc_html( $l[2] ); ?></span>
								<span style="flex:1;"><?php echo esc_html( $l[3] ); ?></span>
								<span class="msym" style="font-size:17px; color:var(--fg-3);"><?php echo esc_html( $ar ? 'chevron_left' : 'chevron_right' ); ?></span>
							</a>
							<?php
						}
						?>
					</div>
					<?php
					// Real toggles a plugin exposes to the Suite (none by default —
					// the old decorative toggles were removed on purpose).
					$toggles = apply_filters( 'mersal_suite_general_toggles', array() );
					if ( ! empty( $toggles ) ) :
						?>
						<div style="display:flex; flex-direction:column; gap:10px; margin-top:14px;">
							<?php
							foreach ( $toggles as $g ) {
								$on = (bool) $this->opt( 'gen_' . $g[0], $g[4] );
								?>
								<div style="display:flex; align-items:center; gap:13px; padding:12px; border-radius:12px; background:var(--surface-3); border:1px solid var(--border);">
									<div style="width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:0 0 36px;"><span class="msym fill" style="font-size:19px;"><?php echo esc_html( $g[1] ); ?></span></div>
									<div style="flex:1; min-width:0;"><b style="font-size:13px; color:var(--fg-1);"><?php echo esc_html( $g[2] ); ?></b><div style="font-size:11.5px; color:var(--fg-3);"><?php echo esc_html( $g[3] ); ?></div></div>
									<?php $this->toggle_switch( 'gen_' . $g[0], $on ); ?>
								</div>
								<?php
							}
							?>
						</div>
					<?php endif; ?>
				</div>
			</div>

			<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px; box-shadow:var(--shadow);">
				<h3 style="font-size:13.5px; font-weight:800; margin:0 0 6px; color:var(--fg-1); display:flex; align-items:center; gap:8px;"><span class="msym fill" style="font-size:19px; color:var(--accent);">groups</span><?php echo esc_html( $ar ? 'الفريق والصلاحيات' : 'Team & roles' ); ?></h3>
				<p style="margin:0 0 11px; font-size:12.5px; color:var(--fg-2);"><?php echo esc_html( $ar ? 'مين يقدر يوصل لكل إضافة' : 'Who can access each plugin' ); ?></p>
				<div style="display:flex; flex-direction:column; gap:10px;">
					<?php
					$team = get_users(
						array(
							'role__in' => array( 'administrator', 'shop_manager', 'editor' ),
							'number'   => 8,
							'orderby'  => 'ID',
						)
					);
					$palette = array( 'var(--accent)', 'var(--hi)', 'var(--info)', 'var(--violet)' );
					$i       = 0;
					foreach ( $team as $u ) {
						$name = $u->display_name ? $u->display_name : $u->user_login;
						$init = function_exists( 'mb_substr' ) ? mb_substr( $name, 0, 1 ) : substr( $name, 0, 1 );
						$role = ! empty( $u->roles ) ? ucfirst( (string) reset( $u->roles ) ) : '';
						$col  = $palette[ $i % count( $palette ) ];
						$i++;
						?>
						<div style="display:flex; align-items:center; gap:13px; padding:12px; border-radius:12px; background:var(--surface-3); border:1px solid var(--border);">
							<div style="width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:<?php echo esc_attr( $col ); ?>; color:#fff; font-weight:800; font-size:15px; flex:0 0 40px;"><?php echo esc_html( $init ); ?></div>
							<div style="flex:1; min-width:0;"><b style="font-size:13px; color:var(--fg-1);"><?php echo esc_html( $name ); ?></b><div style="font-size:11.5px; color:var(--fg-3); direction:ltr; text-align:start;"><?php echo esc_html( $u->user_email ); ?></div></div>
							<span style="font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px; background:var(--accent-soft); color:var(--accent);"><?php echo esc_html( $role ); ?></span>
						</div>
						<?php
					}
					?>
					<a href="<?php echo esc_url( admin_url( 'user-new.php' ) ); ?>" style="display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1.5px dashed var(--border-strong); border-radius:12px; padding:13px; color:var(--fg-3); font-weight:700; font-size:13px; cursor:pointer; background:transparent;"><span class="msym" style="font-size:18px;">person_add</span><?php echo esc_html( $ar ? 'دعوة عضو' : 'Invite member' ); ?></a>
				</div>
			</div>
		</div>
		<?php
	}

	/* ------------------------------------------------------------------ */
	/* Updates                                                            */
	/* ------------------------------------------------------------------ */

	/**
	 * Plugin updates page — real release status from the Mersal site, with
	 * one-click install (missing), update (outdated) and activate (inactive).
	 */
	private function page_updates() {
		$ar   = 'ar' === $this->lang();
		$rows = class_exists( 'Mersal_Suite_Remote' ) ? Mersal_Suite_Remote::snapshot( true ) : array();
		/** Back-compat: let plugins append/replace rows. */
		$rows  = apply_filters( 'mersal_suite_updates', $rows );
		$avail = 0;
		foreach ( $rows as $u ) {
			if ( isset( $u['status'] ) && 'outdated' === $u['status'] ) {
				$avail++;
			}
		}
		$this->page_head(
			$ar ? 'مركز التحديثات' : 'Update center',
			$avail > 0
				? sprintf( $ar ? '%d تحديث متاح الآن — التثبيت مباشرةً من mersal.it' : '%d update(s) available — installed straight from mersal.it', $avail )
				: ( $ar ? 'ثبّت وحدّث إضافات مرسال مباشرةً من mersal.it' : 'Install & update Mersal plugins straight from mersal.it' )
		);
		echo '<div style="display:flex; flex-direction:column; gap:12px; margin-bottom:18px;">';
		foreach ( $rows as $u ) {
			$def    = isset( $u['def'] ) ? $u['def'] : array();
			$name   = isset( $def['name'] ) ? $this->L( $def['name'] ) : ( isset( $u['name'] ) ? $u['name'] : '' );
			$icon   = isset( $def['icon'] ) ? $def['icon'] : ( isset( $u['icon'] ) ? $u['icon'] : 'extension' );
			$color  = isset( $def['accent'] ) ? $def['accent'] : ( isset( $u['color'] ) ? $u['color'] : '#0f7a4a' );
			$status = isset( $u['status'] ) ? $u['status'] : 'latest';
			$id     = isset( $u['id'] ) ? $u['id'] : '';
			$soft   = 'color-mix(in srgb, ' . $color . ' 15%, transparent)';

			switch ( $status ) {
				case 'outdated':
					$chip = array( 'var(--hi-soft)', 'var(--hi)', $ar ? 'تحديث متاح' : 'Update available' );
					break;
				case 'missing':
					$chip = array( 'var(--info-soft)', 'var(--info)', $ar ? 'غير مثبّتة' : 'Not installed' );
					break;
				case 'inactive':
					$chip = array( 'var(--warn-soft)', 'var(--warn)', $ar ? 'غير مفعّلة' : 'Inactive' );
					break;
				case 'error':
					$chip = array( 'var(--danger-soft)', 'var(--danger)', $ar ? 'تعذّر الفحص' : 'Check failed' );
					break;
				default:
					$chip = array( 'var(--accent-soft)', 'var(--accent)', $ar ? 'أحدث إصدار' : 'Up to date' );
			}
			if ( 'outdated' === $status ) {
				$vertxt = $u['installed'] . ' → ' . $u['remote'];
			} elseif ( 'missing' === $status ) {
				$vertxt = $u['remote'] ? $u['remote'] : '';
			} else {
				$vertxt = $u['installed'] ? $u['installed'] : ( isset( $u['remote'] ) && $u['remote'] ? $u['remote'] : '' );
			}
			$notes = ! empty( $u['changelog'] ) ? $u['changelog'] : ( ! empty( $u['error'] ) ? $u['error'] : '' );
			?>
			<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px; box-shadow:var(--shadow); display:flex; gap:16px; align-items:flex-start;">
				<div style="width:48px; height:48px; border-radius:11px; display:grid; place-items:center; background:<?php echo esc_attr( $soft ); ?>; color:<?php echo esc_attr( $color ); ?>; flex:0 0 48px;"><span class="msym fill" style="font-size:26px;"><?php echo esc_html( $icon ); ?></span></div>
				<div style="flex:1; min-width:0;">
					<div style="display:flex; align-items:center; gap:9px; flex-wrap:wrap;">
						<b style="font-size:15px; color:var(--fg-1);"><?php echo esc_html( $name ); ?></b>
						<span style="font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; background:<?php echo esc_attr( $chip[0] ); ?>; color:<?php echo esc_attr( $chip[1] ); ?>;"><?php echo esc_html( $chip[2] ); ?></span>
						<?php if ( $vertxt ) : ?>
							<span style="font-size:11.5px; color:var(--fg-3); font-family:Inter,monospace; direction:ltr;"><?php echo esc_html( $vertxt ); ?></span>
						<?php endif; ?>
					</div>
					<?php if ( $notes ) : ?>
						<div style="margin-top:9px; font-size:11.5px; font-weight:700; color:var(--fg-2);"><?php echo esc_html( $ar ? 'ما الجديد' : "What's new" ); ?></div>
						<p style="margin:3px 0 0; font-size:12.5px; color:var(--fg-2); line-height:1.55; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;"><?php echo esc_html( wp_strip_all_tags( $notes ) ); ?></p>
					<?php endif; ?>
				</div>
				<?php if ( 'outdated' === $status && $id ) : ?>
					<button data-ms-install="<?php echo esc_attr( $id ); ?>" style="background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 16px; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; flex:0 0 auto;"><?php echo esc_html( $ar ? 'تحديث الآن' : 'Update now' ); ?></button>
				<?php elseif ( 'missing' === $status && $id ) : ?>
					<button data-ms-install="<?php echo esc_attr( $id ); ?>" style="background:var(--info); color:#fff; border:none; border-radius:10px; padding:10px 16px; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; flex:0 0 auto;"><?php echo esc_html( $ar ? 'تثبيت الآن' : 'Install now' ); ?></button>
				<?php elseif ( 'inactive' === $status && ! empty( $def['plugin_file'] ) ) : ?>
					<a href="<?php echo esc_url( wp_nonce_url( admin_url( 'plugins.php?action=activate&plugin=' . rawurlencode( $def['plugin_file'] ) ), 'activate-plugin_' . $def['plugin_file'] ) ); ?>" style="background:var(--warn); color:#fff; border-radius:10px; padding:10px 16px; font-weight:800; font-size:12.5px; white-space:nowrap; flex:0 0 auto;"><?php echo esc_html( $ar ? 'تفعيل' : 'Activate' ); ?></a>
				<?php else : ?>
					<button disabled style="background:var(--surface-3); color:var(--fg-3); border:none; border-radius:10px; padding:10px 16px; font-weight:800; font-size:12.5px; cursor:default; white-space:nowrap; flex:0 0 auto;"><?php echo esc_html( 'error' === $status ? ( $ar ? '—' : '—' ) : ( $ar ? 'مُحدّث' : 'Current' ) ); ?></button>
				<?php endif; ?>
			</div>
			<?php
		}
		echo '</div>';

		$auto = class_exists( 'Mersal_Suite_Remote' ) ? Mersal_Suite_Remote::auto_update_on() : (bool) $this->opt( 'autoUpdate', false );
		?>
		<div style="display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px; box-shadow:var(--shadow);">
			<div style="width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:0 0 40px;"><span class="msym fill" style="font-size:21px;">autorenew</span></div>
			<div style="flex:1;"><b style="font-size:13.5px; color:var(--fg-1);"><?php echo esc_html( $ar ? 'التحديث التلقائي' : 'Auto-update' ); ?></b><div style="font-size:11.5px; color:var(--fg-3);"><?php echo esc_html( $ar ? 'اترك ووردبريس يثبّت إصدارات مرسال الجديدة تلقائياً' : 'Let WordPress install new Mersal versions automatically' ); ?></div></div>
			<?php $this->toggle_switch( 'autoUpdate', $auto ); ?>
		</div>
		<?php
	}

	/* ------------------------------------------------------------------ */
	/* Integrations                                                       */
	/* ------------------------------------------------------------------ */

	/**
	 * Integrations page.
	 */
	private function page_integrations() {
		$ar   = 'ar' === $this->lang();
		$this->page_head( $ar ? 'الربط والتكاملات' : 'Integrations', $ar ? 'اربط بوابات الإرسال والأدوات الخارجية' : 'Connect gateways & external tools' );
		$list = apply_filters(
			'mersal_suite_integrations',
			array(
				array(
					'id'    => 'woo',
					'name'  => 'WooCommerce',
					'icon'  => 'shopping_cart',
					'color' => '#7f54b3',
					'desc'  => $ar ? 'مزامنة الطلبات والعملاء' : 'Sync orders & customers',
					'on'    => class_exists( 'WooCommerce' ),
					'url'   => class_exists( 'WooCommerce' ) ? admin_url( 'admin.php?page=wc-settings' ) : admin_url( 'plugin-install.php?s=woocommerce&tab=search&type=term' ),
				),
			)
		);
		echo '<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:10px;">';
		foreach ( $list as $i ) {
			$on    = ! empty( $i['on'] );
			$stbg  = $on ? 'var(--accent-soft)' : 'var(--surface-3)';
			$stfg  = $on ? 'var(--accent)' : 'var(--fg-3)';
			$sttxt = $on ? ( $ar ? 'متصل' : 'Connected' ) : ( $ar ? 'غير متصل' : 'Not connected' );
			$mng   = $on ? ( $ar ? 'إدارة' : 'Manage' ) : ( $ar ? 'ربط' : 'Connect' );
			$soft  = 'color-mix(in srgb, ' . $i['color'] . ' 15%, transparent)';
			$href  = isset( $i['url'] ) ? $i['url'] : '';
			?>
			<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px; box-shadow:var(--shadow);">
				<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
					<div style="width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:<?php echo esc_attr( $soft ); ?>; color:<?php echo esc_attr( $i['color'] ); ?>;"><span class="msym fill" style="font-size:20px;"><?php echo esc_html( $i['icon'] ); ?></span></div>
					<span style="display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; background:<?php echo esc_attr( $stbg ); ?>; color:<?php echo esc_attr( $stfg ); ?>;">
						<span style="width:6px; height:6px; border-radius:50%; background:<?php echo esc_attr( $on ? 'var(--accent)' : 'var(--fg-3)' ); ?>;"></span><?php echo esc_html( $sttxt ); ?>
					</span>
				</div>
				<b style="font-size:14.5px; color:var(--fg-1);"><?php echo esc_html( $i['name'] ); ?></b>
				<p style="margin:5px 0 0; font-size:12px; color:var(--fg-2); line-height:1.5; min-height:34px;"><?php echo esc_html( isset( $i['desc'] ) ? $i['desc'] : '' ); ?></p>
				<div style="display:flex; align-items:center; justify-content:flex-end; border-top:1px solid var(--border); padding-top:13px; margin-top:13px;">
					<?php if ( $href ) : ?>
						<a href="<?php echo esc_url( $href ); ?>" style="display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--accent); cursor:pointer;"><span class="msym" style="font-size:16px;">settings</span><?php echo esc_html( $mng ); ?></a>
					<?php else : ?>
						<span style="font-size:12.5px; font-weight:700; color:var(--fg-3);"><?php echo esc_html( $mng ); ?></span>
					<?php endif; ?>
				</div>
			</div>
			<?php
		}
		echo '</div>';
	}

	/* ------------------------------------------------------------------ */
	/* Billing                                                            */
	/* ------------------------------------------------------------------ */

	/**
	 * Plan & billing page.
	 */
	private function page_billing() {
		$ar   = 'ar' === $this->lang();
		$bill = apply_filters( 'mersal_suite_billing', array() );
		$plan = isset( $bill['plan'] ) ? $bill['plan'] : ( $ar ? 'غير مرتبط بحساب مرسال' : 'No Mersal account linked' );
		$sub  = isset( $bill['sub'] ) ? $bill['sub'] : ( $ar ? 'اربط حسابك لعرض الباقة' : 'Connect your account to see your plan' );
		$bars = isset( $bill['usage'] ) && is_array( $bill['usage'] ) ? $bill['usage'] : array();
		?>
		<div style="animation:msFade .3s ease;">
			<div style="position:relative; overflow:hidden; border-radius:20px; padding:26px 28px; background:linear-gradient(125deg,#142a20,#0c6740); color:#fff; box-shadow:var(--shadow-lg); margin-bottom:18px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;">
				<div style="width:56px; height:56px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:0 0 56px;"><span class="msym fill" style="font-size:23px;">workspace_premium</span></div>
				<div style="flex:1; min-width:200px;">
					<h2 style="font-size:21px; font-weight:800; margin:0;"><?php echo esc_html( $plan ); ?></h2>
					<p style="margin:5px 0 0; font-size:13px; color:rgba(255,255,255,.82);"><?php echo esc_html( $sub ); ?></p>
				</div>
				<div style="display:flex; gap:10px;">
					<a href="https://mersal.it/user/plans" target="_blank" rel="noopener" style="background:#fff; color:#0c6740; border:none; border-radius:11px; padding:11px 18px; font-weight:800; font-size:13px; cursor:pointer;"><?php echo esc_html( $ar ? 'ترقية' : 'Upgrade' ); ?></a>
					<a href="https://mersal.it/user/dashboard" target="_blank" rel="noopener" style="background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:11px; padding:11px 18px; font-weight:700; font-size:13px; cursor:pointer;"><?php echo esc_html( $ar ? 'إدارة الباقة' : 'Manage plan' ); ?></a>
				</div>
			</div>
			<?php if ( ! empty( $bars ) ) : ?>
				<div style="background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px; box-shadow:var(--shadow);">
					<h3 style="font-size:13.5px; font-weight:800; margin:0 0 18px; color:var(--fg-1);"><?php echo esc_html( $ar ? 'الاستهلاك هذا الشهر' : 'Usage this month' ); ?></h3>
					<div style="display:flex; flex-direction:column; gap:16px;">
						<?php
						foreach ( $bars as $b ) {
							$color = isset( $b['color'] ) ? $b['color'] : 'var(--accent)';
							?>
							<div>
								<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:7px;"><span style="font-size:13px; font-weight:700; color:var(--fg-1);"><?php echo esc_html( $b['label'] ); ?></span><span style="font-size:12px; color:var(--fg-2); direction:ltr;"><?php echo esc_html( $b['val'] ); ?></span></div>
								<div style="height:9px; border-radius:99px; background:var(--surface-3); overflow:hidden;"><div style="height:100%; width:<?php echo esc_attr( $b['pct'] ); ?>; background:<?php echo esc_attr( $color ); ?>; border-radius:99px;"></div></div>
							</div>
							<?php
						}
						?>
					</div>
				</div>
			<?php endif; ?>
		</div>
		<?php
	}
}
