import { __ } from '@wordpress/i18n';
import { Lock } from 'lucide-react';
import { clsx } from '@admin/utils';

export function ModuleCard( {
	icon: Icon,
	label,
	description,
	locked,
	active,
	saving,
	error,
	onToggle,
	actionHref,
} ) {
	let toggleLabel = __( 'Activate', 'advanced-ads' );
	if ( saving ) {
		toggleLabel = __( 'Saving…', 'advanced-ads' );
	} else if ( active ) {
		toggleLabel = __( 'Deactivate', 'advanced-ads' );
	}

	let footerAction;
	if ( locked ) {
		footerAction = actionHref ? (
			<a
				href={ actionHref }
				target="_blank"
				rel="noreferrer"
				className="text-sm font-medium text-primary hover:underline"
			>
				{ __( 'Get add-on', 'advanced-ads' ) }
			</a>
		) : (
			<span className="text-sm font-medium text-gray-400">
				{ __( 'Get add-on', 'advanced-ads' ) }
			</span>
		);
	} else {
		footerAction = (
			<button
				type="button"
				onClick={ onToggle }
				disabled={ saving }
				className={ clsx(
					'cursor-pointer rounded border bg-white px-3 py-1.5 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-60',
					active
						? 'border-border text-gray-600 hover:bg-gray-50'
						: 'border-primary text-primary hover:bg-blue-50'
				) }
			>
				{ toggleLabel }
			</button>
		);
	}

	return (
		<div
			className={ clsx(
				'flex flex-col rounded border bg-white p-5',
				active && ! locked
					? 'border-primary'
					: 'border-border hover:border-gray-300'
			) }
		>
			<div className="mb-3 flex items-start justify-between gap-3">
				<div
					className={ clsx(
						'flex size-9 items-center justify-center rounded',
						active && ! locked
							? 'bg-blue-50 text-primary'
							: 'bg-gray-100 text-gray-500'
					) }
				>
					<Icon className="size-[18px]" />
				</div>
				{ locked ? (
					<span className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 text-[11px] font-medium tracking-wide text-gray-500 uppercase">
						<Lock className="size-3" />
						{ __( 'Add-on', 'advanced-ads' ) }
					</span>
				) : (
					<span
						className={ clsx(
							'rounded-full px-2 py-1 text-[11px] font-medium tracking-wide uppercase',
							active
								? 'bg-blue-50 text-primary'
								: 'bg-gray-100 text-gray-500'
						) }
					>
						{ active
							? __( 'Active', 'advanced-ads' )
							: __( 'Inactive', 'advanced-ads' ) }
					</span>
				) }
			</div>
			<div className="text-sm font-semibold text-gray-900">{ label }</div>
			<div className="mt-1.5 flex-1 text-sm text-gray-500">
				{ description }
			</div>
			<div className="mt-4 flex items-center justify-end gap-3 border-t border-border pt-4">
				{ footerAction }
			</div>
			{ error && (
				<div className="mt-2 text-xs text-red-600">{ error }</div>
			) }
		</div>
	);
}