import { interventionInfo, formatDetailDate } from '@/features/timeline/interventions';
import FlavioIcon from '@/components/ui/flavio-icon';

/** A pill summarizing an intervention outcome. */
const OutcomePill = ({ label, pending }) => (
	<span
		className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold ${
			pending ? 'bg-amber-100 text-amber-700' : 'bg-neutral-100 text-muted-foreground'
		}`}
	>
		{label}
	</span>
);

/**
 * Static, read-only render of a single execution detail (a "task"), matching the
 * timeline row look. Used on the dashboard's Recent improvement card to surface
 * the latest concrete change without the timeline's expand/manage affordances.
 *
 * Successes render as a green-check change row; interventions reuse the shared
 * intervention resolver so wording stays in sync with the Timeline view.
 */
const DetailRow = ({ task }) => {
	if (!task) return null;

	if (task.status === 'intervention') {
		const { title, detail, Icon, blocking, pending, outcome } =
			interventionInfo(task);
		return (
			<div
				className={`rounded-lg border p-5 ${
					pending ? 'border-amber-200 bg-amber-50/40' : 'border-border bg-white'
				}`}
			>
				<div className="flex items-center gap-3">
					<Icon
						className={`w-5 h-5 shrink-0 ${
							pending ? 'text-amber-500' : 'text-muted-foreground'
						}`}
					/>
					<div className="flex-1 min-w-0">
						<p className="paragraph-semibold text-foreground m-0!">{title}</p>
						<p className="small-regular text-muted-foreground m-0!">
							{[detail, formatDetailDate(task.createdAt)]
								.filter(Boolean)
								.join(' · ')}
						</p>
					</div>
					<div className="flex items-center gap-2 shrink-0">
						{blocking && pending && (
							<span className="inline-flex items-center px-2.5 py-1 rounded-md bg-red-50 text-red-600 text-xs font-semibold">
								Blocking
							</span>
						)}
						<OutcomePill label={outcome} pending={pending} />
					</div>
				</div>
			</div>
		);
	}

	if (task.status !== 'success') return null;

	return (
		<div className="rounded-lg border border-border bg-white p-5">
			<div className="flex items-center gap-3">
				<FlavioIcon className="w-5 h-5 shrink-0" />
				<div className="flex-1 min-w-0">
					<p className="paragraph-semibold text-foreground m-0!">
						{task.title}
					</p>
					{task.createdAt && (
						<p className="small-regular text-muted-foreground m-0!">
							{formatDetailDate(task.createdAt)}
						</p>
					)}
				</div>
			</div>
		</div>
	);
};

export default DetailRow;