<?php
/**
 * Payout Drawer — Supersession Card
 *
 * Renders for payouts that were replaced via Switch payout method. The
 * row is read-only audit data; the drawer is in retrospective mode, not
 * triage mode. This card is the protagonist surface for that mode:
 *
 *   - Lead with the resolution ("this was replaced") not the original
 *     problem (the red failure block from the old summary card is
 *     suppressed for superseded payouts).
 *   - Make the click-through to the active payout the prominent action.
 *     That's the one thing an admin opening this drawer is most likely
 *     to do next.
 *
 * Visual treatment mirrors the Next Steps card: header strip with an
 * eyebrow label, body with diagnosis prose + a primary action button.
 * Brand-blue palette (not red, not amber) because this is informational
 * — the situation is closed, no urgency.
 *
 * Expects the parent `x-data="{ drawer: $store.payoutDrawer }"` scope
 * (see drawer.php content_callback).
 *
 * @package     AffiliateWP
 * @subpackage  Admin/Payouts
 * @since       2.33.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

?>

<template x-if="drawer.payout && drawer.isSuperseded && drawer.payout.superseded_by_payout_id">
	<!--
		Outer border + internal divider use gray-200 / gray-100 like
		every other drawer card. The blue is reserved for the eyebrow
		strip tint, which is the load-bearing "informational" signal.
		Earlier the outer border was border-blue-100, which visually
		separated this card from the gray-bordered stack around it —
		consistent border keeps the cards on the same visual plane.
	-->
	<div class="affwp-card rounded-lg border border-gray-200 bg-white overflow-hidden">

		<!-- Header strip: blue-tinted eyebrow signals "informational, not problem." -->
		<div class="px-4 py-2 bg-blue-50 border-b border-gray-200">
			<span class="text-[11px] font-semibold uppercase tracking-wide text-blue-800">
				<?php esc_html_e( 'Replaced', 'affiliate-wp' ); ?>
			</span>
		</div>

		<div class="flex flex-col gap-4 p-4">

			<!--
				Diagnosis pair: headline + prose. When the audit log carries
				a method_switched event matching this supersession, surface
				the specifics (from-method, to-method, actor, when) rather
				than the generic "an admin switched the method" copy. The
				specifics close the audit story right here, so the drawer
				doesn't need a separate History surface for the most common
				supersession cause.
			-->
			<div class="flex flex-col gap-2">
				<h3 class="text-sm font-semibold text-gray-900 m-0">
					<?php esc_html_e( 'This payout was replaced', 'affiliate-wp' ); ?>
				</h3>

				<!--
					Specific copy when we have a matching method_switched event
					in the audit log. find() returns the most recent matching
					event; the view interpolates the labels + actor + timestamp
					into a single readable sentence.
				-->
				<template x-if="drawer.payout && drawer.payout.last_method_switch_event">
					<p class="text-sm text-gray-600 m-0">
						<?php
						printf(
							/* translators: 1: from-method label, 2: to-method label, 3: admin name, 4: human timestamp */
							esc_html__( 'Switched from %1$s to %2$s by %3$s on %4$s. The replacement payout below is where the funds were actually paid. This row is kept as a historical record.', 'affiliate-wp' ),
							'<span class="font-medium text-gray-900" x-text="drawer.payout.last_method_switch_event.from_label"></span>',
							'<span class="font-medium text-gray-900" x-text="drawer.payout.last_method_switch_event.to_label"></span>',
							'<span x-text="drawer.payout.last_method_switch_event.actor"></span>',
							'<span x-text="drawer.payout.last_method_switch_event.at_human"></span>'
						);
						?>
					</p>
				</template>

				<!--
					Fallback when the supersession source is something other
					than a tracked method switch (e.g. a legacy supersession
					inferred from referral linkage but with no audit event in
					this payout's description).
				-->
				<template x-if="drawer.payout && ! drawer.payout.last_method_switch_event">
					<p class="text-sm text-gray-600 m-0">
						<?php esc_html_e( "An admin switched this payout's method. The replacement payout below is where the funds were actually paid. This row is kept as a historical record.", 'affiliate-wp' ); ?>
					</p>
				</template>
			</div>

			<!--
				Prominent primary action: open the active replacement
				payout in the drawer (drawer-to-drawer swap, same single-
				drawer invariant the rest of the navigation uses). This
				is the one action the admin is most likely to take when
				opening a superseded drawer — give it primary-CTA weight.
			-->
			<!--
				Pass returnTo so the replacement payout's drawer can
				render a "← Back to #75" breadcrumb at the top. The
				switchyard in goBack() routes type=payout origins
				through openFor() to come back here.
			-->
			<div>
				<button type="button"
					@click="drawer.openFor( drawer.payout.superseded_by_payout_id, { returnTo: { type: 'payout', id: drawer.payoutId } } )"
					class="cursor-pointer inline-flex items-center gap-1.5 rounded-md border border-transparent bg-affwp-brand-500 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-affwp-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-affwp-brand-500 focus-visible:ring-offset-2 transition-colors">
					<?php esc_html_e( 'View active payout', 'affiliate-wp' ); ?>
					<span x-text="'#' + drawer.payout.superseded_by_payout_id"></span>
					<span aria-hidden="true">→</span>
				</button>
			</div>

		</div>
	</div>
</template>
