<?php
/**
 * Template: A/B Testing (native)
 *
 * Lists existing A/B tests (status, variant count, conversion rates) and offers
 * a create form with per-variant colour pickers, weights, position and type.
 * Uses the get-ab-tests / create-ab-test / start-ab-test / stop-ab-test /
 * delete-ab-test proxies. A/B testing is a plan feature; tests come from the API
 * (empty list when unavailable).
 *
 * @var array $data get-ab-tests response: { tests:[{id,name,status,variants:[{name,impressions,conversions}]}] }
 * @package Biscotti_CMP
 */

defined( 'ABSPATH' ) || exit;

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template is included inside Biscotti_Admin::render_dynamic_page(); these are function-scoped locals, not globals.

$page_title = __( 'A/B Testing', 'biscotti-cmp' );
include __DIR__ . '/partials/page-header.php';

if ( null === $data ) :
	include __DIR__ . '/partials/loading-state.php';
	return;
endif;

$tests = ( isset( $data['tests'] ) && is_array( $data['tests'] ) ) ? $data['tests'] : array();

$status_pills = array(
	'DRAFT'     => array( 'biscotti-pill-gray', '📝 ' . __( 'Draft', 'biscotti-cmp' ) ),
	'RUNNING'   => array( 'biscotti-pill-green', '▶️ ' . __( 'Running', 'biscotti-cmp' ) ),
	'PAUSED'    => array( 'biscotti-pill-amber', '⏸️ ' . __( 'Paused', 'biscotti-cmp' ) ),
	'COMPLETED' => array( 'biscotti-pill-blue', '✅ ' . __( 'Completed', 'biscotti-cmp' ) ),
);
?>

