/** 任務顯示組件 */

const TaskDisplay = ({ task, onCancel }) => {
    if (!task) return null;

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

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

    const canCancel = task.status === 'pending' || task.status === 'running';
    
    // 判斷任務類型（默認為台鐵以保持向後兼容）
    const isHSR = task.task_type === 'hsr';
    
    // 遮罩身分證字號（只顯示前後各2位）
    const maskNationalId = (nationalId) => {
        if (!nationalId || nationalId.length < 4) {
            return nationalId;
        }
        return `${nationalId.substring(0, 2)}****${nationalId.substring(nationalId.length - 2)}`;
    };

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