<?php
/**
 * Batch Drawer — Summary Card
 *
 * Batch-level metadata: progress counters, totals, creator, PayPal batch ID
 * when present. Mirrors the style of the payout drawer's Summary card so the
 * two drawers feel like one family.
 *
 * 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">
	<div class="affwp-card rounded-lg border border-gray-200 bg-white overflow-hidden">

		<!--
			Tinted eyebrow strip — standardised card-header pattern across
			the drawer family (matches payout drawer's Summary, Next Steps,
			Supersession, Details). Body padding + layout normalised to
			`flex flex-col gap-3 p-4` so the batch drawer reads as the
			same component family as the payout drawer.
		-->
		<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">
				<?php esc_html_e( 'Batch Summary', 'affiliate-wp' ); ?>
			</span>
		</div>

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

			<div class="flex items-baseline justify-between gap-3">
				<span class="text-gray-500"><?php esc_html_e( 'Progress', 'affiliate-wp' ); ?></span>
				<!--
					Status breakdown as colored chips so the eye reads counts and
					colors together — green for paid, sky for pending/in-flight,
					red for failed. Chips are hidden when their count is 0 so a
					healthy batch reads as just one green chip.
				-->
				<div class="flex flex-wrap items-center justify-end gap-1.5">
					<template x-if="drawer.batch.processed_count > 0">
						<span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-emerald-600/20"
							x-text="drawer.batch.processed_count + ' <?php echo esc_js( __( 'paid', 'affiliate-wp' ) ); ?>'"></span>
					</template>
					<template x-if="(drawer.batch.total_count - drawer.batch.processed_count - drawer.batch.failed_count) > 0">
						<span class="inline-flex items-center rounded-md bg-sky-50 px-2 py-0.5 text-xs font-medium text-sky-700 ring-1 ring-sky-600/20"
							x-text="(drawer.batch.total_count - drawer.batch.processed_count - drawer.batch.failed_count) + ' <?php echo esc_js( __( 'pending', 'affiliate-wp' ) ); ?>'"></span>
					</template>
					<template x-if="drawer.batch.failed_count > 0">
						<span class="inline-flex items-center rounded-md bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700 ring-1 ring-red-600/20"
							x-text="drawer.batch.failed_count + ' <?php echo esc_js( __( 'failed', 'affiliate-wp' ) ); ?>'"></span>
					</template>
				</div>
			</div>

			<div class="flex items-baseline justify-between gap-3">
				<span class="text-gray-500"><?php esc_html_e( 'Total', 'affiliate-wp' ); ?></span>
				<span class="text-gray-900" x-text="drawer.batch.total_amount_formatted"></span>
			</div>

			<div class="flex items-baseline justify-between gap-3">
				<span class="text-gray-500"><?php esc_html_e( 'Method', 'affiliate-wp' ); ?></span>
				<!--
					For mixed batches, show the per-method breakdown below the
					main label on its own muted line so the opaque "Mixed"
					string becomes actionable context at a glance.
				-->
				<div class="text-right">
					<div class="text-gray-900" x-text="drawer.batch.payout_method_label"></div>
					<template x-if="drawer.batch.method_breakdown">
						<div class="text-xs text-gray-500 mt-0.5" x-text="drawer.batch.method_breakdown"></div>
					</template>
				</div>
			</div>

			<div class="flex items-baseline justify-between gap-3">
				<span class="text-gray-500"><?php esc_html_e( 'Generated', 'affiliate-wp' ); ?></span>
				<span class="text-gray-900" x-text="drawer.batch.generated_label"></span>
			</div>

			<template x-if="drawer.batch.provider_batch_id">
				<div class="flex items-baseline justify-between gap-3">
					<span class="text-gray-500"><?php esc_html_e( 'PayPal Batch ID', 'affiliate-wp' ); ?></span>
					<span class="flex items-center gap-2 font-mono text-xs text-gray-900">
						<span x-text="drawer.batch.provider_batch_id"></span>
						<template x-if="drawer.batch.provider_dashboard_url">
							<a :href="drawer.batch.provider_dashboard_url"
								target="_blank"
								rel="noopener noreferrer"
								class="text-affwp-link hover:text-affwp-link-hover"
								title="<?php echo esc_attr__( 'Open in PayPal (new tab)', 'affiliate-wp' ); ?>">
								<span class="sr-only"><?php esc_html_e( 'Open in PayPal', 'affiliate-wp' ); ?></span>
								<svg class="w-3.5 h-3.5 inline" 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>
					</span>
				</div>
			</template>

		</div>

		<!--
			Manual-payout file. Bound to the Summary card (not a separate card)
			because it's the direct consequence of Method = Manual: the admin
			marked these Paid here and now needs the file to send the money
			externally. User-initiated, never auto-downloaded — regenerated on
			demand so it's re-downloadable on every revisit. Hidden unless the
			batch produced manual rows (csv_download_url empty otherwise).
		-->
		<template x-if="drawer.batch.csv_download_url">
			<div class="border-t border-gray-200 flex flex-col gap-2 p-4">
				<a :href="drawer.batch.csv_download_url"
					class="cursor-pointer inline-flex w-fit items-center 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( 'Download CSV', 'affiliate-wp' ); ?>
				</a>
				<p class="m-0 text-xs text-gray-500" x-text="drawer.batch.csv_scope_label"></p>
			</div>
		</template>
	</div>
</template>
