import type { TaskStatus } from '@self/db';
import type { get_tasks } from '../../service.ts';
import { TASK_STATUS_DESCRIPTION_MAP } from '@self/db/task-status';
import { SITE_BASE_URL } from '../../service.ts';

type StatusColorMap = Record<TaskStatus, string>;

const STATUS_COLOR_MAP_ASSIGN: StatusColorMap = {
	PAUSED: 'bg-blue-100 text-blue-800',
	PENDING: 'bg-blue-100 text-blue-800',
	PICKUP: 'bg-green-100 text-green-800',
	DROPOFF: 'bg-green-100 text-green-800',
	DELIVERED: 'bg-green-100 text-green-800',
	CANCELLED: 'bg-red-100 text-red-800',
	RETURN: 'bg-red-100 text-red-800',
	RETURN_COMPLETE: 'bg-red-100 text-red-800',
};

const STATUS_COLOR_MAP_PICKUP: StatusColorMap = {
	PAUSED: 'bg-blue-100 text-blue-800',
	PENDING: 'bg-blue-100 text-blue-800',
	PICKUP: 'bg-blue-100 text-blue-800',
	DROPOFF: 'bg-green-100 text-green-800',
	DELIVERED: 'bg-green-100 text-green-800',
	CANCELLED: 'bg-red-100 text-red-800',
	RETURN: 'bg-red-100 text-red-800',
	RETURN_COMPLETE: 'bg-red-100 text-red-800',
};

const STATUS_COLOR_MAP_DROPOFF: StatusColorMap = {
	PAUSED: 'bg-blue-100 text-blue-800',
	PENDING: 'bg-blue-100 text-blue-800',
	PICKUP: 'bg-blue-100 text-blue-800',
	DROPOFF: 'bg-blue-100 text-blue-800',
	DELIVERED: 'bg-green-100 text-green-800',
	CANCELLED: 'bg-red-100 text-red-800',
	RETURN: 'bg-red-100 text-red-800',
	RETURN_COMPLETE: 'bg-red-100 text-red-800',
};

const finalized_at_format_options: Intl.DateTimeFormatOptions = {
	month: 'short',
	day: 'numeric',
	hour: 'numeric',
	minute: 'numeric',
	hour12: true,
};

type Task = NonNullable<Awaited<ReturnType<typeof get_tasks>>>[number];

export function TaskInfo({ task }: { task: Task }) {
	const status = task.status as TaskStatus;
	const pickup_finalized_at = task.stops.find(x => x.kind === 'PICKUP')?.finalized_at;
	const dropoff_finalized_at = task.stops.find(x => x.kind === 'DROPOFF')?.finalized_at;

	const task_url = `${SITE_BASE_URL}/tasks/${task.id}`;

	return (
		<div className='space-y-4'>
			<div className='flex justify-center pb-4'>
				{task.status !== 'PAUSED'
					? (
							<a
								href={task_url}
								target='_blank'
								className='inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
								rel='noopener'
							>
								View Details
							</a>
						)
					: (
							<a
								href={`${SITE_BASE_URL}/plan`}
								target='_blank'
								rel='noopener'
								className='inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
							>
								View Shipping Rate
							</a>
						)}
			</div>

			<div className='flex items-start justify-around pb-4'>
				<div className='flex flex-col items-center space-y-2'>
					<div className='text-2xl'>👤</div>
					<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLOR_MAP_ASSIGN[status] || 'bg-gray-100 text-gray-800'}`}>
						1. Assign driver
					</span>
					<div className='h-5'>&nbsp;</div>
				</div>

				<div className='flex flex-col items-center space-y-2'>
					<div className='text-2xl'>📦</div>
					<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLOR_MAP_PICKUP[status] || 'bg-gray-100 text-gray-800'}`}>
						2. Pickup
					</span>
					<div className='h-5 text-xs font-light text-gray-500'>
						{typeof pickup_finalized_at === 'string'
							? new Date(pickup_finalized_at).toLocaleString('en-US', finalized_at_format_options)
							: '\u00A0'}
					</div>
				</div>

				<div className='flex flex-col items-center space-y-2'>
					<div className='text-2xl'>🚚</div>
					<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLOR_MAP_DROPOFF[status] || 'bg-gray-100 text-gray-800'}`}>
						3. Dropoff
					</span>
					<div className='h-5 text-xs font-light text-gray-500'>
						{typeof dropoff_finalized_at === 'string'
							? new Date(dropoff_finalized_at).toLocaleString('en-US', finalized_at_format_options)
							: '\u00A0'}
					</div>
				</div>
			</div>

			<div className='pl-6'>
				<span className='text-sm font-normal italic text-gray-700'>
					Status: {TASK_STATUS_DESCRIPTION_MAP[status]}
				</span>
				{' '}
				<a
					href={task_url}
					target='_blank'
					className='text-sm text-blue-600 underline hover:text-blue-800'
					rel='noopener'
				>
					See task details.
				</a>
			</div>
		</div>
	);
}