<?php

namespace Waypoint\Agent\Admin;

use Waypoint\Agent\Base\Thing;

class Settings_Page extends Thing {

	const NONCE_ACTION = 'waypoint_agent_settings_save';
	const NONCE_FIELD  = 'waypoint_agent_nonce';

	public function attach_hooks(): void {
		add_action( 'admin_menu', [ $this, 'register_page' ] );
		add_action( 'admin_post_waypoint_agent_save_settings', [ $this, 'handle_save' ] );
	}

	public function register_page(): void {
		add_management_page(
			'Waypoint Agent',
			'Waypoint Agent',
			\Waypoint\Agent\Auth\Role_Manager::CAP,
			'waypoint-agent',
			[ $this, 'render' ]
		);
	}

	public function handle_save(): void {
		if ( ! current_user_can( \Waypoint\Agent\Auth\Role_Manager::CAP ) ) {
			wp_die( 'Unauthorized.' );
		}

		check_admin_referer( self::NONCE_ACTION, self::NONCE_FIELD );

		Settings::save( $_POST );

		wp_redirect( add_query_arg( [ 'page' => 'waypoint-agent', 'saved' => '1' ], admin_url( 'tools.php' ) ) );
		exit;
	}

	public function render(): void {
		if ( ! current_user_can( \Waypoint\Agent\Auth\Role_Manager::CAP ) ) {
			return;
		}

		$settings = Settings::get_all();
		$saved    = isset( $_GET['saved'] );
		?>
		<style>
		.wa-page { max-width: 780px; }

		.wa-header {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			margin: 0 0 20px;
			padding-bottom: 16px;
			border-bottom: 1px solid #c3c4c7;
		}
		.wa-header h1 { margin: 0; padding: 0; font-size: 23px; }
		.wa-header-meta { color: #8c8f94; font-size: 13px; }

		.wa-card {
			background: #fff;
			border: 1px solid #c3c4c7;
			border-radius: 3px;
			box-shadow: 0 1px 1px rgba(0,0,0,.04);
			margin-bottom: 20px;
		}
		.wa-card-title {
			padding: 12px 16px;
			margin: 0;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .7px;
			color: #8c8f94;
			border-bottom: 1px solid #f0f0f1;
		}

		.wa-feature {
			display: flex;
			align-items: center;
			gap: 24px;
			padding: 16px;
			border-bottom: 1px solid #f0f0f1;
		}
		.wa-feature:last-of-type { border-bottom: none; }

		.wa-feature-info { flex: 1; min-width: 0; }
		.wa-feature-name {
			font-size: 13px;
			font-weight: 600;
			color: #1d2327;
			margin-bottom: 3px;
		}
		.wa-feature-desc {
			font-size: 12px;
			color: #646970;
			line-height: 1.5;
		}

		.wa-feature-control {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-shrink: 0;
		}

		/* Status badge */
		.wa-badge {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: .4px;
			min-width: 64px;
			justify-content: flex-end;
		}
		.wa-badge::before {
			content: '';
			display: inline-block;
			width: 6px;
			height: 6px;
			border-radius: 50%;
		}
		.wa-badge--on  { color: #00a32a; }
		.wa-badge--on::before  { background: #00a32a; }
		.wa-badge--off { color: #8c8f94; }
		.wa-badge--off::before { background: #c3c4c7; }

		/* Toggle switch */
		.wa-toggle {
			position: relative;
			display: inline-block;
			width: 40px;
			height: 22px;
			flex-shrink: 0;
			cursor: pointer;
		}
		.wa-toggle input {
			opacity: 0;
			width: 0;
			height: 0;
			position: absolute;
		}
		.wa-toggle__track {
			position: absolute;
			inset: 0;
			background: #c3c4c7;
			border-radius: 22px;
			transition: background .15s ease;
		}
		.wa-toggle__track::before {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			left: 3px;
			top: 3px;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 1px 3px rgba(0,0,0,.25);
			transition: transform .15s ease;
		}
		.wa-toggle input:checked + .wa-toggle__track {
			background: var(--wp-admin-theme-color, #2271b1);
		}
		.wa-toggle input:checked + .wa-toggle__track::before {
			transform: translateX(18px);
		}
		.wa-toggle input:focus-visible + .wa-toggle__track {
			outline: 2px solid var(--wp-admin-theme-color, #2271b1);
			outline-offset: 2px;
		}

		/* Footer bar */
		.wa-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 12px 16px;
			background: #f6f7f7;
			border-top: 1px solid #c3c4c7;
			border-radius: 0 0 3px 3px;
		}
		.wa-footer .button-primary { margin: 0; }
		</style>

		<script>
		document.addEventListener( 'DOMContentLoaded', function () {
			document.querySelectorAll( '.wa-toggle input' ).forEach( function ( input ) {
				var badge = input.closest( '.wa-feature' ).querySelector( '.wa-badge' );
				input.addEventListener( 'change', function () {
					badge.className = 'wa-badge ' + ( this.checked ? 'wa-badge--on' : 'wa-badge--off' );
					badge.querySelector( 'span' ).textContent = this.checked ? 'Enabled' : 'Disabled';
				} );
			} );
		} );
		</script>

		<div class="wrap wa-page">
			<div class="wa-header">
				<h1>Waypoint Agent</h1>
				<span class="wa-header-meta">v<?php echo esc_html( WAYPOINT_AGENT_VERSION ); ?></span>
			</div>

			<?php if ( $saved ) : ?>
				<div class="notice notice-success is-dismissible"><p>Settings saved.</p></div>
			<?php endif; ?>

			<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
				<input type="hidden" name="action" value="waypoint_agent_save_settings">
				<?php wp_nonce_field( self::NONCE_ACTION, self::NONCE_FIELD ); ?>

				<div class="wa-card">
					<p class="wa-card-title">Features</p>

					<?php foreach ( Settings::FEATURES as $key => $feature ) :
						$on = $settings[ $key ];
					?>
						<div class="wa-feature">
							<div class="wa-feature-info">
								<div class="wa-feature-name"><?php echo esc_html( $feature['label'] ); ?></div>
								<div class="wa-feature-desc"><?php echo esc_html( $feature['description'] ); ?></div>
							</div>
							<div class="wa-feature-control">
								<span class="wa-badge <?php echo $on ? 'wa-badge--on' : 'wa-badge--off'; ?>">
									<span><?php echo $on ? 'Enabled' : 'Disabled'; ?></span>
								</span>
								<label class="wa-toggle">
									<input
										type="checkbox"
										name="<?php echo esc_attr( $key ); ?>"
										value="1"
										<?php checked( $on ); ?>
									>
									<span class="wa-toggle__track"></span>
								</label>
							</div>
						</div>
					<?php endforeach; ?>

					<div class="wa-footer">
						<?php submit_button( 'Save Settings', 'primary', 'submit', false ); ?>
					</div>
				</div>
			</form>
		</div>
		<?php
	}
}
