<?php
/**
 * Payout Drawer — Summary Card
 *
 * Method-specific state card. Shows PayPal batch info + Check Status Now for
 * PayPal, Stripe transfer info for Stripe, error reason for failed payouts.
 *
 * Hidden entirely for simple methods (manual, store_credit) where there's no
 * method-specific state worth showing — the header already has amount +
 * status + affiliate, and a near-empty card there would be noise.
 *
 * 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.showSummaryCard">
	<div class="affwp-card rounded-lg border border-gray-200 bg-white overflow-hidden">

		<!--
			Tinted eyebrow strip. Standardised card-header pattern across
			the drawer (matches Supersession + Next Steps cards). Label
			is just the method name (e.g. "PAYPAL", "STRIPE") — the
			drawer header pill already carries the status, so the
			previous "Stripe — Failed" h3 was restating the pill in
			another shape. Method-only is honest about what the card's
			content actually shows (provider-specific batch/transfer
			data, not failure narration).
		-->
		<div class="px-4 py-2 bg-gray-50 border-b border-gray-200">
			<span class="text-[11px] font-semibold uppercase tracking-wide text-gray-600"
				x-text="drawer.payout.payout_method_label"></span>
		</div>

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

			<!-- PayPal-specific block: batch ID, batch status, last verified, Check Status Now -->
			<template x-if="drawer.method === 'paypal' && drawer.paypalData && drawer.paypalData.paypal_batch_id">
				<div class="space-y-3">

					<div class="flex items-start justify-between gap-3">
						<span class="text-gray-500"><?php esc_html_e( 'PayPal Batch ID', 'affiliate-wp' ); ?></span>
						<!--
							ID + external icon are one link target. Bigger hit
							area, matches the per-referral Transaction link
							treatment in the Referrals section. Falls back to
							plain text when no URL is available.
						-->
						<template x-if="drawer.paypalData.self_link || drawer.paypalData.dashboard_url">
							<a :href="drawer.paypalData.dashboard_url || drawer.paypalData.self_link"
								target="_blank"
								rel="noopener noreferrer"
								class="inline-flex items-center gap-1.5 font-mono text-xs text-affwp-link hover:text-affwp-link-hover"
								title="<?php echo esc_attr__( 'View in PayPal Developer Dashboard (opens in a new tab)', 'affiliate-wp' ); ?>">
								<span x-text="drawer.paypalData.paypal_batch_id"></span>
								<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/></svg>
							</a>
						</template>
						<template x-if="! drawer.paypalData.self_link && ! drawer.paypalData.dashboard_url">
							<span class="font-mono text-xs text-gray-900" x-text="drawer.paypalData.paypal_batch_id"></span>
						</template>
					</div>

					<div class="flex items-center justify-between">
						<span class="text-gray-500"><?php esc_html_e( 'Batch Status', 'affiliate-wp' ); ?></span>
						<!--
							Uses the unified badgeClass() helper + Title Case label
							to match the drawer header pill and the list-table badge.
							PayPal sends ALL-CAPS codes (SUCCESS/PENDING/DENIED);
							we store those verbatim server-side but render them as
							"Success"/"Pending"/"Denied" to match our own conventions.
						-->
						<span :class="drawer.badgeClass( drawer.badgeVariantForItemStatus( drawer.paypalData.batch_status ) )"
							x-text="drawer.formatStatusLabel( drawer.paypalData.batch_status )"></span>
					</div>

					<!--
						Last-verified row with inline "Check now" link.

						Previous treatment was a full bordered button labelled
						"Check Status Now" beneath this row, which read as the
						primary action of the drawer (especially with the
						matching footer button). For UNCLAIMED / pending PayPal
						payouts, polling is rarely what resolves the situation —
						the affiliate has to act first. The Next Steps card
						above is the actual primary path; Check Status is just
						the manual override of the system's automatic polling
						(the "(3 checks)" count proves the system is already
						doing this), so it's demoted to a quiet inline link.
					-->
					<template x-if="drawer.paypalData.last_checked">
						<div class="flex items-center justify-between gap-3">
							<span class="text-gray-500"><?php esc_html_e( 'Last verified', 'affiliate-wp' ); ?></span>
							<span class="flex items-center gap-2 text-xs">
								<span class="text-gray-900"
									x-text="drawer.paypalData.last_checked_human + ' (' + (drawer.paypalData.poll_count || 0) + ' check' + ((drawer.paypalData.poll_count || 0) === 1 ? '' : 's') + ')'"></span>
								<template x-if="drawer.isProcessing">
									<button type="button"
										@click="drawer.checkStatus()"
										:disabled="drawer.isChecking"
										class="cursor-pointer bg-transparent border-0 p-0 font-medium text-affwp-link hover:text-affwp-link-hover focus:outline-none focus-visible:underline rounded disabled:opacity-50 disabled:cursor-not-allowed">
										<span x-text="drawer.isChecking ? '<?php echo esc_js( __( 'Checking…', 'affiliate-wp' ) ); ?>' : '<?php echo esc_js( __( 'Check now', 'affiliate-wp' ) ); ?>'"></span>
									</button>
								</template>
							</span>
						</div>
					</template>

				</div>
			</template>

			<!--
				Stripe-specific block. Current v1 surface: count of transfers
				created, with a link to the Stripe Connect dashboard's
				transfers view. Stripe doesn't have a per-payout "batch"
				concept like PayPal — each referral creates its own Transfer
				object — so we surface the aggregate (N Transfers) rather
				than a single batch ID. Sandbox vs live routed from the
				`stripe_test_mode` setting.
			-->
			<template x-if="drawer.method === 'stripe' && drawer.hasStripeTransfers">
				<div class="space-y-3">

					<div class="flex items-center justify-between">
						<span class="text-gray-500"><?php esc_html_e( 'Stripe Transfers', 'affiliate-wp' ); ?></span>
						<span class="text-gray-900" x-text="drawer.stripeTransferCountLabel"></span>
					</div>

					<template x-if="drawer.stripeDashboardUrl">
						<div class="pt-1">
							<a :href="drawer.stripeDashboardUrl"
								target="_blank"
								rel="noopener noreferrer"
								class="inline-flex items-center gap-1.5 text-xs text-affwp-link hover:text-affwp-link-hover"
								title="<?php echo esc_attr__( 'Open Stripe Connect transfers (opens in a new tab)', 'affiliate-wp' ); ?>">
								<span><?php esc_html_e( 'View in Stripe dashboard', 'affiliate-wp' ); ?></span>
								<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/></svg>
							</a>
						</div>
					</template>

				</div>
			</template>

			<!--
				Supersession banner. Sits ABOVE the failure block because
				it's the more actionable signal: when this payout has been
				replaced by another (via Switch method), the admin's
				attention should go to the replacement, not the historical
				failure. Click-through opens the replacement payout in the
				drawer (via the drawer's openFor() — same single-drawer
				invariant the rest of the navigation uses).
			-->
			<!--
				Supersession banner was previously here. Promoted in 2.33.0
				to a standalone card rendered above this summary card (see
				payout-drawer-supersession.php), with the active-replacement
				link as a prominent CTA. The original-failure messaging
				below is also suppressed for superseded payouts (closed-
				book state, no useful re-diagnosis).
			-->

			<!--
				Failed state: surface the raw error reason ONLY when no
				Next Steps card is taking over AND the payout isn't
				superseded.

				Next Steps card: carries the human-readable diagnosis +
				the recommended action for every classified failure
				(affiliate_action_required, transient, admin_action_required,
				data_error). Showing the red block alongside it is
				diagnosis-twice → resolution.

				Superseded: the failure is closed-book and the drawer is
				retrospective audit. Showing a red "This payout failed"
				banner sends the wrong emotional signal for a resolved
				state. The error string survives in the Details panel
				for power users who need the raw text.

				Unclassified + active failures (failure_class empty or
				'unknown', not superseded) still fall through to this
				block as the safety rail.
			-->
			<!--
				Failure card error rendering. The headline reads the
				human-readable sentence (PayPal: parsed `error` field;
				other methods: the plain error_message string). The raw
				provider payload — when one exists — lives inside a
				collapsible disclosure so support can still inspect it
				without dumping JSON into the card by default.

				Inline `overflow-wrap: anywhere; white-space: pre-wrap`
				on the headline + `<pre>` keep long JSON-style tokens
				inside the red card instead of punching through the
				right edge. Kept inline (not Tailwind utilities) so the
				fix doesn't depend on a CSS rebuild — `break-words` is
				already generated, but `wrap-anywhere` and
				`whitespace-pre-wrap` would require regenerating
				admin.css. `min-w-0` on the flex child is what lets the
				wrap actually take effect inside the icon+text row.
			-->
			<template x-if="drawer.isFailed
				&& ! drawer.isSuperseded
				&& ! ( drawer.payout && drawer.payout.next_steps )
				&& (
					(drawer.paypalData && (drawer.paypalData.error_headline || drawer.paypalData.error))
					|| (drawer.payout && drawer.payout.error_message)
				)">
				<div class="rounded-md bg-red-50 border border-red-100 p-3 flex gap-2 items-start">
					<?php \AffiliateWP\Utils\Icons::render( 'circle-warning', '', [ 'class' => 'w-4 h-4 mt-0.5 text-red-500 shrink-0' ] ); ?>
					<div class="text-xs min-w-0 flex-1">
						<p class="font-medium text-red-800 m-0"><?php esc_html_e( 'This payout failed', 'affiliate-wp' ); ?></p>
						<p class="text-red-700 m-0 mt-1 break-words"
							style="overflow-wrap: anywhere; word-break: break-word;"
							x-text="(drawer.paypalData && (drawer.paypalData.error_headline || drawer.paypalData.error)) || drawer.payout.error_message"></p>

						<template x-if="drawer.paypalData && drawer.paypalData.error_raw">
							<details class="mt-2">
								<summary class="cursor-pointer select-none text-red-700"
									style="opacity: 0.85;">
									<?php esc_html_e( 'Show raw provider response', 'affiliate-wp' ); ?>
								</summary>
								<pre class="mt-1 p-2 border border-red-100 rounded text-red-900 break-words select-all m-0"
									style="background: rgba(255,255,255,0.6); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%;"
									x-text="drawer.paypalData.error_raw"></pre>
							</details>
						</template>
					</div>
				</div>
			</template>

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