import { Button, CheckboxControl, Icon, Spinner, ToggleControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { code, external } from '@wordpress/icons';
import type { ProductRow, ProductStateMap, ProtectionStatus } from '../types';
import SnapshotModal from './SnapshotModal';

/** Base URL of the Mintall Keep web app, for deep-linking to product pages. */
const APP_URL = window.mintallKeep?.appUrl ?? '';

function getBarColor(score: number): string {
	if (score < 40) return '#d72c0d';
	if (score < 80) return '#f5a623';
	if (score >= 100) return '#00a32a';
	return '#2c6ecb';
}

function getTextColor(score: number): string {
	if (score < 40) return '#d72c0d';
	if (score < 80) return '#9c6f19';
	if (score >= 100) return '#00a32a';
	return '#2c6ecb';
}

interface ProductsTableProps {
	items: ProductRow[];
	productState?: ProductStateMap;
	onVisibilityChange?: (productId: number, enabled: boolean) => void;
	onProtect?: (productId: number) => Promise<void>;
	selectedIds?: Set<number>;
	onSelectionChange?: (ids: Set<number>) => void;
}

export default function ProductsTable({
	items,
	productState,
	onVisibilityChange,
	onProtect,
	selectedIds,
	onSelectionChange,
}: ProductsTableProps): JSX.Element {
	const [protectingIds, setProtectingIds] = useState<Set<number>>(new Set());
	const [snapshotProduct, setSnapshotProduct] = useState<{ id: number; name: string } | null>(null);

	const showSelection = Boolean(selectedIds && onSelectionChange);
	const pageIds = items.map((item) => item.product_id);
	const selectedOnPage = pageIds.filter((id) => selectedIds?.has(id));
	const allOnPageSelected = pageIds.length > 0 && selectedOnPage.length === pageIds.length;
	const someOnPageSelected = selectedOnPage.length > 0 && !allOnPageSelected;

	const toggleSelectAll = (checked: boolean): void => {
		if (!selectedIds || !onSelectionChange) return;
		const next = new Set(selectedIds);
		for (const id of pageIds) {
			if (checked) next.add(id);
			else next.delete(id);
		}
		onSelectionChange(next);
	};

	const toggleSelectOne = (productId: number, checked: boolean): void => {
		if (!selectedIds || !onSelectionChange) return;
		const next = new Set(selectedIds);
		if (checked) next.add(productId);
		else next.delete(productId);
		onSelectionChange(next);
	};

	const handleProtect = async (productId: number): Promise<void> => {
		if (!onProtect) return;
		setProtectingIds((prev) => new Set(prev).add(productId));
		try {
			await onProtect(productId);
		} finally {
			setProtectingIds((prev) => {
				const next = new Set(prev);
				next.delete(productId);
				return next;
			});
		}
	};

	// The Action column shows the single most relevant next step for a row,
	// mirroring the Shopify products table: Protect while unprotected, progress
	// while a job runs, Retry on failure, and a nudge toward the toggle once a
	// product is protected but still hidden from AI.
	const renderAction = (
		item: ProductRow,
		visible: boolean,
		primaryIssue: string | null | undefined,
	): JSX.Element | null => {
		const busy = protectingIds.has(item.product_id);

		switch (item.status as ProtectionStatus) {
			case 'IN_PROGRESS':
				return (
					<span style={progressStyle}>
						<Spinner style={{ margin: 0, width: 16, height: 16 }} />
						Protecting…
					</span>
				);
			case 'NEEDS_ATTENTION':
				return (
					<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
						<span style={failedBadgeStyle}>Failed</span>
						{onProtect && (
							<Button
								variant="secondary"
								isBusy={busy}
								disabled={busy}
								onClick={() => handleProtect(item.product_id)}
							>
								Retry
							</Button>
						)}
					</span>
				);
			case 'PROTECTED':
				if (!visible) return <span style={hintStyle}>← Use toggle</span>;
				// Visible and nothing left to fix — otherwise the Readiness column
				// already surfaces the outstanding issue, so no action is needed.
				return primaryIssue ? null : <span style={readyStyle}>Ready</span>;
			default:
				return onProtect ? (
					<Button
						variant="secondary"
						isBusy={busy}
						disabled={busy}
						onClick={() => handleProtect(item.product_id)}
					>
						Protect
					</Button>
				) : null;
		}
	};

	return (
		<>
			<table className="mintall-table">
				<thead>
					<tr>
						{showSelection && (
							<th style={{ width: 32 }}>
								<CheckboxControl
									__nextHasNoMarginBottom
									label=""
									checked={allOnPageSelected}
									indeterminate={someOnPageSelected}
									onChange={toggleSelectAll}
								/>
							</th>
						)}
						<th>Product</th>
						<th>Readiness</th>
						<th>AI visibility</th>
						<th>Action</th>
						<th style={{ textAlign: 'right' }}>Details</th>
					</tr>
				</thead>
				<tbody>
					{items.map((item) => {
						const state = productState?.[item.product_id];
						const score = state?.readiness_score ?? 0;
						const primaryIssue = state?.primary_issue;
						const primaryIssueLabel = state?.primary_issue_label;
						const isProtected = item.status === 'PROTECTED';
						const visible = state?.visible ?? false;

						return (
							<tr key={item.product_id}>
								{showSelection && (
									<td>
										<CheckboxControl
											__nextHasNoMarginBottom
											label=""
											checked={selectedIds?.has(item.product_id) ?? false}
											onChange={(checked) => toggleSelectOne(item.product_id, checked)}
										/>
									</td>
								)}
								<td>
									<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
										{item.product_image ? (
											<img
												src={item.product_image}
												alt={item.product_name}
												className="mintall-product-image"
											/>
										) : (
											<div className="mintall-product-image" style={{ background: '#f0f0f0' }} />
										)}
										{item.product_url ? (
											<a href={item.product_url} style={{ fontWeight: 600 }}>
												{item.product_name}
											</a>
										) : (
											<span style={{ fontWeight: 600 }}>{item.product_name}</span>
										)}
									</span>
								</td>
								<td>
									<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'nowrap' }}>
										<div
											style={{
												width: 80,
												height: 6,
												borderRadius: 3,
												background: '#e0e0e0',
												overflow: 'hidden',
												flexShrink: 0,
											}}
										>
											<div
												style={{
													width: `${score}%`,
													height: '100%',
													borderRadius: 3,
													background: getBarColor(score),
													transition: 'width 0.3s ease',
												}}
											/>
										</div>
										<span
											style={{
												fontSize: 13,
												fontWeight: 600,
												color: getTextColor(score),
												flexShrink: 0,
											}}
										>
											{score}
										</span>
										{primaryIssue ? (
											<span style={{ fontSize: 12, color: '#757575', whiteSpace: 'nowrap' }}>
												{primaryIssueLabel ?? primaryIssue}
											</span>
										) : null}
									</div>
								</td>
								<td>
									<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
										{onVisibilityChange ? (
											<ToggleControl
												label=""
												checked={isProtected && visible}
												disabled={!isProtected}
												onChange={(enabled) => onVisibilityChange(item.product_id, enabled)}
												__nextHasNoMarginBottom
											/>
										) : visible ? (
											'On'
										) : (
											'Off'
										)}
										{isProtected && (
											<Button
												variant="tertiary"
												icon={code}
												label="View record"
												showTooltip
												onClick={() =>
													setSnapshotProduct({ id: item.product_id, name: item.product_name })
												}
											/>
										)}
									</div>
								</td>
								<td>{renderAction(item, visible, primaryIssue)}</td>
								<td style={{ textAlign: 'right' }}>
									{APP_URL && state?.mintall_product_id ? (
										<a
											href={`${APP_URL}/products/${state.mintall_product_id}?source=woocommerce`}
											target="_blank"
											rel="noreferrer"
											aria-label={`View ${item.product_name} in Mintall`}
											title="View in Mintall"
											style={{ display: 'inline-flex', verticalAlign: 'middle' }}
										>
											<Icon icon={external} size={20} />
										</a>
									) : null}
								</td>
							</tr>
						);
					})}
				</tbody>
			</table>

			{snapshotProduct && (
				<SnapshotModal
					productId={snapshotProduct.id}
					productName={snapshotProduct.name}
					onClose={() => setSnapshotProduct(null)}
				/>
			)}
		</>
	);
}

const progressStyle: React.CSSProperties = {
	display: 'inline-flex',
	alignItems: 'center',
	gap: 6,
	fontSize: 13,
	color: '#757575',
	whiteSpace: 'nowrap',
};

const hintStyle: React.CSSProperties = {
	fontSize: 13,
	color: '#757575',
	whiteSpace: 'nowrap',
};

const readyStyle: React.CSSProperties = {
	fontSize: 13,
	fontWeight: 600,
	color: '#00a32a',
	whiteSpace: 'nowrap',
};

const failedBadgeStyle: React.CSSProperties = {
	fontSize: 12,
	fontWeight: 600,
	color: '#d63638',
	background: '#fcf0f1',
	borderRadius: 4,
	padding: '2px 8px',
	whiteSpace: 'nowrap',
};