<?php
/**
 * Payout Drawer — Header (affiliate identity + payout metadata)
 *
 * Two-line layout so long affiliate names don't break the drawer ribbon:
 *
 *   [avatar]  Affiliate Name                                        ← bold
 *             NZD 123.00 · Processing · Apr 20, 2026                ← muted
 *
 * The avatar is `items-start` aligned with the first line of text so the name
 * is always at eye level regardless of how long the metadata row grows.
 *
 * Rendered via the drawer trait's `header_callback` slot.
 *
 * @package     AffiliateWP
 * @subpackage  Admin/Payouts
 * @since       2.33.0
 */

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

?>
<!--
	Pager sits *on the title row*, to the left of the close-X button.

	The trait renders the title (<h2 x-text="title">) above the header_callback
	slot, with a close-X button on the far right. Neither is directly reachable
	from our callback. We anchor the pager absolutely against the drawer shell
	(`relative` class on the outer drawer panel in trait-drawers.php) so it
	drops into the visual slot between "Payout #X" and the close-X.

	Tuning: top-5 (20px) vertically centers the 24px pager bar against the
	32px close-X (header row is items-start, so top-4 would align TOPS and
	leave the pager's center 4px above X's). right-20 (80px) clears the
	close-X button (p-1.5 on a 20px icon ≈ 32px wide + 24px right
	padding ≈ 56px from drawer edge) with a comfortable ~24px breathing gap.
-->
<div x-show="$store.payoutDrawer.payout && $store.payoutDrawer.showPager"
	x-cloak
	class="absolute right-20 top-5 flex items-center gap-2 text-xs text-gray-500 z-10">
		<span x-text="$store.payoutDrawer.listPosition + ' of ' + $store.payoutDrawer.listTotal"></span>
		<span class="text-gray-300" aria-hidden="true">·</span>
		<div class="inline-flex items-center gap-0.5">
			<button type="button"
				@click="$store.payoutDrawer.goPrev()"
				:disabled="! $store.payoutDrawer.hasPrev"
				class="inline-flex items-center justify-center size-6 rounded bg-transparent border-0 text-gray-500 hover:text-gray-900 hover:bg-gray-100 disabled:opacity-30 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-affwp-brand-500 cursor-pointer transition-colors"
				data-tooltip-html="<?php echo esc_attr( affwp_dark_tooltip_html( __( 'Prev', 'affiliate-wp' ), '', '↑' ) ); ?>"
				data-tooltip-placement="bottom"
				data-tooltip-arrow="false"
				data-tooltip-interactive="false">
				<span class="sr-only"><?php esc_html_e( 'Previous payout', 'affiliate-wp' ); ?></span>
				<?php \AffiliateWP\Utils\Icons::render( 'chevron-up', [ 'class' => 'size-4' ] ); ?>
			</button>
			<button type="button"
				@click="$store.payoutDrawer.goNext()"
				:disabled="! $store.payoutDrawer.hasNext"
				class="inline-flex items-center justify-center size-6 rounded bg-transparent border-0 text-gray-500 hover:text-gray-900 hover:bg-gray-100 disabled:opacity-30 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-affwp-brand-500 cursor-pointer transition-colors"
				data-tooltip-html="<?php echo esc_attr( affwp_dark_tooltip_html( __( 'Next', 'affiliate-wp' ), '', '↓' ) ); ?>"
				data-tooltip-placement="bottom"
				data-tooltip-arrow="false"
				data-tooltip-interactive="false">
				<span class="sr-only"><?php esc_html_e( 'Next payout', 'affiliate-wp' ); ?></span>
				<?php \AffiliateWP\Utils\Icons::render( 'chevron-down', [ 'class' => 'size-4' ] ); ?>
			</button>
		</div>
</div>

