import { __, sprintf } from '@wordpress/i18n';
import React, { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Plus, Search, Sparkles, Trash2 } from 'lucide-react';
import {
	Alert,
	Button,
	Card,
	Input,
	Page,
	Select,
	Spinner,
	Toggle,
} from './UI/index.jsx';
import { api } from '../api/index.js';
import { decodeHtmlEntities } from '../lib/utils.js';
const TEMPLATES = [
	{
		value: 'classic',
		label: __( 'Classic (bordered card)', 'arrayfunnel' ),
	},
	{
		value: 'highlight',
		label: __( 'Highlight (colored strip)', 'arrayfunnel' ),
	},
	{
		value: 'minimal',
		label: __( 'Minimal (clean inline)', 'arrayfunnel' ),
	},
];
const CONDITIONS = [
	{
		value: 'all',
		label: __( 'Show on all orders', 'arrayfunnel' ),
	},
	{
		value: 'product',
		label: __( 'Specific products in cart', 'arrayfunnel' ),
	},
	{
		value: 'category',
		label: __( 'Specific category in cart', 'arrayfunnel' ),
	},
	{
		value: 'cart_total',
		label: __( 'Specific cart total range', 'arrayfunnel' ),
	},
];
export default function OrderBumpManager() {
	const qc = useQueryClient();
	const [ editing, setEditing ] = useState( null );
	const [ deleting, setDeleting ] = useState( null );
	const { data, isLoading } = useQuery( {
		queryKey: [ 'bumps' ],
		queryFn: api.getBumps,
		staleTime: 45_000,
		gcTime: 10 * 60_000,
	} );
	const { mutate: deleteBump, isPending: deletingNow } = useMutation( {
		mutationFn: ( id ) => api.deleteBump( id ),
		onSuccess() {
			qc.invalidateQueries( [ 'bumps' ] );
			setDeleting( null );
		},
	} );
	const bumps = data?.items || [];
	if ( editing !== null ) {
		return (
			<BumpEditor bump={ editing } onBack={ () => setEditing( null ) } />
		);
	}
	return (
		<Page
			title={ __( 'Order Bumps', 'arrayfunnel' ) }
			subtitle={ __(
				'Design high-converting one-click offers and show them contextually at checkout.',
				'arrayfunnel'
			) }
			action={
				<Button onClick={ () => setEditing( {} ) }>
					<Plus className="h-3.5 w-3.5" />
					{ __( 'New Bump', 'arrayfunnel' ) }
				</Button>
			}
		>
			{ isLoading ? (
				<div className="flex justify-center p-16">
					<Spinner />
				</div>
			) : bumps.length === 0 ? (
				<Card>
					<div className="p-10 text-center">
						<div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded bg-arrayfunnel-accent text-arrayfunnel-primary">
							<Sparkles className="h-5 w-5" />
						</div>
						<h3 className="mb-2 text-base font-semibold text-arrayfunnel-text">
							{ __( 'No Order Bumps Yet', 'arrayfunnel' ) }
						</h3>
						<p className="mb-5 text-sm text-arrayfunnel-muted">
							{ __(
								'Create your first bump and start lifting average order value.',
								'arrayfunnel'
							) }
						</p>
						<Button onClick={ () => setEditing( {} ) }>
							{ __( 'Create First Bump', 'arrayfunnel' ) }
						</Button>
					</div>
				</Card>
			) : (
				<div className="space-y-3">
					{ bumps.map( ( bump ) => (
						<Card key={ bump.id } className="overflow-hidden">
							<div className="grid gap-4 lg:grid-cols-[72px_minmax(0,1fr)_auto] lg:items-center">
								<div className="flex h-16 w-16 items-center justify-center rounded bg-[#f6f7f7]">
									{ bump.product_image ? (
										<img
											src={ bump.product_image }
											alt=""
											width={ 56 }
											height={ 56 }
											className="h-14 w-14 rounded object-cover"
										/>
									) : (
										<div className="text-arrayfunnel-muted">
											{ __( '?', 'arrayfunnel' ) }
										</div>
									) }
								</div>
								<div className="min-w-0">
									<div className="space-y-3">
										<div className="flex flex-wrap items-center gap-3">
											<p className="truncate text-base font-semibold text-arrayfunnel-text">
												{ bump.title ||
													__(
														'Untitled Bump',
														'arrayfunnel'
													) }
											</p>
											<span
												className={ `arrayfunnel-badge ${
													bump.status
														? 'arrayfunnel-badge--success'
														: 'arrayfunnel-badge--neutral'
												}` }
											>
												{ bump.status
													? __(
															'Active',
															'arrayfunnel'
													  )
													: __(
															'Inactive',
															'arrayfunnel'
													  ) }
											</span>
										</div>
										<p className="text-sm text-arrayfunnel-muted">
											{ bump.product_name
												? `${
														bump.product_name
												  } • ${ toPlainPrice(
														bump.product_price_formatted
												  ) }`
												: sprintf(
														/* translators: %d: product ID. */
														__(
															'Product #%d',
															'arrayfunnel'
														),
														bump.product_id
												  ) }
										</p>
										<div className="mt-4 flex flex-wrap gap-2">
											<span className="arrayfunnel-badge arrayfunnel-badge--neutral">
												{ __(
													'Template:',
													'arrayfunnel'
												) }{ ' ' }
												<span className="font-semibold text-arrayfunnel-text capitalize">
													{ bump.template }
												</span>
											</span>
											<span className="arrayfunnel-badge arrayfunnel-badge--neutral">
												{ __(
													'Condition:',
													'arrayfunnel'
												) }{ ' ' }
												<span className="font-semibold text-arrayfunnel-text capitalize">
													{ bump.condition_type }
												</span>
											</span>
										</div>
									</div>
								</div>
								<div className="flex flex-wrap items-center justify-end gap-2">
									<Button
										variant="secondary"
										size="sm"
										onClick={ () => setEditing( bump ) }
									>
										{ __( 'Edit', 'arrayfunnel' ) }
									</Button>
									<Button
										variant="danger"
										size="sm"
										onClick={ () => setDeleting( bump.id ) }
									>
										<Trash2 className="h-3.5 w-3.5" />
										{ __( 'Delete', 'arrayfunnel' ) }
									</Button>
								</div>
							</div>
						</Card>
					) ) }
				</div>
			) }

			{ !! deleting && (
				<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 p-4">
					<div
						className="arrayfunnel-confirm-dialog"
						role="dialog"
						aria-modal="true"
						aria-labelledby="arrayfunnel-delete-bump-title"
					>
						<h3
							id="arrayfunnel-delete-bump-title"
							className="mb-2 text-base font-semibold text-arrayfunnel-text"
						>
							{ __( 'Delete this Order Bump?', 'arrayfunnel' ) }
						</h3>
						<p className="mb-5 text-sm text-arrayfunnel-muted">
							{ __(
								'This action cannot be undone.',
								'arrayfunnel'
							) }
						</p>
						<div className="flex justify-end gap-2.5">
							<Button
								variant="secondary"
								onClick={ () => setDeleting( null ) }
							>
								{ __( 'Cancel', 'arrayfunnel' ) }
							</Button>
							<Button
								variant="danger"
								onClick={ () => deleteBump( deleting ) }
								loading={ deletingNow }
							>
								{ __( 'Delete', 'arrayfunnel' ) }
							</Button>
						</div>
					</div>
				</div>
			) }
		</Page>
	);
}
function BumpEditor( { bump, onBack } ) {
	const qc = useQueryClient();
	const isNew = ! bump.id;
	const [ form, setForm ] = useState( {
		title: bump.title || '',
		product_id: bump.product_id || '',
		condition_type: bump.condition_type || 'all',
		template: bump.template || 'classic',
		status: bump.status !== undefined ? bump.status : 1,
		display_settings: bump.display_settings || {
			headline: __( 'Special offer', 'arrayfunnel' ),
			description: __( 'Add this item to your order.', 'arrayfunnel' ),
			cta_text: __( 'Add to my order', 'arrayfunnel' ),
			badge_text: __( 'Optional extra', 'arrayfunnel' ),
		},
	} );
	const [ productSearch, setProductSearch ] = useState( '' );
	const [ productResults, setProductResults ] = useState( [] );
	const [ selectedProduct, setSelectedProduct ] = useState(
		bump.product_id
			? {
					id: bump.product_id,
					name: bump.product_name,
					price_value: bump.product_price_value,
					price_formatted: bump.product_price_formatted,
					image: bump.product_image,
			  }
			: null
	);
	const [ saved, setSaved ] = useState( false );
	const [ error, setError ] = useState( '' );
	const { mutate: save, isPending: saving } = useMutation( {
		mutationFn: () =>
			isNew ? api.createBump( form ) : api.updateBump( bump.id, form ),
		onSuccess() {
			qc.invalidateQueries( [ 'bumps' ] );
			setSaved( true );
			setTimeout( () => {
				setSaved( false );
				onBack();
			}, 1200 );
		},
		onError( err ) {
			setError( err.message );
		},
	} );
	const setField = ( k, v ) =>
		setForm( ( f ) => ( {
			...f,
			[ k ]: v,
		} ) );
	const setDisplay = ( k, v ) =>
		setForm( ( f ) => ( {
			...f,
			display_settings: {
				...f.display_settings,
				[ k ]: v,
			},
		} ) );
	async function searchProducts( q ) {
		if ( q.length < 2 ) {
			setProductResults( [] );
			return;
		}
		try {
			const results = await api.searchProducts( q );
			setProductResults( results || [] );
		} catch ( err ) {
			setProductResults( [] );
			setError(
				err?.message ||
					__( 'Failed to search products.', 'arrayfunnel' )
			);
		}
	}
	function selectProduct( p ) {
		setSelectedProduct( p );
		setField( 'product_id', p.id );
		setProductSearch( p.name );
		setProductResults( [] );
	}
	const ctaText =
		form.display_settings.cta_text ||
		__( 'Add to my order', 'arrayfunnel' );
	const previewTemplate = form.template || 'classic';
	const previewStyles = {
		classic: {
			wrapper:
				'rounded-[1.5rem] border border-slate-200 bg-white shadow-sm',
			badge: 'bg-amber-100 text-amber-700',
			productCard:
				'mt-5 flex items-center gap-4 rounded-[1.5rem] border border-slate-200 bg-slate-50 p-4',
			productImage: 'h-16 w-16 rounded-3xl object-cover',
			productInfo: 'min-w-0 flex-1',
			cta: 'bg-emerald-600 hover:bg-emerald-700 shadow-sm shadow-emerald-500/20',
		},
		highlight: {
			wrapper:
				'relative overflow-hidden rounded-[1.5rem] border border-indigo-200 bg-indigo-50 shadow-sm',
			inner: 'relative p-5 pt-6',
			accentBar: 'absolute inset-x-0 top-0 h-2 bg-indigo-500',
			badge: 'bg-indigo-100 text-indigo-700',
			productCard:
				'mt-5 flex items-center gap-4 rounded-[1.5rem] border border-indigo-200 bg-white p-4 shadow-sm',
			productImage: 'h-16 w-16 rounded-3xl object-cover',
			productInfo: 'min-w-0 flex-1',
			cta: 'bg-indigo-600 hover:bg-indigo-700 shadow-sm shadow-indigo-500/10',
		},
		minimal: {
			wrapper:
				'rounded-[1.5rem] border border-slate-200 bg-white shadow-none',
			inner: 'p-5',
			badge: 'text-slate-500',
			productCard:
				'mt-5 flex items-center gap-3 rounded-3xl border border-slate-200 bg-white p-3',
			productImage: 'h-14 w-14 rounded-2xl object-cover',
			productInfo: 'min-w-0 flex-1',
			cta: 'border border-slate-900 bg-white text-slate-900 hover:bg-slate-100 shadow-none',
		},
	};
	const previewClasses =
		previewStyles[ previewTemplate ] || previewStyles.classic;
	return (
		<Page
			title={
				isNew
					? __( 'New Order Bump', 'arrayfunnel' )
					: sprintf(
							/* translators: %s: order bump title. */
							__( 'Edit: %s', 'arrayfunnel' ),
							bump.title || __( 'Order Bump', 'arrayfunnel' )
					  )
			}
			action={
				<Button variant="secondary" onClick={ onBack }>
					{ __( 'Back', 'arrayfunnel' ) }
				</Button>
			}
		>
			<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
				<div className="space-y-5">
					{ !! error && <Alert type="error">{ error }</Alert> }
					{ !! saved && (
						<Alert type="success">
							{ __( 'Saved successfully.', 'arrayfunnel' ) }
						</Alert>
					) }

					<Card title={ __( 'Basic Settings', 'arrayfunnel' ) }>
						<div className="space-y-3">
							<Input
								label={ __(
									'Bump title (internal)',
									'arrayfunnel'
								) }
								value={ form.title }
								onChange={ ( v ) => setField( 'title', v ) }
								placeholder={ __(
									'Checkout Offer - Protein Bar',
									'arrayfunnel'
								) }
							/>

							<div>
								<label
									htmlFor="arrayfunnel-bump-product-search"
									className="arrayfunnel-field__label mb-1.5"
								>
									{ __( 'Product', 'arrayfunnel' ) }
								</label>
								<div className="relative">
									<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
										<Search className="h-3.5 w-3.5 text-arrayfunnel-muted" />
									</div>
									<input
										id="arrayfunnel-bump-product-search"
										value={ productSearch }
										onChange={ ( e ) => {
											setProductSearch( e.target.value );
											searchProducts( e.target.value );
										} }
										placeholder={ __(
											'Search products…',
											'arrayfunnel'
										) }
										className="arrayfunnel-search-control"
									/>

									{ productResults.length > 0 && (
										<div className="arrayfunnel-search-results">
											{ productResults.map( ( p ) => (
												<button
													key={ p.id }
													type="button"
													onClick={ () =>
														selectProduct( p )
													}
													className="arrayfunnel-search-results__option"
												>
													{ !! p.image && (
														<img
															src={ p.image }
															width={ 36 }
															height={ 36 }
															className="h-9 w-9 rounded object-cover"
															alt=""
														/>
													) }
													<span className="min-w-0">
														<span className="block truncate font-medium text-arrayfunnel-text">
															{ p.name }
														</span>
														<span className="block text-xs text-arrayfunnel-muted">
															{ toPlainPrice(
																p.price_formatted
															) }
														</span>
													</span>
												</button>
											) ) }
										</div>
									) }
								</div>

								{ !! selectedProduct && (
									<div className="arrayfunnel-selected-product mt-2">
										{ !! selectedProduct.image && (
											<img
												src={ selectedProduct.image }
												width={ 28 }
												height={ 28 }
												className="rounded"
												alt=""
											/>
										) }
										<span className="min-w-0 flex-1 truncate font-medium text-arrayfunnel-primary">
											{ selectedProduct.name }
										</span>
										<button
											type="button"
											onClick={ () => {
												setSelectedProduct( null );
												setField( 'product_id', '' );
												setProductSearch( '' );
											} }
											className="arrayfunnel-selected-product__remove"
											aria-label={ __(
												'Remove selected product',
												'arrayfunnel'
											) }
										>
											{ __( '\xD7', 'arrayfunnel' ) }
										</button>
									</div>
								) }
							</div>

							<Select
								label={ __( 'Template', 'arrayfunnel' ) }
								value={ form.template }
								onChange={ ( v ) => setField( 'template', v ) }
								options={ TEMPLATES }
							/>
							<Select
								label={ __( 'Show when', 'arrayfunnel' ) }
								value={ form.condition_type }
								onChange={ ( v ) =>
									setField( 'condition_type', v )
								}
								options={ CONDITIONS }
							/>

							<Toggle
								checked={ !! form.status }
								onChange={ ( v ) =>
									setField( 'status', v ? 1 : 0 )
								}
								label={ __( 'Bump active', 'arrayfunnel' ) }
								description={ __(
									'Only active bumps are shown on checkout.',
									'arrayfunnel'
								) }
							/>
						</div>
					</Card>

					<Card title={ __( 'Display Content', 'arrayfunnel' ) }>
						<div className="space-y-3">
							<Input
								label={ __( 'Headline', 'arrayfunnel' ) }
								value={ form.display_settings.headline || '' }
								onChange={ ( v ) =>
									setDisplay( 'headline', v )
								}
							/>
							<Input
								label={ __( 'Description', 'arrayfunnel' ) }
								value={
									form.display_settings.description || ''
								}
								onChange={ ( v ) =>
									setDisplay( 'description', v )
								}
							/>
							<Input
								label={ __( 'Button text', 'arrayfunnel' ) }
								value={ ctaText }
								onChange={ ( v ) =>
									setDisplay( 'cta_text', v )
								}
							/>
							<Input
								label={ __(
									'Badge text (optional)',
									'arrayfunnel'
								) }
								value={ form.display_settings.badge_text || '' }
								onChange={ ( v ) =>
									setDisplay( 'badge_text', v )
								}
							/>
						</div>
					</Card>
				</div>

				<div className="space-y-5">
					<Card title={ __( 'Live Preview', 'arrayfunnel' ) }>
						<div
							className={ `arrayfunnel-storefront-preview ${ previewClasses.wrapper }` }
						>
							{ previewClasses.accentBar && (
								<div className={ previewClasses.accentBar } />
							) }
							<div className={ previewClasses.inner || 'p-5' }>
								<div className="flex flex-wrap items-center justify-between gap-3">
									<div
										className={ `inline-flex items-center gap-2 rounded-full px-3 py-1 text-[11px] font-semibold ${ previewClasses.badge }` }
									>
										{ form.display_settings.badge_text ||
											__(
												'Optional extra',
												'arrayfunnel'
											) }
									</div>
									<span className="rounded-full bg-slate-100 px-3 py-1 text-[11px] font-semibold text-slate-600">
										{ __( 'Template:', 'arrayfunnel' ) }{ ' ' }
										{ previewTemplate
											.charAt( 0 )
											.toUpperCase() +
											previewTemplate.slice( 1 ) }
									</span>
								</div>
								<p className="mt-4 text-base font-semibold tracking-[-0.02em] text-slate-900">
									{ form.display_settings.headline ||
										__(
											'Recommended add-on',
											'arrayfunnel'
										) }
								</p>
								<p className="mt-2 text-sm leading-6 text-slate-600">
									{ form.display_settings.description ||
										__(
											'Add this item to your order.',
											'arrayfunnel'
										) }
								</p>

								<div className={ previewClasses.productCard }>
									{ selectedProduct?.image && (
										<img
											src={ selectedProduct.image }
											alt={ selectedProduct.name }
											width={ 72 }
											height={ 72 }
											className={
												previewClasses.productImage
											}
										/>
									) }
									<div
										className={ previewClasses.productInfo }
									>
										<p className="font-semibold text-slate-900">
											{ selectedProduct?.name ||
												__(
													'Selected product will appear here',
													'arrayfunnel'
												) }
										</p>
										{ selectedProduct?.price_formatted ? (
											<p className="mt-1 text-xs text-slate-500">
												{ toPlainPrice(
													selectedProduct.price_formatted
												) }
											</p>
										) : (
											<p className="mt-1 text-xs text-slate-500">
												{ __(
													'Choose a product to preview price',
													'arrayfunnel'
												) }
											</p>
										) }
									</div>
								</div>

								<button
									type="button"
									className={ `mt-5 w-full rounded-2xl px-4 py-3 text-sm font-semibold transition ${
										previewTemplate === 'minimal'
											? 'text-slate-900'
											: 'text-white'
									} ${ previewClasses.cta }` }
								>
									{ ctaText }
								</button>
							</div>
						</div>
					</Card>

					<Card title={ __( 'Display Order', 'arrayfunnel' ) }>
						<div className="space-y-2">
							{ [
								__( 'Headline', 'arrayfunnel' ),
								__( 'Description', 'arrayfunnel' ),
								__( 'Product Summary', 'arrayfunnel' ),
								__( 'CTA Button', 'arrayfunnel' ),
							].map( ( item, index ) => (
								<div
									key={ item }
									className="arrayfunnel-panel flex items-center gap-3 text-sm"
								>
									<span className="arrayfunnel-badge arrayfunnel-badge--neutral">
										{ index + 1 }
									</span>
									{ item }
								</div>
							) ) }
						</div>
					</Card>
				</div>
			</div>
			<div className="arrayfunnel-settings-actions">
				<div className="arrayfunnel-settings-actions__inner">
					<div className="arrayfunnel-settings-actions__content">
						<Button
							onClick={ save }
							loading={ saving }
							disabled={ ! form.product_id || saving || saved }
							aria-busy={ saving }
						>
							{ saving
								? __( 'Saving…', 'arrayfunnel' )
								: isNew
								? __( 'Create Order Bump', 'arrayfunnel' )
								: __( 'Save Changes', 'arrayfunnel' ) }
						</Button>
						<Button
							variant="secondary"
							onClick={ onBack }
							disabled={ saving }
						>
							{ __( 'Cancel', 'arrayfunnel' ) }
						</Button>
					</div>
				</div>
			</div>
		</Page>
	);
}
function toPlainPrice( value ) {
	if ( ! value ) {
		return '';
	}
	const withoutHtml = String( value ).replace( /<[^>]*>/g, ' ' );
	return decodeHtmlEntities( withoutHtml ).replace( /\s+/g, ' ' ).trim();
}