/** 任務列表組件 */

const TaskList = ({ tasks, currentTaskId, onCancel, onRemove }) => {
    if (!tasks || tasks.length === 0) {
        return null;
    }

    const getStatusColor = (status) => {
        switch (status) {
            case 'running':
                return 'bg-blue-100 text-blue-800 border-blue-500';
            case 'pending':
                return 'bg-yellow-100 text-yellow-800 border-yellow-500';
            case 'completed':
                return 'bg-green-100 text-green-800 border-green-500';
            case 'cancelled':
                return 'bg-gray-100 text-gray-800 border-gray-500';
            case 'failed':
                return 'bg-red-100 text-red-800 border-red-500';
            default:
                return 'bg-gray-100 text-gray-800 border-gray-500';
        }
    };

    const getStatusText = (status) => {
        switch (status) {
            case 'pending':
                return '等待中';
            case 'running':
                return '執行中';
            case 'completed':
                return '已完成';
            case 'cancelled':
                return '已取消';
            case 'failed':
                return '執行失敗';
            default:
                return status;
        }
    };

    // 計算等待中的任務位置
    const getPendingPosition = (task, allTasks) => {
        if (task.status !== 'pending') {
            return null;
        }
        const pendingTasks = allTasks.filter(t => t.status === 'pending');
        const index = pendingTasks.findIndex(t => t.task_id === task.task_id);
        return index >= 0 ? index + 1 : null;
    };

    return (
        <div className="mb-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">任務列表</h2>
            <div className="space-y-3">
                {tasks.map((task) => {
                    const isRunning = task.task_id === currentTaskId;
                    const isHSR = task.task_type === 'hsr';
                    const pendingPosition = getPendingPosition(task, tasks);

                    // 遮罩身分證字號
                    const maskNationalId = (nationalId) => {
                        if (!nationalId || nationalId.length < 4) {
                            return nationalId;
                        }
                        return `${nationalId.substring(0, 2)}****${nationalId.substring(nationalId.length - 2)}`;
                    };

                    return (
                        <div
                            key={task.task_id}
                            className={`bg-white rounded-lg shadow-md p-4 border-l-4 ${
                                isRunning ? 'ring-2 ring-blue-500' : ''
                            } ${getStatusColor(task.status)}`}
                        >
                            <div className="flex justify-between items-start mb-2">
                                <div className="flex-1">
                                    <div className="flex items-center gap-2 mb-1">
                                        <h3 className="text-lg font-semibold text-gray-800">
                                            {isHSR ? '高鐵' : '台鐵'}訂票任務
                                        </h3>
                                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
                                            {getStatusText(task.status)}
                                        </span>
                                        {pendingPosition && (
                                            <span className="text-xs text-gray-500">
                                                (#{pendingPosition})
                                            </span>
                                        )}
                                    </div>
                                    
                                    {isHSR ? (
                                        // 高鐵任務顯示
                                        <>
                                            {task.national_id && (
                                                <div className="text-sm text-gray-600 mb-1">
                                                    <span className="font-medium">身分證：</span>
                                                    {maskNationalId(task.national_id)}
                                                </div>
                                            )}
                                            <div className="text-sm text-gray-600 mb-1">
                                                <span className="font-medium">日期：</span>
                                                {task.departure_date || '未設定'}
                                            </div>
                                            <div className="text-sm text-gray-600 mb-1">
                                                <span className="font-medium">路線：</span>
                                                {task.start_position || '未設定'} → {task.end_position || '未設定'}
                                            </div>
                                            <div className="text-sm text-gray-600">
                                                <span className="font-medium">時間：</span>
                                                {task.departure_time || '未設定'}
                                            </div>
                                        </>
                                    ) : (
                                        // 台鐵任務顯示
                                        <>
                                            <div className="text-sm text-gray-600 mb-1">
                                                <span className="font-medium">日期：</span>
                                                {task.date || '未設定'}
                                            </div>
                                            <div className="text-sm text-gray-600 mb-1">
                                                <span className="font-medium">路線：</span>
                                                {task.start_station?.split('-')[1] || task.start_station || '未設定'} → {task.end_station?.split('-')[1] || task.end_station || '未設定'}
                                            </div>
                                            <div className="text-sm text-gray-600 mb-1">
                                                <span className="font-medium">時間：</span>
                                                {task.start_time || '未設定'} ~ {task.end_time || '未設定'}
                                            </div>
                                            <div className="text-sm text-gray-600">
                                                <span className="font-medium">選項：</span>
                                                {[
                                                    task.puyuma_only && '限普悠瑪',
                                                    task.window && '靠窗',
                                                    task.swap_seat && '同車換坐',
                                                    task.t3k && '自強3000'
                                                ].filter(Boolean).join('、') || '預設'}
                                            </div>
                                        </>
                                    )}
                                    
                                    {task.note && (
                                        <div className="mt-2 text-sm text-gray-700 bg-gray-50 p-2 rounded border-l-2 border-gray-300">
                                            <span className="font-medium">備註：</span>
                                            {task.note}
                                        </div>
                                    )}
                                    
                                    {task.message && (
                                        <div className="mt-2 text-xs text-gray-500 italic">
                                            {task.message}
                                        </div>
                                    )}
                                </div>
                            </div>
                            
                            <div className="mt-3 flex gap-2">
                                {(task.status === 'pending' || task.status === 'running') && (
                                    <>
                                        {task.status === 'running' && (
                                            <button
                                                onClick={() => onCancel(task.task_id)}
                                                className="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
                                            >
                                                取消任務
                                            </button>
                                        )}
                                        {task.status === 'pending' && (
                                            <button
                                                onClick={() => onRemove(task.task_id)}
                                                className="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm"
                                            >
                                                移除任務
                                            </button>
                                        )}
                                    </>
                                )}
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};