<?php
/**
 * Batch Drawer — Payouts Section
 *
 * Alpine-rendered list of the batch's child payouts. Not a WP_List_Table —
 * that's too heavy for a drawer. Each row is clickable and opens the payout
 * drawer (closes this drawer first, single-drawer invariant).
 *
 * Status filter tabs appear above the list when the batch has more than one
 * status represented. For all-paid or all-failed batches, the tab row is
 * hidden — zero value, adds clutter.
 *
 * Expects the parent `x-data="{ drawer: $store.batchDrawer }"` scope.
 *
 * @package     AffiliateWP
 * @subpackage  Admin/Payouts
 * @since       2.33.0
 */

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

?>
<template x-if="drawer.batch && drawer.payouts && drawer.payouts.length > 0">
	<section class="space-y-3">

		<!-- Heading + filter tabs. Tabs only appear when the batch has
		     multiple statuses — single-status batches don't need them. -->
		<div class="flex items-center justify-between gap-3 flex-wrap">
			<!--
				mb-3 dropped: the parent `<section class="space-y-3">` already
				handles spacing between heading and the cards below. The
				mb-3 was doubling the gap below the heading.
			-->
			<h3 class="text-sm font-semibold text-gray-900 m-0" x-text="drawer.batch.payouts_heading"></h3>

			<template x-if="drawer.statusFilterOptions.length > 1">
				<div class="inline-flex items-center rounded-md border border-gray-200 bg-gray-50 p-0.5" role="tablist">
					<template x-for="opt in drawer.statusFilterOptions" :key="opt.key">
						<button type="button"
							role="tab"
							:aria-selected="drawer.statusFilter === opt.key"
							@click="drawer.statusFilter = opt.key"
							:class="drawer.statusFilter === opt.key
								? 'bg-white text-gray-900 shadow-sm'
								: 'bg-transparent text-gray-500 hover:text-gray-900'"
							class="cursor-pointer rounded px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-affwp-brand-500">
							<span x-text="opt.label"></span>
							<span class="ml-1 text-gray-400" x-text="'· ' + opt.count"></span>
						</button>
					</template>
				</div>
			</template>
		</div>

		<!-- Payout cards. Each row is a richer two-line layout — ID + name
		     on line 1, method label on line 2 as muted context — so the
		     list has the same visual density as the Summary card above.
		     Status badge stays right-anchored as the primary row signal. -->
		<div class="space-y-2">
			<template x-for="payout in drawer.filteredPayouts" :key="payout.payout_id">

				<!--
					overflow-hidden + focus-visible (instead of focus)
					match the standardised drawer-card recipe. focus-visible
					keeps the brand ring off mouse-clicks but preserves
					keyboard accessibility.
				-->
				<button type="button"
					@click="drawer.openPayout( payout.payout_id )"
					class="affwp-card w-full text-left rounded-lg border border-gray-200 bg-white overflow-hidden px-4 py-3 flex items-center justify-between gap-3 hover:border-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-affwp-brand-500 cursor-pointer transition-colors">

					<div class="flex flex-col gap-0.5 min-w-0">
						<!-- Line 1: #id  ·  amount  ·  affiliate. Amount stays
						     prominent — it's the "how much did this row move" answer. -->
						<div class="flex items-baseline gap-2 min-w-0">
							<span class="font-medium text-affwp-link hover:text-affwp-link-hover shrink-0" x-text="'#' + payout.payout_id"></span>
							<span class="text-sm text-gray-900 shrink-0" x-text="payout.amount_formatted"></span>
							<span class="text-sm text-gray-500 truncate" x-text="payout.affiliate_name"></span>
						</div>

						<!-- Line 2: method label, muted. Closes the ambiguity of
						     a "Mixed" parent batch — admin can see each row's
						     actual routing without opening the payout. -->
						<template x-if="payout.method_label">
							<div class="text-xs text-gray-500" x-text="payout.method_label"></div>
						</template>
					</div>

					<!--
						Right-anchored status badge. Single primary signal per
						row. Failure-class diagnosis and error detail live in
						the per-payout drawer one click away. List-row
						convention is preview, not detail (matches Stripe
						Dashboard, Linear, Vercel, GitHub Actions).
					-->
					<div class="shrink-0">
						<span :class="payout.status_badge_class" x-text="payout.status_label"></span>
					</div>

				</button>

			</template>
		</div>

		<!-- Filtered-to-empty state: when the active tab has zero matches. -->
		<template x-if="drawer.filteredPayouts.length === 0">
			<p class="text-xs text-gray-500 m-0 px-4 py-3 rounded-md border border-dashed border-gray-200 bg-gray-50 text-center">
				<?php esc_html_e( 'No payouts match this filter.', 'affiliate-wp' ); ?>
			</p>
		</template>

	</section>
</template>

<!--
	Empty payouts list — two distinct cases:
	  1. Batch is still processing (AS workers haven't created rows yet,
	     or have just started). Show a "waiting for workers" loader so
	     the drawer reads as live rather than broken. The outer drawer
	     already polls every 3s while status=processing, so payouts
	     will appear on their own.
	  2. Batch is in a terminal state (completed / failed / partial)
	     with zero child payouts. That's the true empty state.
-->
<template x-if="drawer.batch && drawer.payouts && drawer.payouts.length === 0 && drawer.status === 'processing'">
	<section class="rounded-lg border border-gray-200 bg-white px-5 py-8 text-center">
		<div class="flex flex-col items-center gap-3">
			<svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
			</svg>
			<div class="space-y-1">
				<p class="text-sm font-medium text-gray-700 m-0"><?php esc_html_e( 'Processing payouts…', 'affiliate-wp' ); ?></p>
				<p class="text-xs text-gray-500 m-0"><?php esc_html_e( 'Each affiliate is being paid in the background. Rows will appear here as they complete.', 'affiliate-wp' ); ?></p>
			</div>
		</div>
	</section>
</template>

<template x-if="drawer.batch && drawer.payouts && drawer.payouts.length === 0 && drawer.status !== 'processing'">
	<section class="rounded-lg border border-dashed border-gray-200 bg-gray-50 px-5 py-6 text-center">
		<p class="text-sm text-gray-500 m-0"><?php esc_html_e( 'This batch has no payouts.', 'affiliate-wp' ); ?></p>
	</section>
</template>