<template x-if="$store.payoutDrawer.payout">
<div>

	<!--
		Breadcrumb: "← Back to Batch #N" — only renders when this drawer was
		opened via a drawer-to-drawer swap from the batch drawer (returnTo
		is set by batchDrawer.openPayout()). Clicking closes this drawer
		and re-opens the batch drawer. Cleared on close + on keyboard
		navigation (arrow keys) because once the admin starts walking the
		list, the "came from batch" origin is no longer meaningful.
	-->
	<!--
		@click.stop is essential on both breadcrumb buttons. goBack()
		clears `returnTo`, which causes the x-if to remove the button
		from the DOM. Without .stop the click event keeps bubbling up
		to the drawer wrapper's outside-click handler in trait-drawers.php,
		which calls event.target.closest('[data-affwp-drawer-panel]') —
		gets null on the now-detached button — and concludes the click
		was outside the drawer, closing it. Same trap we hit on the
		Resend reminder; flagged here for the next person.
	-->
	<template x-if="$store.payoutDrawer.returnTo && $store.payoutDrawer.returnTo.type === 'batch'">
		<button type="button"
			@click.stop="$store.payoutDrawer.goBack()"
			class="mt-1 inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-900 bg-transparent border-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-affwp-brand-500 rounded">
			<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M15 18l-6-6 6-6"/>
			</svg>
			<span>
				<?php echo esc_html_x( 'Back to Batch', 'drawer breadcrumb', 'affiliate-wp' ); ?>
				#<span x-text="$store.payoutDrawer.returnTo.id"></span>
			</span>
		</button>
	</template>

	<!--
		Breadcrumb: "← Back to #N" — renders when this drawer was opened
		from another payout's drawer via the supersession card's "View
		active payout #N" CTA. Same affordance + visual treatment as the
		batch breadcrumb above; the switchyard in goBack() routes to the
		correct openFor call based on returnTo.type.
	-->
	<template x-if="$store.payoutDrawer.returnTo && $store.payoutDrawer.returnTo.type === 'payout'">
		<button type="button"
			@click.stop="$store.payoutDrawer.goBack()"
			class="mt-1 inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-900 bg-transparent border-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-affwp-brand-500 rounded">
			<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M15 18l-6-6 6-6"/>
			</svg>
			<span>
				<?php echo esc_html_x( 'Back to', 'drawer breadcrumb', 'affiliate-wp' ); ?>
				#<span x-text="$store.payoutDrawer.returnTo.id"></span>
			</span>
		</button>
	</template>

	<!--
		Breadcrumb: "← Back to selection" — renders when this drawer was opened from the
		Referrals bulk-pay drawer's "View payout" link (returnTo.type === 'bulkPay').
		goBack() re-opens the bulk-pay drawer with the same hand-picked selection.
	-->
	<template x-if="$store.payoutDrawer.returnTo && $store.payoutDrawer.returnTo.type === 'bulkPay'">
		<button type="button"
			@click.stop="$store.payoutDrawer.goBack()"
			class="mt-1 inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-900 bg-transparent border-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-affwp-brand-500 rounded">
			<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
				<path d="M15 18l-6-6 6-6"/>
			</svg>
			<span><?php echo esc_html_x( 'Back to selection', 'drawer breadcrumb', 'affiliate-wp' ); ?></span>
		</button>
	</template>

	<!--
		Affiliate identity row dims during in-drawer navigation so the
		avatar + name + status ribbon crossfades with the body content.
		Pager chevrons above stay at full opacity so the nav controls
		never feel unresponsive.
	-->
	<div class="mt-2 flex items-start gap-3 text-sm min-w-0 transition-opacity duration-200"
		:class="{ 'opacity-60': $store.payoutDrawer.isNavigating }">

		<!--
			Avatar: gray circle + initials is the always-on fallback layer.
			The Gravatar <img> sits absolutely positioned on top; when it loads
			successfully it covers the initials, when it errors it removes itself
			and the initials stay visible. Matches PR #5752's stack helper.
		-->
		<a :href="$store.payoutDrawer.payout.affiliate_url"
			class="shrink-0 mt-0.5 rounded-full transition-shadow focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-affwp-brand-500 hover:ring-2 hover:ring-offset-1 hover:ring-affwp-brand-500">
			<span class="relative size-7 rounded-full bg-affwp-avatar-bg inline-flex items-center justify-center overflow-hidden">
				<span class="text-gray-500 text-[11px] font-semibold"
					x-text="$store.payoutDrawer.payout.affiliate_initials"></span>
				<template x-if="$store.payoutDrawer.payout.affiliate_avatar_url">
					<img :src="$store.payoutDrawer.payout.affiliate_avatar_url"
						alt=""
						class="absolute inset-0 size-7 rounded-full object-cover opacity-0"
						loading="lazy"
						onload="this.style.opacity=1"
						onerror="this.remove()">
				</template>
			</span>
		</a>

		<!-- Text column — min-w-0 so truncate works on long names. -->
		<div class="min-w-0 flex-1">

			<!-- Line 1: affiliate name, bold, truncating. Status badge is no
			     longer here — it's promoted to the title row via the drawer
			     trait's title_badge_callback so state reads adjacent to the
			     "Payout #N" identifier. -->
			<a :href="$store.payoutDrawer.payout.affiliate_url"
				class="inline-block max-w-full truncate font-medium text-gray-900 hover:underline"
				x-text="$store.payoutDrawer.payout.affiliate_name"></a>

			<!--
				Line 2: muted metadata row (amount · method · date).

				The method token (Stripe / PayPal / Manual / Store credit) is
				here in 2.33.0 to compensate for the failure-summary card
				disappearing on classified failures. Without it the admin
				would lose the "which payment rail did we try?" context the
				old "Stripe — Failed" card header used to provide. We
				normalise store_credit → "Store credit" via underscore →
				space + the capitalize class on the wrapper.
			-->
			<!--
				Method token uses the server-built `payout_method_label`
				rather than the slug + CSS capitalize. Tailwind's
				`capitalize` only handles per-word casing (so "paypal"
				becomes "Paypal"), which breaks brand-specific casing
				like "PayPal". The display-label helper is the registry's
				source of truth for the right rendering.
			-->
			<div class="mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-gray-500">
				<span x-text="$store.payoutDrawer.payout.amount_formatted"></span>
				<template x-if="$store.payoutDrawer.payout.payout_method_label">
					<span class="text-gray-300" aria-hidden="true">·</span>
				</template>
				<template x-if="$store.payoutDrawer.payout.payout_method_label">
					<span x-text="$store.payoutDrawer.payout.payout_method_label"></span>
				</template>
				<template x-if="$store.payoutDrawer.payout.date_short">
					<span class="text-gray-300" aria-hidden="true">·</span>
				</template>
				<template x-if="$store.payoutDrawer.payout.date_short">
					<span x-text="$store.payoutDrawer.payout.date_short"></span>
				</template>
			</div>

		</div>

	</div>

</div>
</template>