<div class="biscotti-page biscotti-page-ab-testing" id="biscotti-ab">

	<div class="biscotti-card">
		<div style="display:flex;justify-content:space-between;align-items:center;">
			<h3>🧪 <?php esc_html_e( 'Experiments', 'biscotti-cmp' ); ?></h3>
			<button type="button" id="ab-create-btn" class="button button-primary">+ <?php esc_html_e( 'Create New Test', 'biscotti-cmp' ); ?></button>
		</div>
		<p class="description"><?php esc_html_e( 'Test banner variants against each other to optimize opt-in rates.', 'biscotti-cmp' ); ?></p>

		<!-- Create form -->
		<div id="ab-form" style="display:none;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px;margin-bottom:16px;">
			<h4><?php esc_html_e( 'Create New A/B Test', 'biscotti-cmp' ); ?></h4>
			<p class="biscotti-form-row"><label><?php esc_html_e( 'Test Name', 'biscotti-cmp' ); ?></label>
				<input type="text" id="ab-name" class="biscotti-svc-input" placeholder="<?php esc_attr_e( 'e.g. Button Color Test', 'biscotti-cmp' ); ?>" />
			</p>
			<div id="ab-variants">
				<?php
				$defaults = array(
					array( __( 'Control', 'biscotti-cmp' ), '#9B6B3C' ),
					array( __( 'Variant B', 'biscotti-cmp' ), '#3b82f6' ),
				);
				foreach ( $defaults as $idx => $d ) :
					?>
					<div class="ab-variant" data-idx="<?php echo esc_attr( $idx ); ?>">
						<div class="biscotti-lw-grid-2">
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Variant Name', 'biscotti-cmp' ); ?></label><input type="text" class="biscotti-svc-input ab-vname" value="<?php echo esc_attr( $d[0] ); ?>" /></p>
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Weight (%)', 'biscotti-cmp' ); ?></label><input type="number" class="biscotti-svc-input ab-vweight" value="50" min="1" max="100" /></p>
						</div>
						<div class="biscotti-lw-grid-2">
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Primary Color', 'biscotti-cmp' ); ?></label><input type="color" class="ab-vcolor" value="<?php echo esc_attr( $d[1] ); ?>" style="width:100%;height:40px;padding:4px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;" /></p>
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Border Radius (px)', 'biscotti-cmp' ); ?></label><input type="number" class="biscotti-svc-input ab-vradius" value="12" min="0" max="50" /></p>
						</div>
						<div class="biscotti-lw-grid-2">
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Position', 'biscotti-cmp' ); ?></label>
								<select class="biscotti-svc-input ab-vposition">
									<option value="bottom-center"><?php esc_html_e( 'Bottom Center', 'biscotti-cmp' ); ?></option>
									<option value="bottom-left"><?php esc_html_e( 'Bottom Left', 'biscotti-cmp' ); ?></option>
									<option value="bottom-right"><?php esc_html_e( 'Bottom Right', 'biscotti-cmp' ); ?></option>
									<option value="top-center"><?php esc_html_e( 'Top Center', 'biscotti-cmp' ); ?></option>
									<option value="center"><?php esc_html_e( 'Center (Modal)', 'biscotti-cmp' ); ?></option>
								</select>
							</p>
							<p class="biscotti-form-row"><label><?php esc_html_e( 'Type', 'biscotti-cmp' ); ?></label>
								<select class="biscotti-svc-input ab-vtype">
									<option value="bar"><?php esc_html_e( 'Bar', 'biscotti-cmp' ); ?></option>
									<option value="modal"><?php esc_html_e( 'Modal', 'biscotti-cmp' ); ?></option>
									<option value="corner"><?php esc_html_e( 'Corner', 'biscotti-cmp' ); ?></option>
									<option value="floating"><?php esc_html_e( 'Floating', 'biscotti-cmp' ); ?></option>
								</select>
							</p>
						</div>
					</div>
				<?php endforeach; ?>
			</div>
			<p>
				<button type="button" id="ab-add-variant" class="button">+ <?php esc_html_e( 'Add Variant', 'biscotti-cmp' ); ?></button>
			</p>
			<p class="submit">
				<button type="button" id="ab-submit" class="button button-primary"><?php esc_html_e( 'Create Test', 'biscotti-cmp' ); ?></button>
				<button type="button" id="ab-cancel" class="button"><?php esc_html_e( 'Cancel', 'biscotti-cmp' ); ?></button>
				<span id="ab-status" class="biscotti-save-status" role="status"></span>
			</p>
		</div>

		<!-- Tests table -->
		<table class="widefat biscotti-data-table">
			<thead><tr>
				<th><?php esc_html_e( 'Test Name', 'biscotti-cmp' ); ?></th>
				<th><?php esc_html_e( 'Status', 'biscotti-cmp' ); ?></th>
				<th><?php esc_html_e( 'Variants', 'biscotti-cmp' ); ?></th>
				<th><?php esc_html_e( 'Conversion Rate', 'biscotti-cmp' ); ?></th>
				<th><?php esc_html_e( 'Actions', 'biscotti-cmp' ); ?></th>
			</tr></thead>
			<tbody>
				<?php if ( empty( $tests ) ) : ?>
					<tr><td colspan="5" style="text-align:center;color:#94a3b8;padding:24px;"><?php esc_html_e( 'No experiments yet.', 'biscotti-cmp' ); ?></td></tr>
				<?php else : ?>
					<?php foreach ( $tests as $tst ) :
						$st      = isset( $tst['status'] ) ? (string) $tst['status'] : 'DRAFT';
						$pill    = isset( $status_pills[ $st ] ) ? $status_pills[ $st ] : array( 'biscotti-pill-gray', $st );
						$vars    = ( isset( $tst['variants'] ) && is_array( $tst['variants'] ) ) ? $tst['variants'] : array();
						$rates   = array();
						foreach ( $vars as $vv ) {
							$imp = isset( $vv['impressions'] ) ? (int) $vv['impressions'] : 0;
							$cnv = isset( $vv['conversions'] ) ? (int) $vv['conversions'] : 0;
							$rates[] = $imp > 0 ? number_format_i18n( ( $cnv / $imp ) * 100, 1 ) . '%' : '—';
						}
						?>
						<tr data-test-id="<?php echo esc_attr( $tst['id'] ?? '' ); ?>">
							<td><strong><?php echo esc_html( $tst['name'] ?? '' ); ?></strong></td>
							<td><span class="biscotti-pill <?php echo esc_attr( $pill[0] ); ?>"><?php echo esc_html( $pill[1] ); ?></span></td>
							<td><?php echo esc_html( count( $vars ) ); ?></td>
							<td><?php echo esc_html( ! empty( $rates ) ? implode( ' / ', $rates ) : '—' ); ?></td>
							<td class="biscotti-table-actions">
								<?php if ( 'DRAFT' === $st ) : ?>
									<button type="button" class="button button-small ab-start" data-test-id="<?php echo esc_attr( $tst['id'] ?? '' ); ?>">▶ <?php esc_html_e( 'Start', 'biscotti-cmp' ); ?></button>
								<?php elseif ( 'RUNNING' === $st ) : ?>
									<button type="button" class="button button-small ab-stop" data-test-id="<?php echo esc_attr( $tst['id'] ?? '' ); ?>">⏹ <?php esc_html_e( 'Stop', 'biscotti-cmp' ); ?></button>
								<?php endif; ?>
								<button type="button" class="button button-small biscotti-btn-danger ab-delete" data-test-id="<?php echo esc_attr( $tst['id'] ?? '' ); ?>">🗑 <?php esc_html_e( 'Delete', 'biscotti-cmp' ); ?></button>
							</td>
						</tr>
					<?php endforeach; ?>
				<?php endif; ?>
			</tbody>
		</table>
	</div>
</div>
